/*
 * Theme adjustments.
 *
 * assets/css/main.css is the approved design stylesheet and is kept verbatim.
 * Anything this WordPress build needs on top of it lives here, so the two stay
 * easy to tell apart when the design is revised.
 */

/* ---------------------------------------------------------------------------
 * Typographic case
 *
 * Feedback (18 August): "Use title case for primary section headings across all
 * pages, and reserve all caps for small eyebrow/page labels only", and
 * "Standardize the header navigation labels to title case".
 *
 * main.css sets `text-transform: uppercase` on every heading globally and then
 * opts individual headings out one at a time — by the 18th most page headings
 * had already been excepted, leaving the capitals on Home's section headers,
 * the Home insight cards, the footer and anything newly added. Flipping the
 * default here inverts that: headings render as written, and the handful of
 * genuine labels ask for capitals explicitly below. New headings then inherit
 * the approved behaviour instead of the old one.
 *
 * Deleting this block restores the previous all-caps treatment.
 * ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	text-transform: none;
}

/* Class-based rules in main.css outrank the element selector above, so the two
   headings it still capitalises are named here: Home's primary section headings
   and the Home "Latest Insights" card titles. The latter also brings the Home
   previews into line with the Insights page cards, which were already title
   case — the feedback asks for one card system across the two. */
.premium-section-header h2,
.home-insight-card h3 {
	text-transform: none;
}

/* The exceptions the feedback allows: small eyebrow and page labels. Both are
   headings in the markup, so they lose the capitals with everything else and
   have to ask for them back. Their text is stored in title case so the label
   stays readable in wp-admin and the design controls how it is presented. */
.eyebrow-row h2,
.footer h4 {
	text-transform: uppercase;
}

/* Navigation labels are stored as "Home", "About" … and were being capitalised
   by main.css in the header and by this file in the footer. Both now render as
   written, which is what the feedback asks for. */
.nav-links a,
.footer-links a {
	text-transform: none;
}

/* Button labels follow the same rule. The design had already excepted six of
   its eight buttons one by one (hero, footer, services, about, insights and
   contact CTAs); this covers the two that were missed — the header Contact
   button, which the feedback names directly, and "View All Insights" on the
   Home page — rather than leaving them as the only capitalised CTAs. */
.btn {
	text-transform: none;
}

/* ---------------------------------------------------------------------------
 * About — founder identity
 *
 * Feedback (10 August): "Add a clear separator or line break between
 * 'Kaushik Ghosh, Ph.D.' and 'Founder, DataThetics.'"
 *
 * The two already sit on separate lines, so this adds the explicit separator:
 * a short hairline rule, echoing the one under the active nav item rather than
 * introducing a new device. Deleting this block reverts to the plain gap.
 * ------------------------------------------------------------------------ */
.founder-leadership-section .founder-premium-copy h2.founder-name::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	margin-top: 12px;
	background-color: rgba(5, 26, 59, 0.22);
}

.founder-leadership-section .founder-premium-copy h2.founder-name {
	margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
 * Contact — enquiry form
 *
 * The design's submit control was a <button>, so the `.contact-form input`
 * field rule never applied to it. Contact Form 7 renders an <input
 * type="submit">, which that rule does match and outrank, turning the button
 * into a white input box. These rules restore the design's `.btn-secondary`
 * appearance at a specificity that wins.
 * ------------------------------------------------------------------------ */
.contact-form input[type="submit"].btn {
	height: auto;
	border: 2px solid transparent;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.contact-form input[type="submit"].btn-secondary {
	background-color: var(--navy);
	color: var(--white);
}

.contact-form input[type="submit"].btn-secondary:hover {
	background-color: var(--navy-light);
	color: var(--white);
}

/* Contact Form 7's response and validation messages, kept in the design's
   type scale rather than the plugin's default red/green banner styling. */
.contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #b32d2e;
	font-family: 'Jost', sans-serif;
	font-size: 0.85rem;
}

.contact-form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-width: 1px;
	font-family: 'Jost', sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
}

/* The plugin wraps each control in a span; it must fill the field width. */
.contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Vertical rhythm
 *
 * Feedback (18 August), Home: "tighten section-heading scale and vertical
 * padding". Services: "Reduce the final CTA height so the page does not feel
 * unnecessarily long." About and Insights: "Keep the closing CTA compact."
 *
 * Home was the loosest page in the set — its two mid-page sections ran at 64px
 * where every interior section sits at 48–52px. They now join that rhythm.
 *
 * The closing CTA is the other outlier: 102px on Home, Services and Contact.
 * The design had already trimmed it to 69px after About and 48px after
 * Insights, so the base moves to match the About figure and the whole set lands
 * in one range instead of three.
 * ------------------------------------------------------------------------ */
.what-we-do,
.industries {
	padding: 52px 0;
}

.final-cta {
	padding: 68px 0;
}

/* All four pages share this clamp, so tightening it here keeps the section
   headings a consistent size across the site rather than shrinking Home alone. */
.premium-section-header h2,
.insights-section-header h2,
.about-choice-section .section-header h2,
.about-trust-section .section-header h2 {
	font-size: clamp(1.4rem, 2vw, 1.72rem);
}

/* ---------------------------------------------------------------------------
 * Home — hero proof strip
 *
 * Feedback (18 August): "Keep the Decision/Readiness/Path to Value proof strip
 * on one aligned desktop row with equal spacing and consistent separation so
 * the three concepts read as one coordinated element rather than three
 * unrelated text blocks."
 *
 * The three concepts were already evenly spaced and hairline-separated; what
 * split the strip was the outcome line, which carried `margin-left: auto` and
 * so was thrown to the far right edge, leaving a gap in the middle of the row.
 * Giving it the same step and the same hairline as the concepts closes that gap
 * and makes the four parts read as one strip.
 * ------------------------------------------------------------------------ */
