/* DP1 DESIGN — client-requested refinements layered on top of the extracted page CSS.
 * Kept in a separate file (loaded AFTER the per-template page CSS) so re-running the
 * extractor never overwrites these tweaks. Add only intentional deviations here.
 */

/* -------------------------------------------------------------------------
 * 1) Center an incomplete last row of card grids.
 *    The insights grid shows 5 cards in a 3-column grid, so the last row has 2
 *    left-aligned cards. Switch to flex + justify-content:center so a short last
 *    row is centered, while preserving the original 3 / 2 / 1 responsive counts
 *    (breakpoints: 1024px -> 2 cols, 768px -> 1 col) and the 16px gap.
 * ---------------------------------------------------------------------- */
.insight-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.insight-grid > .insight {
	flex: 0 1 calc((100% - 2 * 16px) / 3);
	min-width: 0;
}
@media (max-width: 1024px) {
	.insight-grid > .insight { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 768px) {
	.insight-grid > .insight { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
 * 2) More breathing room above the final-CTA fine print
 *    ("No commitment · 30-minute consultation · Since 2001").
 * ---------------------------------------------------------------------- */
.final-cta__fineprint {
	margin-top: 40px;
}

/* -------------------------------------------------------------------------
 * 3) Gravity Forms — styled to match the original .contact-form design.
 *    Keeps Gravity Forms' default CSS + class structure (orbital theme); these
 *    rules only layer the DP1 dark look on top. Scoped to .gform_wrapper so every
 *    GF form on the site gets the same look.
 * ---------------------------------------------------------------------- */
.gform_wrapper {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(26px, 3vw, 40px);
}
.gform_wrapper .gform_required_legend { display: none; }

/* Field grid — 18px gutters like the original .form-row gap. The GF framework theme
 * sets its own row/column gap + field/label spacing via higher-specificity rules, so
 * these need !important to match the original's airy vertical rhythm. */
.gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	align-items: start;
	gap: 18px !important;
	grid-row-gap: 18px !important;
	grid-column-gap: 18px !important;
}
/* Paired fields (Full Name+Email, Phone+Interested) stay side-by-side like the
 * original .form-row; GF's container query would otherwise stack them when the
 * contact column is narrow. Full-width fields + everything collapses on mobile. */
.gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1; }
.gform_wrapper .gform_fields > .gfield.gfield--width-half { grid-column: span 6; }
@media (max-width: 640px) {
	.gform_wrapper .gform_fields > .gfield.gfield--width-half { grid-column: 1 / -1; }
}
.gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }
.gform_wrapper .gfield > .ginput_container,
.gform_wrapper .ginput_container { margin-top: 0 !important; }
.gform_wrapper .gform-body,
.gform_wrapper .gform_body { margin: 0 !important; }

/* Labels — uppercase grotesk, muted (original .contact-form label) */
.gform_wrapper .gfield_label {
	display: block !important;
	font-family: var(--grotesk) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--text-muted) !important;
	margin: 0 0 8px !important;
	line-height: 1.3 !important;
}
.gform_wrapper .gfield_required { color: var(--accent); }

/* Inputs / select / textarea */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-family: var(--sans) !important;
	font-size: 15px !important;
	color: var(--text) !important;
	background-color: #131316 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	width: 100% !important;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	transition: border-color 0.2s ease;
}
.gform_wrapper select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}
.gform_wrapper textarea { resize: vertical; height: 150px !important; min-height: 150px; }
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus { border-color: var(--accent); outline: none; }
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--text-faint); }

