/* =============================================================================
   Kashi Interior — inner-page sections

   page-hero · story · stats-band · steps · team-split · offer-grid · why-navy
   cta-card · contact-form · contact-info · map

   Sources:
     Kashi About.dc.html      hero, Our story, Stats, How we work, Team
     Kashi Services.dc.html   hero, What we offer, Why choose, Services CTA
     Kashi Contact.dc.html    hero, Contact form, Map, Contact CTA
     Kashi Projects.dc.html / Kashi Blog.dc.html / Kashi Blog Post.dc.html /
     Kashi Project Detail.dc.html  — the four remaining page heroes

   THE FIDELITY RULE: every declaration below is copied character-for-character
   from the `style` / `style-hover` attribute it derives from. The only
   substitution is a colour literal for the --kashi-* token whose default IS
   that literal. Shadows, transition strings, radii and clamp() font-sizes stay
   literal in the rule bodies, per §3 of the build plan. Anything net-new
   carries a /* NET-NEW *​/ note saying why.

   The design has no media queries. Everything here is responsive through
   clamp(), grid auto-fit and flex-wrap. Do not add breakpoints.

   Shared primitives are reused, never redeclared: .k-shell--max/--maxmax/
   --bleed, .k-ground-navy/-cream/-shell, .k-eyebrow(+--sm), .k-rule--28/30,
   .k-chip--40, .k-btn--gold/--navy-caps, .k-crumbs, .k-h em live in
   kashi-base.css; .k-contact / .k-contact__grid (the two-column shell that
   holds contact-form and contact-info) lives in kashi-sections.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01 · PAGE HERO — shared by all seven inner pages
   §"About hero" / "Services hero" / "Contact hero" / "Projects hero" /
   "Blog hero" / "Post hero" / "Project hero"
   -------------------------------------------------------------------------- */

.k-pagehero {
	background: var(--kashi-cream);
}

.k-pagehero__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	align-items: stretch;
}

.k-pagehero__copy {
	padding: clamp(38px, 5vw, 72px) var(--kashi-gut);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The crumb trail is .k-crumbs from the base layer, margin-bottom:26px.
   The Blog Post hero — and only that one — writes 24px. */
.k-pagehero--sm .k-crumbs {
	margin-bottom: 24px;
}

/* --lg  the five section pages: About, Services, Projects, Blog, Contact */
.k-pagehero__title {
	font-family: var(--kashi-font-h1);
	font-size: clamp(38px, 4.6vw, 58px);
	font-weight: 500;
	margin: 0 0 22px;
	letter-spacing: -0.01em;
}

/* --md  Project Detail */
.k-pagehero--md .k-pagehero__title {
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.12;
	margin: 0 0 20px;
}

/* --sm  Blog Post */
.k-pagehero--sm .k-pagehero__title {
	font-size: clamp(30px, 3.8vw, 48px);
	line-height: 1.16;
	text-wrap: pretty;
}

.k-pagehero__lede {
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.85;
	color: var(--kashi-text-muted);
	font-weight: 300;
	margin: 0;
	max-width: 400px;
}

/* Project Detail's lede is followed by the meta pairs, so it carries a bottom
   margin the others do not, and runs 20px wider. */
.k-pagehero--md .k-pagehero__lede {
	margin: 0 0 28px;
	max-width: 420px;
}

.k-pagehero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The two heights are real and are not averaged. */
.k-pagehero--tall .k-pagehero__image {
	min-height: 320px;
}

.k-pagehero--short .k-pagehero__image {
	min-height: 300px;
}

/* -----------------------------------------------------------------------------
   02 · STORY — Kashi About.dc.html §"Our story"
   -------------------------------------------------------------------------- */

/* The section is both the 1440px column and the grid. It carries max-width AND
   the doubled max() gutter (via .k-shell--maxmax); that is what the source
   writes, so both stay. */
.k-story {
	padding-top: clamp(48px, 6vw, 86px);
	padding-bottom: clamp(48px, 6vw, 86px);
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.k-story__eyebrow {
	margin-bottom: 18px;
}

.k-story__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.2;
	font-weight: 500;
	margin: 0 0 22px;
}

.k-story__copy {
	font-size: 15px;
	line-height: 1.85;
	color: var(--kashi-text-muted);
	font-weight: 300;
	margin: 0;
	max-width: 480px;
}

/* The padding is what the badge overhangs into. Remove it and the badge lands
   outside the section. */
.k-story__frame {
	position: relative;
	padding-bottom: 34px;
	padding-right: 14px;
}

.k-story__image {
	width: 100%;
	height: clamp(240px, 26vw, 340px);
	object-fit: cover;
	display: block;
	border-radius: 3px;
}

.k-story__badge {
	position: absolute;
	right: 0;
	bottom: 0;
	background: var(--kashi-navy-deep);
	color: #fff;
	padding: 20px 26px;
	border-radius: 3px;
	text-align: center;
	min-width: 130px;
}

/* Reads 10+ here and 8+ on the landing hero's stats card. Both are intended. */
.k-story__badge-num {
	font-family: var(--kashi-font-display);
	font-size: 30px;
	line-height: 1;
	color: var(--kashi-gold);
}

.k-story__badge-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	margin-top: 8px;
	font-weight: 300;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   03 · STATS BAND — Kashi About.dc.html §"Stats"
   -------------------------------------------------------------------------- */

.k-stats__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	padding: clamp(30px, 3.4vw, 42px) var(--kashi-gut);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--kashi-stat-min, 190px), 1fr));
	gap: 28px;
}