.hero-proof-outcome {
	position: relative;
	margin: 0;
}

.hero-proof-strip .hero-proof-outcome::before {
	content: '';
	position: absolute;
	left: -14px;
	top: 50%;
	width: 1px;
	height: 11px;
	background-color: rgba(255, 255, 255, 0.28);
	transform: translateY(-50%);
}

/* Held on one line at desktop widths, as the feedback asks; below that the
   strip is allowed to wrap and the hairline before the outcome is dropped so a
   wrapped line does not start with a stray rule. */
@media (min-width: 993px) {
	.hero-proof-strip {
		flex-wrap: nowrap;
		max-width: 780px;
	}
}

@media (max-width: 992px) {
	.hero-proof-strip .hero-proof-outcome::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Insights — one card system across Home and the Insights page
 *
 * Feedback (18 August): "Use consistent border/background treatment, title
 * hierarchy, and spacing for the three Home Latest Insights preview cards and
 * the cards on the Insights page, while keeping the Home cards more compact as
 * previews."
 *
 * The Home section sits on navy and the Insights page on white, so the two
 * cannot share a literal colour; what they can share is the construction —
 * a hairline box with a 3px accent along the top — and the title hierarchy.
 * The Home card had no side border at all and tracked its titles at 0.03em
 * against the page card's 0. Size is the one thing left deliberately different:
 * 1rem against 1.05rem is what keeps the Home cards reading as previews.
 * ------------------------------------------------------------------------ */
.home-insight-card {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 3px solid var(--white);
}

.home-insight-card h3 {
	letter-spacing: 0;
	line-height: 1.3;
}

.home-insight-card p {
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Services — Discover → Plan → Enable
 *
 * Feedback (18 August): "Replace 01 / 02 / 03 with arrows between Discover,
 * Plan, and Enable. Keep the three stages in one compact horizontal desktop
 * sequence with equal widths and aligned titles/body copy so the flow is
 * immediately clear."
 *
 * The numbers are gone from the markup and from the editor; the arrows are
 * drawn between the cards instead of inside them, so they read as connectors
 * in the sequence rather than as content belonging to either stage. The grid
 * was already three equal tracks — only the gap grows, to give the arrow room.
 * ------------------------------------------------------------------------ */
.process-sequence {
	gap: 46px;
	align-items: stretch;
}

.process-item-premium {
	position: relative;
}

.process-item-premium + .process-item-premium::before {
	content: '\2192'; /* → */
	position: absolute;
	top: 50%;
	left: -23px;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.38);
	font-family: 'Montserrat', sans-serif;
	font-size: 1.35rem;
	line-height: 1;
	pointer-events: none;
}

/* Titles and body copy line up only if every card starts its text at the same
   height, which the flex column below guarantees regardless of stage-name
   length. */
.process-item-premium .process-content {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Below 992px main.css drops the sequence to a single column, so the connector
   turns to point down the stack rather than across it. */
@media (max-width: 992px) {
	.process-sequence {
		gap: 40px;
	}

	.process-item-premium + .process-item-premium::before {
		top: -20px;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

/* ---------------------------------------------------------------------------
 * Insights — topic eyebrow labels
 *
 * Feedback (18 August): "Restore AI Readiness, Data Foundations, Prioritization,
 * Vendor Strategy, and Risk as very small eyebrow labels above the corresponding
 * insight titles", with "one identical label style and a fixed spacing
 * relationship between eyebrow, title, and body copy on all five cards so the
 * labels do not create uneven card heights."
 *
 * The values reuse `.selected-work-card span` exactly — the design's existing
 * eyebrow — so the two card families read as one label system rather than two.
 *
 * `min-height` is what keeps the cards even: the template reserves the row on
 * every card in a grid as soon as one card carries a label, and an empty span
 * then holds the same height as a filled one, so every title starts on the same
 * baseline no matter which items the client has labelled.
 * ------------------------------------------------------------------------ */
.insight-card-topic {
	display: block;
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: 0.85rem;
	margin-bottom: 8px;
}

.insight-card .insight-card-topic {
	color: var(--text-muted);
}

/* The Home previews sit on navy, so the label takes the reversed treatment and
   a slightly tighter step to keep those cards more compact than the page ones. */
.home-insight-card .insight-card-topic {
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 6px;
}

/* Longer titles must not leave the body copy floating at a different depth:
   letting the paragraph take the slack pins each card's internal rhythm. */
.insight-card p {
	flex-grow: 1;
}

/* "the same width, padding, border/background treatment, title/body sizing, and
   content height" — the cards within a row already matched, but the grid sized
   each of its two rows to its own tallest card, so the second row stood ~25px
   taller than the first. Sizing the rows off the tallest card overall makes all
   five one height. */
.insights-page-grid {
	grid-auto-rows: 1fr;
}

/* ---------------------------------------------------------------------------
 * OPEN ISSUE — mobile navigation
 *
 * main.css hides the nav entirely below 1024px:
 *
 *     @media (max-width: 1024px) { .nav-links { display: none; } }
 *
 * and the approved design provides no hamburger or drawer to replace it, so on
 * tablet and phone the only navigation is the CONTACT button. This is a gap in
 * the comps rather than a porting error, so no replacement UI has been invented
 * here — it needs a design decision before launch.
 *
 * The markup is already in place for whichever route is chosen: the header
 * renders a normal <ul class="nav-links"> from the Primary Navigation menu, so
 * a toggle button plus a drawer rule is all that is required.
 * ------------------------------------------------------------------------ */