/* Submit — .btn .btn-primary, full-width & centered like the original */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer { padding: 0; margin: 4px 0 0; }
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	font-family: var(--sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 14px 26px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	background: var(--accent) !important;
	color: #06121C !important;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}
.gform_wrapper .gform_button:hover { background: #5FBEFF !important; transform: translateY(-2px); }

/* Fine-print HTML field keeps the original .form-fineprint styling */
.gform_wrapper .form-fineprint { margin: 0; }

/* Validation */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: #ff5a76; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { color: #ff8ba0; font-size: 12.5px; background: none; border: 0; padding: 4px 0 0; }
.gform_wrapper .gform_validation_errors { display: none; }

/* -------------------------------------------------------------------------
 * 4) Services page — remove the NOLA map texture from the "What we do" (#services)
 *    section per client request. Keeps the original blue/purple galaxy glows; only
 *    the map image layer is dropped. Scoped to the services page via the page-<slug>
 *    body class so other pages are untouched.
 * ---------------------------------------------------------------------- */
.page-services #services {
	background:
		radial-gradient(ellipse 95% 75% at top left, rgba(58, 176, 255, 0.55) 0%, rgba(58, 176, 255, 0) 55%),
		radial-gradient(ellipse 95% 75% at bottom right, rgba(185, 79, 255, 0.55) 0%, rgba(185, 79, 255, 0) 55%),
		linear-gradient(135deg, rgba(15, 25, 60, 0.55) 0%, rgba(45, 20, 80, 0.55) 100%),
		#0A0A0B !important;
}

/* ============================================================
   Free AI Visibility Audit — custom hero (audit-hero), extracted
   from the original page. Its page loads single-service.css which
   lacks these, so they live here (custom.css loads site-wide).
   ============================================================ */
.audit-hero{
  padding: clamp(28px, 4vw, 60px) 0 clamp(40px, 5vw, 72px);
}
.audit-hero__grid{
  display: grid;
  grid-template-columns: minmax(340px, 480px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 20px;
}
.audit-hero__form-card{
  background: var(--surface, #101215);
  border: 1px solid rgba(58,176,255,0.28);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  position: sticky;
  top: 100px;
}
.audit-hero__form-badge{
  display: inline-block;
  font-family: var(--grotesk, 'Space Grotesk', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #3AB0FF);
  padding: 5px 10px;
  border: 1px solid rgba(58,176,255,0.35);
  border-radius: 999px;
  background: rgba(58,176,255,0.06);
  margin-bottom: 12px;
}
.audit-hero__form-title{
  font-family: var(--grotesk, 'Space Grotesk', sans-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--text, #ECEEF1);
}
.audit-hero__form-sub{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #A6ADB8);
  margin: 0 0 20px;
}
.audit-hero__form-card .contact-form label{
  font-size: 12px;
  letter-spacing: 0.02em;
}
.audit-hero__form-card .contact-form input,
.audit-hero__form-card .contact-form select,
.audit-hero__form-card .contact-form textarea{
  font-size: 14px;
}
.audit-hero__form-card .form-row{
  gap: 12px;
}
.audit-hero__form-card .form-fineprint{
  font-size: 11.5px;
  margin-top: 10px;
  color: var(--text-muted, #A6ADB8);
}
.audit-hero__content .eyebrow{ margin-bottom: 14px; }
.audit-hero__content .subhero__title{ margin-bottom: 16px; }
.audit-hero__content .subhero__sub{ margin-bottom: 28px; }
.audit-hero__trust{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.audit-hero__trust-item{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-hero__trust-item strong{
  font-family: var(--grotesk, 'Space Grotesk', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #ECEEF1);
}
.audit-hero__trust-item span{
  font-size: 12px;
  color: var(--text-muted, #A6ADB8);
}
.audit-hero__phone{
  font-size: 15px;
  color: var(--text-muted, #A6ADB8);
  margin: 0;
}
.audit-hero__phone a{
  color: var(--text, #ECEEF1);
  text-decoration: none;
  border-bottom: 1px dashed rgba(58,176,255,0.6);
}
.audit-hero__phone a:hover{ color: var(--accent, #3AB0FF); }

@media (max-width: 960px){
  .audit-hero__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .audit-hero__form-card{ position: static; order: 0; }
  .audit-hero__content{ order: 1; }
}

/* -------------------------------------------------------------------------
 * Section rhythm — professional, consistent vertical spacing between content
 * sections across the whole site (premium UI pass).
 *
 * WHY: The flexible-block marketing/index pages (Insights, Industries,
 * Locations, Testimonials indexes, the AISEO Glossary …) render their body
 * as bare <section> children of `.page-shell > .container` — no `.section`
 * class and no `.page-article` wrapper — so NONE of the design-system spacing
 * rules (`.section{padding:var(--section-gap)…}`, `.page-article > section
 * {margin-bottom…}`) ever reach them. Result: "Latest", the newsletter, FAQ,
 * "About DP1 DESIGN" and "Related pages" stack flush against each other.
 * These rules give every content section a clean, consistent, responsive gap
 * (desktop / tablet / mobile) without touching the verbatim page CSS.
 * ---------------------------------------------------------------------- */

/* A shared, fluid section gap used across the site. */
:root{ --dp1-flow: clamp(64px, 6.5vw, 104px); }

/* 1) Flex-block index/marketing pages + glossary: space each bare section.
 *    The subhero + `.page-shell` top padding already give the first section
 *    its top gap, so the first one stays flush to the shell. */
.page-shell > .container > section{ margin-top: var(--dp1-flow); }
.page-shell > .container > section:first-child{ margin-top: 0; }

/* Byline / key-takeaways / package chips sit just above the first real
 *    section as an intro block — keep them tight to what follows, but give the
 *    first true section that follows them a proper gap. */
.page-shell > .container > .article-byline + section,
.page-shell > .container > .key-takeaways + section,
.page-shell > .container > .pkg-included + section,
.page-shell > .container > .visually-hidden + section,
.page-shell > .container > .jumpbar + section{ margin-top: var(--dp1-flow); }

/* 2) Article / single (CPT detail pages, blog posts): unify the existing
 *    46–72px rhythm up to the same premium scale so long-form pages breathe
 *    consistently with the index pages. Wins over the per-page value. */
.page-article > section,
.page-single > section{ margin-bottom: clamp(56px, 6vw, 92px); }

/* 3) A touch more air under a section's heading block before its body/grid,
 *    so headings never kiss the content beneath them. Only applies where the
 *    section CSS didn't already set generous margins. */
.page-shell > .container > section > h2:first-child{ margin-bottom: clamp(18px, 2.2vw, 28px); }

/* 4) Mobile: tighten the fluid gap floor a little so sections don't feel
 *    over-spaced on small screens while still clearly separated. */
@media (max-width: 600px){
  :root{ --dp1-flow: 52px; }
  .page-article > section,
  .page-single > section{ margin-bottom: 44px; }
}

/* 5) Intra-section rhythm — separate a section's heading / intro paragraph from
 *    the card grid beneath it. The flex blocks echo the intro as a bare <p>
 *    directly above `.insight-grid` / `.related-grid` / `.bento` / `.testi-grid`
 *    / `.brand-tiles`, so the intro copy was sitting flush on the cards. Give
 *    those grids a consistent top gap wherever they follow section content. */
.page-shell > .container > section > .insight-grid,
.page-shell > .container > section > .related-grid,
.page-shell > .container > section > .bento,
.page-shell > .container > section > .testi-grid,
.page-shell > .container > section > .brand-tiles,
.page-article > section > .insight-grid,
.page-article > section > .related-grid,
.page-article > section > .bento,
.page-article > section > .testi-grid,
.page-article > section > .brand-tiles{
  margin-top: clamp(28px, 3vw, 44px);
}
/* When a plain intro <p> precedes the grid, keep the copy tight to the heading
 *    and let the grid's own top gap do the separating (avoids a double gap). */
.page-shell > .container > section > p{ margin-bottom: 0; }

/* -------------------------------------------------------------------------
 * Newsletter Gravity Form (inside .data-callout on the Insights index).
 * Render the single email field + Subscribe INLINE and on-brand, matching the
 * original static signup — not Gravity Forms' stacked blue default. Uses
 * !important on the key layout/brand props because GF's theme stylesheet is
 * highly specific and may load after this file.
 * ---------------------------------------------------------------------- */
.data-callout .gform_wrapper{ margin-top: 14px !important; }
.data-callout .gform_wrapper form{ margin: 0 !important; }
.data-callout .gform_wrapper .gform_body,
.data-callout .gform_wrapper .gform_fields,
.data-callout .gform_wrapper .gfield{ margin: 0 !important; padding: 0 !important; }
.data-callout .gform_wrapper .gform_fields{ display: block !important; grid-template-columns: none !important; }
.data-callout .gform_wrapper .gfield_label,
.data-callout .gform_wrapper .gform_required_legend{ display: none !important; }

/* Inline layout on wider screens: email flexes, button hugs its content. */
@media (min-width: 620px){
  .data-callout .gform_wrapper form{ display: flex !important; gap: 12px !important; align-items: stretch !important; flex-wrap: wrap; }
  .data-callout .gform_wrapper .gform_body{ flex: 1 1 240px !important; }
  .data-callout .gform_wrapper .gform_footer{ flex: 0 0 auto !important; }
}

/* Email input — match the original inline box. */
.data-callout .gform_wrapper input[type=email]{
  width: 100% !important; padding: 14px 16px !important; border-radius: 10px !important;
  border: 1px solid var(--border-strong) !important; background: var(--bg-soft) !important;
  color: var(--text) !important; font-family: inherit !important; font-size: 15px !important;
}
.data-callout .gform_wrapper input[type=email]::placeholder{ color: var(--text-muted); opacity: .8; }

/* Subscribe button = .btn .btn-primary. */
.data-callout .gform_wrapper .gform_footer{ margin: 0 !important; padding: 0 !important; }
.data-callout .gform_wrapper .gform_footer input[type=submit],
.data-callout .gform_wrapper .gform_footer button{
  display: inline-flex !important; align-items: center; justify-content: center;
  font-family: var(--sans) !important; font-size: 15px !important; font-weight: 600 !important;
  padding: 14px 26px !important; border-radius: 10px !important; border: 1px solid transparent !important;
  cursor: pointer; white-space: nowrap; width: auto !important;
  background: var(--accent) !important; color: #06121C !important;
  transition: transform .2s ease, background .2s ease;
}
.data-callout .gform_wrapper .gform_footer input[type=submit]:hover,
.data-callout .gform_wrapper .gform_footer button:hover{ background: #5FBEFF !important; transform: translateY(-2px); }

/* Mobile: stack, button full-width under the email. */
@media (max-width: 619px){
  .data-callout .gform_wrapper .gform_footer{ margin-top: 12px !important; }
  .data-callout .gform_wrapper .gform_footer input[type=submit],
  .data-callout .gform_wrapper .gform_footer button{ width: 100% !important; }
}

/* GF validation / confirmation copy on-brand. */
.data-callout .gform_wrapper .gfield_description.validation_message,
.data-callout .gform_wrapper .validation_error{ color: #ffb4b4; background: transparent; border: none; font-size: 13px; }

/* -------------------------------------------------------------------------
 * Centered section headers — truly center the heading + sub.
 * `.section-head` blocks that opt into centering (inline text-align:center +
 * max-width + margin:0 auto) still left-align their children, because
 * `.h-section` (max-width:20ch) and `.section-sub` (max-width:56ch) have no
 * auto side-margins — so the narrower blocks sit at the LEFT of the centered
 * head and only their text centers (heading measured ~73px left of true
 * centre). Give those blocks auto side-margins so the whole header is centered.
 * ---------------------------------------------------------------------- */
.section-head[style*="center"] > .h-section,
.section-head[style*="center"] > .section-sub,
.section-head[style*="center"] > h2,
.section-head[style*="center"] > p{
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Final CTA — trim the oversized dead space below the fineprint.
 * `.final-cta` used symmetric `var(--section-gap)` padding (up to 150px) top
 * AND bottom, leaving the compact fineprint floating in a void before the
 * footer. Keep a strong top, tighten the bottom to a balanced, premium amount.
 * ---------------------------------------------------------------------- */
.final-cta{ padding-bottom: clamp(52px, 5.5vw, 88px) !important; }

/* -------------------------------------------------------------------------
 * "On this page" scrollspy — active-section highlight (see theme.js).
 * Subtle, premium: accent text + accent left-bar + faint accent fill in the
 * sidebar TOC; accent + underline in the horizontal jumpbar. Builds on the
 * existing hover treatment so it reads as a persistent "you are here".
 * ---------------------------------------------------------------------- */
.toc a.is-active{
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(58,176,255,0.08);
  font-weight: 600;
}
.jumpbar a.is-active{
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* -------------------------------------------------------------------------
 * Archive / search templates — search box, pagination, a11y helper.
 * Used by search.php / archive.php / searchform.php (blog listings). These
 * classes aren't in the extracted page CSS, so they live here.
 * ---------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* On-brand search box (subhero) */
.search-hero-form{ margin-top: 22px; max-width: 560px; }
.dp1-search{ display:flex; gap:12px; flex-wrap:wrap; }
.dp1-search__input{
  flex:1 1 240px; min-width:0; padding:14px 16px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--bg-soft);
  color:var(--text); font-family:inherit; font-size:15px;
}
.dp1-search__input::placeholder{ color:var(--text-muted); opacity:.8; }
.dp1-search__input:focus{ outline:none; border-color:var(--accent); }
.dp1-search__btn{ flex:0 0 auto; }
@media (max-width:600px){ .dp1-search__btn{ width:100%; justify-content:center; } }

/* Numbered pagination for the blog listings */
.pagination{ margin-top: clamp(40px, 5vw, 64px); }
.pagination .nav-links{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px;
  padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  color:var(--text-muted); background:var(--surface); font-family:var(--grotesk);
  font-size:14px; text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.pagination a.page-numbers:hover{ color:var(--text); border-color:var(--accent); background:rgba(255,255,255,0.04); }
.pagination .page-numbers.current{
  color:var(--accent); border-color:var(--accent); background:rgba(58,176,255,0.08); font-weight:600;
}
.pagination .page-numbers.dots{ border-color:transparent; background:transparent; }

/* -------------------------------------------------------------------------
 * Mobile overflow guard. Full-bleed elements (e.g. home `.brand-tiles`) use
 * `width:100vw`, which is the VIEWPORT width INCLUDING the scrollbar — so they
 * overflow the document by the scrollbar width (~17px) and cause a tiny
 * horizontal scroll. `overflow-x: clip` clips that excess WITHOUT creating a
 * scroll container, so `position: sticky` (the TOC sidebar) keeps working —
 * unlike `overflow-x: hidden`, which would break it.
 * ---------------------------------------------------------------------- */
html, body{ overflow-x: clip; }

/* -------------------------------------------------------------------------
 * Homepage testimonials → Ready CTA: the .section class has top padding only,
 * so the "Read all reviews" button was flush against the CTA band's background
 * edge. Add bottom breathing room to the testimonials section.
 * ---------------------------------------------------------------------- */
#testimonials{ padding-bottom: clamp(64px, 7vw, 104px); }
.testi-more{ margin-top: clamp(32px, 4vw, 52px); }

/* -------------------------------------------------------------------------
 * Homepage "What we do" services bento — RESPONSIVE FIX.
 * The grid columns (repeat(12,1fr)) and each card's span (grid-column:span N)
 * are set as INLINE styles, so ordinary media queries can't reflow them — on
 * tablet/mobile the cards stayed 4-across and squished with clipped text.
 * Force a proper stack with !important (inline styles otherwise win).
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Reflow the 4-across bento to 2 columns so cards aren't squished. */
  #services .bento{ grid-template-columns: repeat(2, 1fr) !important; }
  #services .bento > .service-card{ grid-column: auto !important; }

  /* Restack each card as: label -> icons -> heading -> text. The decorative
     top-right watermark becomes a normal in-flow icon row (not overlapping). */
  #services .service-card{ display: flex; flex-direction: column; }
  #services .service-card__label{ order: 1; padding-right: 0; margin-bottom: 12px; }
  #services .service-card__watermark{
    position: static; order: 2;
    width: auto; height: auto; opacity: 1;
    justify-content: flex-start; margin: 0 0 16px;
  }
  #services .service-card__watermark svg,
  #services .service-card__watermark img{ max-height: 34px; width: auto; height: auto; }
  #services .service-card h3{ order: 3; }
  #services .service-card p{ order: 4; font-size: 14px; line-height: 1.55; }
  #services .service-card__arrow{ order: 5; }
}
@media (max-width: 600px) {
  #services .bento{ grid-template-columns: 1fr !important; }
  #services .bento > .service-card{ grid-column: auto !important; }
}

/* -------------------------------------------------------------------------
 * Reviews: widen the quote text. The extracted rule capped it at 52ch which
 * left full-width review cards (e.g. Insights #client-voices) looking narrow.
 * Let the quote use the card width (client request via DP1 Comments PDF).
 * ---------------------------------------------------------------------- */
.testimonial-card blockquote p{ max-width: none; }

/* -------------------------------------------------------------------------
 * Mobile overflow — contact / find-your-service hero columns.
 * The form/quiz card has a large intrinsic min-width, so on very narrow phones
 * (Galaxy Fold 344px, etc.) the grid column stayed ~423px and overflowed the
 * viewport (then got clipped, cutting content off). min-width:0 lets grid items
 * shrink below their content's min-width; inputs are capped to their box.
 * ---------------------------------------------------------------------- */
.contact-hero__grid, .contact-hero__form-card, .contact-hero__content,
.fys-hero__grid, .fys-hero__quiz-card, .fys-hero__content{ min-width: 0; }
.contact-hero__grid > *, .fys-hero__grid > *{ min-width: 0; max-width: 100%; }
.gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea{ max-width: 100%; box-sizing: border-box; }

/* -------------------------------------------------------------------------
 * Wide content tables (comparison tables on service/blog/audit/industry
 * articles) overflowed the viewport on phones and got clipped. Wrap them in a
 * horizontal-scroll container (theme.js) so they scroll instead of cutting off.
 * ---------------------------------------------------------------------- */
.table-scroll{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
main table{ max-width: 100%; }

/* -------------------------------------------------------------------------
 * Breadcrumbs wrap on narrow screens. A long last-crumb title (e.g. industry
 * detail "Web Design & AI Search Optimization for Salons…") didn't wrap and
 * forced the subhero container wider than the phone viewport.
 * ---------------------------------------------------------------------- */
.breadcrumbs ol{ flex-wrap: wrap; }
.breadcrumbs li{ min-width: 0; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
 * Subhero: never let a long title/crumb/serif span force the container wider
 * than the phone viewport (industry-detail titles like "Web Design & AI Search
 * Optimization for Salons / Beauty / Med Spas" overflowed at ~360px).
 * ---------------------------------------------------------------------- */
/* NOTE: keep the container's own 1440px cap (so the banner content aligns with
 * the body container below); only let its CHILDREN wrap. Capping .container
 * itself made the case-study/subhero banner span full-bleed on desktop. */
.subhero .container{ min-width: 0; }
.subhero .container > *{ max-width: 100%; min-width: 0; }
.subhero__title, .subhero__title .serif, .subhero .breadcrumbs li,
.subhero__sub{ overflow-wrap: anywhere; word-break: break-word; white-space: normal; }

/* -------------------------------------------------------------------------
 * Smallest phones (<=400px, e.g. 320px iPhone SE 1st-gen / old Androids):
 * buttons, package chips, hero CTAs and testimonial cards had fixed/intrinsic
 * widths that overflowed by 20-60px. Constrain them to the viewport.
 * ---------------------------------------------------------------------- */
@media (max-width: 400px){
  .btn{ max-width: 100%; white-space: normal; }
  .badge-chip{ max-width: 100%; overflow-wrap: anywhere; }
  .hero__ctas, .subhero__ctas, .pkg-included, .final-cta__ctas{ flex-wrap: wrap; }
  .hero__ctas .btn, .subhero__ctas .btn{ width: 100%; justify-content: center; }
  .testi, .testimonial-card, .data-callout{ max-width: 100%; }
  .hero__sub, .h-display, .subhero__title{ max-width: 100%; overflow-wrap: anywhere; }
}

/* Audit hero: same narrow-phone min-width fix as the contact/FYS heroes so the
   testimonial card + columns fit at 320px. */
.audit-hero__grid, .audit-hero__form-card, .audit-hero__content{ min-width: 0; }
.audit-hero__grid > *{ min-width: 0; max-width: 100%; }

/* Testimonial grids with an inline 2-col grid-template-columns (e.g. the audit
   page cta-band) stayed 2-up on phones and overflowed — force 1 column. */
@media (max-width: 640px){ .testi-grid{ grid-template-columns: 1fr !important; } }
/* Long inline links in article content shouldn't force overflow on tiny phones. */
@media (max-width: 400px){ main a{ overflow-wrap: anywhere; } }

/* pkg-cta-inline links have white-space:nowrap; long ones overflowed tiny phones. */
@media (max-width: 400px){ .pkg-cta-inline, .pkg-cta-inline a{ white-space: normal; overflow-wrap: anywhere; } }

/* -------------------------------------------------------------------------
 * Service cards: the long "WEB + INFRASTRUCTURE" label ran under the decorative
 * watermark icons (top-right, absolute) on narrower 4-column cards (~1300px).
 * Reserve room for the watermark on the label and shrink the watermark a touch.
 * ---------------------------------------------------------------------- */
#services .service-card__label{ padding-right: 96px; }
#services .service-card__watermark{ width: 84px; }

/* -------------------------------------------------------------------------
 * Mobile menu accordion: top-level rows with a dropdown caret on items that
 * have a sub-menu; sub-menus are collapsed by default and expand on tap
 * (previously every sub-menu was rendered flat/always-open).
 * ---------------------------------------------------------------------- */
.mobile-menu__group{ border-bottom: 1px solid var(--border); }
.mobile-menu__row{ display: flex; align-items: stretch; }
.mobile-menu .mobile-menu__top{ flex: 1 1 auto; border-bottom: none; }
.mobile-menu .mobile-menu__top--solo{ display: block; border-bottom: 1px solid var(--border); }
.mobile-menu__caret{
  flex: 0 0 auto; width: 54px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-left: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; padding: 0; margin: 0;
}
.mobile-menu__caret svg{ width: 20px; height: 20px; transition: transform .25s ease; }
.mobile-menu__caret:hover{ color: var(--text); }
.mobile-menu__group.is-open .mobile-menu__caret svg{ transform: rotate(180deg); }
.mobile-menu__sub-wrap{ display: flex; flex-direction: column; padding: 2px 0 8px; }
.mobile-menu__sub-wrap[hidden]{ display: none; }
.mobile-menu .mobile-menu__sub{ border-bottom: none; padding: 9px 0 9px 18px; font-size: 14px; }

/* -------------------------------------------------------------------------
 * Footer menu columns — mobile → 1024px "styled list" treatment.
 * Each column heading becomes a full-width gradient pill and its links become
 * centered, divider-separated rows. DP1 dark-theme palette (blue → cyan),
 * NOT the reference image's colours.
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer .footer__grid{ grid-template-columns: 1fr !important; gap: 20px; text-align: center; }
  .footer .footer__col{ margin: 0; text-align: center; }

  /* Center the brand block (logo, tagline, address, social) too. */
  .footer .footer__brand{ text-align: center; }
  .footer .footer__brand .logo--footer{ display: inline-flex; justify-content: center; }
  .footer .footer__brand .tag{ text-align: center; margin-left: auto; margin-right: auto; }
  .footer .footer__brand address{ text-align: center; }
  .footer .footer__brand address a{ display: inline-block; }
  .footer .footer__brand-social{ display: flex; justify-content: center; flex-wrap: wrap; }

  .footer .footer__col h4{
    display: block;
    margin: 0 0 2px;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-blue), var(--cyan));
    color: #06131b;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: none;
  }
  .footer .footer__col ul{ list-style: none; margin: 0; padding: 0; }
  .footer .footer__col ul li{ margin: 0; border-bottom: 1px solid var(--border); }
  .footer .footer__col ul li a{
    display: block;
    padding: 15px 12px;
    color: var(--text-muted);
    font-size: 15px;
    text-align: center;
    transition: color .15s ease, background .15s ease;
  }
  .footer .footer__col ul li a:hover{ color: var(--text); background: var(--surface-hover); }
}

/* -------------------------------------------------------------------------
 * Mobile-portrait sticky CTA bar (Free Quote + Call Us), fixed to the bottom.
 * DP1 dark theme: solid accent-blue primary + dark "outline" call button
 * (NOT the reference image's blue/yellow). Hidden above 600px.
 * ---------------------------------------------------------------------- */
.mobile-cta-bar{ display: none; }
@media (max-width: 600px) {
  .mobile-cta-bar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: var(--bg-soft, #0E1114);
    border-top: 1px solid var(--border-strong, rgba(255,255,255,0.14));
    box-shadow: 0 -6px 22px rgba(0,0,0,0.45);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-cta-bar__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    padding: 15px 10px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .mobile-cta-bar__btn svg{ width: 18px; height: 18px; flex: 0 0 auto; }
  .mobile-cta-bar__btn--primary{ background: var(--accent, #3AB0FF); color: #06121C; }
  .mobile-cta-bar__btn--primary:active{ background: #5FBEFF; }
  .mobile-cta-bar__btn--call{ background: var(--surface, #131316); color: var(--text, #F5F5F7); border-left: 1px solid var(--border, rgba(255,255,255,0.08)); }
  .mobile-cta-bar__btn--call svg{ color: var(--cyan, #00E5D1); }
  .mobile-cta-bar__btn--call:active{ background: var(--surface-hover, #191C21); }

  /* Keep the bar from covering the footer copyright + lift the floating audit nudge. */
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #floatAudit{ bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* -------------------------------------------------------------------------
 * Homepage contact form: make the column itself the form card (mirrors the
 * contact page's .contact-hero__form-card) so the reassurance fineprint sits
 * INSIDE the box. The inner Gravity Forms wrapper is de-carded to avoid a
 * card-inside-a-card.
 * ---------------------------------------------------------------------- */
.contact__form-col{
  background: var(--surface, #131316);
  border: 1px solid rgba(58,176,255,0.28);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.contact__form-col .gform_wrapper{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.contact__form-col .form-fineprint{ margin: 16px 0 0; text-align: center; }