.k-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.k-stat__icon {
	color: var(--kashi-gold);
	flex: none;
}

.k-stat__value {
	font-family: var(--kashi-font-display);
	font-size: 26px;
	line-height: 1.1;
	color: var(--kashi-gold);
}

.k-stat__label {
	font-size: 12.5px;
	font-weight: 300;
	color: var(--kashi-on-dark-72);
	margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   04 · STEPS — Kashi About.dc.html §"How we work"
   -------------------------------------------------------------------------- */

.k-steps {
	padding-top: clamp(48px, 6vw, 84px);
	padding-bottom: clamp(48px, 6vw, 84px);
}

/* The landing page's five eyebrows are 12px; the About and Services heads are
   11px. section-heading has no size knob for the label, so the two 11px heads
   are scoped by their own section rather than by adding a modifier to a block
   another group owns. Not merged with .k-eyebrow--sm for the same reason. */
.k-steps .k-shead .k-eyebrow__label,
.k-offer .k-shead .k-eyebrow__label {
	font-size: 11px;
}

/* Third size for the shared section-heading block, declared whole so this
   section does not depend on the landing group's modifier set. */
.k-shead__title--steps {
	font-family: var(--kashi-font-display);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 500;
	margin: 0;
}

.k-steps__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--kashi-step-min, 200px), 1fr));
	gap: clamp(26px, 3vw, 40px);
}

/* position:relative is in the source and kept, but there is NO connector line
   between the steps — the grid rewraps to two rows and any line would then
   point at nothing. Do not add one. */
.k-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	position: relative;
}

.k-step__icon {
	color: var(--kashi-gold-muted);
}

.k-step__num {
	font-family: var(--kashi-font-display);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--kashi-gold);
}

.k-step__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.k-step__copy {
	font-size: 13px;
	line-height: 1.7;
	color: var(--kashi-text-dim);
	font-weight: 300;
	margin: 0;
	max-width: 220px;
}

/* -----------------------------------------------------------------------------
   05 · TEAM SPLIT — Kashi About.dc.html §"Team"
   -------------------------------------------------------------------------- */

/* Asymmetric on purpose: 44/5.5vw/80 above, 52/6vw/90 below. */
.k-team {
	padding-top: clamp(44px, 5.5vw, 80px);
	padding-bottom: clamp(52px, 6vw, 90px);
}

.k-team__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(30px, 4vw, 54px);
	align-items: center;
}

.k-team__eyebrow {
	margin-bottom: 18px;
}

.k-team__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.22;
	font-weight: 500;
	margin: 0 0 18px;
}

.k-team__copy {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--kashi-text-muted);
	font-weight: 300;
	margin: 0;
	max-width: 340px;
}

.k-team__people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--kashi-team-min, 150px), 1fr));
	gap: 14px;
}

.k-team-card {
	margin: 0;
}

/* Landscape frame at every viewport, which is why the image size is
   kashi-portrait (cropped center/top) rather than a square. */
.k-team-card__photo {
	width: 100%;
	height: clamp(180px, 17vw, 220px);
	object-fit: cover;
	display: block;
	border-radius: 3px;
}

.k-team-card__caption {
	text-align: center;
	padding-top: 14px;
}

.k-team-card__name {
	font-size: 15px;
	font-weight: 600;
}

.k-team-card__role {
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--kashi-gold-muted);
	margin-top: 5px;
	font-weight: 300;
}

/* -----------------------------------------------------------------------------
   06 · OFFER GRID — Kashi Services.dc.html §"What we offer"
   Not the landing services grid: 260 not 178, bare 34px icon not a 56px chip,
   Playfair 19px title not Jost 16px, and a "Learn More" link. Do not merge.
   -------------------------------------------------------------------------- */

.k-offer {
	padding-top: clamp(48px, 6vw, 86px);
	padding-bottom: clamp(48px, 6vw, 86px);
}

/* Fourth size for the shared section-heading block. 27px here, 28px on the
   steps head; near-identical clamps are not merged. */
.k-shead__title--offer {
	font-family: var(--kashi-font-display);
	font-size: clamp(27px, 3.2vw, 40px);
	font-weight: 500;
	margin: 0;
}

.k-offer__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--kashi-offer-min, 260px), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

.k-offer-card {
	background: #fff;
	border: 1px solid var(--kashi-hairline);
	border-radius: 4px;
	padding: clamp(26px, 2.6vw, 36px) clamp(20px, 2.2vw, 30px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	transition: transform .3s ease, box-shadow .3s ease;
}

.k-offer-card:hover,
/* NET-NEW: the hover is on the card, which is not focusable; pairing it with
   :focus-within keeps the lift visible when the "Learn More" link is tabbed to. */
.k-offer-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(11, 27, 51, 0.09);
}

.k-offer-card__icon {
	color: var(--kashi-gold-muted);
}

.k-offer-card__title {
	font-family: var(--kashi-font-display);
	font-size: 19px;
	font-weight: 500;
	margin: 0;
}

.k-offer-card__copy {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--kashi-text-dim);
	font-weight: 300;
	margin: 0;
}

.k-offer-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--kashi-navy);
	margin-top: 4px;
}

/* Raised to body[class] for the same reason the base layer raises its link
   colours: Elementor's site kit class would otherwise win. */
body[class] .k-offer-card__link:hover,
body[class] .k-offer-card__link:focus-visible {
	color: var(--kashi-gold);
}

/* -----------------------------------------------------------------------------
   07 · WHY NAVY — Kashi Services.dc.html §"Why choose"
   -------------------------------------------------------------------------- */

.k-whynavy__grid {
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(30px, 3.4vw, 44px) var(--kashi-gut);
}

.k-whynavy__image {
	width: 100%;
	height: clamp(230px, 24vw, 320px);
	object-fit: cover;
	display: block;
	border-radius: 3px;
}

.k-whynavy__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	margin: 0 0 24px;
}

.k-whynavy__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 30px;
}

.k-whynavy__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	font-weight: 300;
	color: var(--kashi-on-dark-strong);
}

.k-whynavy__check {
	color: var(--kashi-gold);
	flex: none;
	margin-top: 2px;
}

/* The only thing that separates this pill from .k-btn--gold. */
.k-whynavy__btn {
	padding: 11px 30px;
}

/* -----------------------------------------------------------------------------
   08 · CTA CARD — Kashi Services.dc.html §"Services CTA"
                   Kashi Contact.dc.html  §"Contact CTA"
   Two variants that genuinely differ: cream section + bordered #FFFDFA card on
   Services, shell section + plain #F8F6F1 card on Contact. Both kept.
   -------------------------------------------------------------------------- */

.k-ctacard--services {
	padding-top: clamp(44px, 5vw, 72px);
	padding-bottom: clamp(44px, 5vw, 72px);
}

.k-ctacard--contact {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

.k-ctacard__card {
	max-width: var(--kashi-max);
	margin-inline: auto;
	border-radius: 4px;
	padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px);
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: center;
	justify-content: space-between;
}

.k-ctacard--services .k-ctacard__card {
	background: var(--kashi-shell);
	border: 1px solid var(--kashi-hairline);
}

.k-ctacard--contact .k-ctacard__card {
	background: var(--kashi-cream);
}

.k-ctacard__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 500;
	margin: 0 0 8px;
}

.k-ctacard__copy {
	font-size: 14px;
	color: var(--kashi-text-dim);
	font-weight: 300;
	margin: 0;
}

/* -----------------------------------------------------------------------------
   09 · CONTACT FORM COLUMN — Kashi Contact.dc.html §"Contact form" (left)
   The grid around it is .k-contact__grid in kashi-sections.css; the fields
   themselves are Fluent Forms, restyled in kashi-fluentform.css.
   -------------------------------------------------------------------------- */

.k-cform__title,
.k-cinfo__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(26px, 2.8vw, 34px);
	font-weight: 500;
	margin: 0 0 28px;
}

/* -----------------------------------------------------------------------------
   10 · CONTACT INFO COLUMN — Kashi Contact.dc.html §"Contact form" (right)
   -------------------------------------------------------------------------- */

.k-cinfo__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.k-cinfo__row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.k-cinfo__label {
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 5px;
}

/* LOAD-BEARING: Phone and Email have an empty second line and the div is still
   emitted for them. This rule gives that empty div a 13.5 x 1.7 line box, which
   is what keeps all four cards the same height. Do not add :empty{display:none}. */
.k-cinfo__line {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--kashi-text-dim);
	font-weight: 300;
}

/* -----------------------------------------------------------------------------
   11 · MAP — Kashi Contact.dc.html §"Map"
   Zero vertical padding: the embed sits flush between the contact grid and the
   CTA card, so only the .k-shell--bleed side gutter applies.
   -------------------------------------------------------------------------- */

.k-map__frame {
	max-width: var(--kashi-max);
	margin-inline: auto;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--kashi-hairline-08);
}

.k-map__embed {
	width: 100%;
	height: clamp(240px, 26vw, 340px);
	border: 0;
	display: block;
}