/*
 * Verbatim port of the approved static-site source's site.css -- same
 * selectors, same values, same breakpoints. This is what makes grids,
 * hover effects, the marquee/ticker animations, and the fluid type-scale
 * breakpoints match the original exactly rather than approximating them.
 */

.stat-grid, .card-grid, .pillar-grid { display: grid; gap: 24px; }

.ph { background: var(--surface-soft); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0.5; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.service-tile { display: block; transition: transform .18s ease, box-shadow .18s ease; }
.service-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); opacity: 1; }
.service-tile:hover > div { background: var(--canvas); }

.nav-links a { transition: background .15s ease, transform .15s ease; }
.nav-links a:hover { background: var(--hairline-soft) !important; transform: translateY(-1px); }

@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; animation: marquee-scroll 32s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
.ticker-track { display: flex; align-items: center; animation: marquee-scroll 26s linear infinite; width: max-content; white-space: nowrap; }

.masonry-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; }
.masonry-item .overlay { position: absolute; inset: 0; background: rgba(1,1,1,0); display: flex; align-items: flex-end; padding: 18px; opacity: 0; transition: opacity .2s ease, background .2s ease; pointer-events: none; }
.masonry-item:hover .overlay { opacity: 1; background: rgba(1,1,1,0.45); pointer-events: auto; }
.masonry-item .expand-chip { position: absolute; top: 14px; right: 14px; background: var(--canvas); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); opacity: 0; transition: opacity .2s ease; }
.masonry-item:hover .expand-chip { opacity: 1; }

.spin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hairline); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pilltabs-compact button { font-size: 16px !important; padding: 7px 16px !important; }
.promo-black-btn button { background: var(--ink) !important; color: var(--on-primary) !important; }

@media (max-width: 768px) { .card-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr !important; } }

@media (max-width: 1024px) {
	.nav-links, .nav-ctas { display: none !important; }
	.nav-toggle { display: flex !important; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
	.two-col { grid-template-columns: 1fr !important; }
	.stat-grid { grid-template-columns: repeat(2,1fr) !important; }
	.footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
	.footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
	.card-grid, .pillar-grid { grid-template-columns: 1fr !important; }
}

html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 1600px) { :root { --space-section: 88px; } }
@media (max-width: 1440px) { :root { --display-xl-size: 74px; --display-lg-size: 58px; } }
@media (max-width: 1366px) { :root { --display-xl-size: 70px; --display-lg-size: 56px; } }
@media (max-width: 1024px) {
	:root { --space-section: 72px; --space-xl: 24px; --display-xl-size: 58px; --display-lg-size: 48px; --headline-size: 24px; --subhead-size: 24px; --body-lg-size: 19px; }
	.pillar-grid, .card-grid, .service-grid { grid-template-columns: repeat(2,1fr) !important; }
	.stat-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
	:root { --space-section: 56px; --space-xl: 20px; --space-xxl: 32px; --display-xl-size: 44px; --display-xl-ls: -0.6px; --display-lg-size: 36px; --display-lg-ls: -0.4px; --headline-size: 22px; --subhead-size: 19px; --body-lg-size: 18px; --body-size: 16px; --eyebrow-size: 14px; }
	.pillar-grid, .card-grid, .service-grid { grid-template-columns: 1fr !important; }
	.masonry-item .expand-chip { opacity: 1; }
	.masonry-item .overlay { opacity: 1; background: rgba(1,1,1,0.35); }
}
/* .stat-grid deliberately has no narrower (e.g. max-width:480px)
   override: verified directly against the canonical Claude Design mobile
   preview that stats stay a 2-column grid at phone widths, not 1 column.
   (An earlier pass here "fixed" a cascade-order issue -- a stray 1fr rule
   for .stat-grid was being silently overridden by the max-width:1024px
   block above, since every rule in this section uses !important and the
   later one wins regardless of breakpoint width -- on the assumption that
   1-column was the intended result. Direct visual comparison against the
   reference showed the opposite: 2-column at phone width is the actual,
   correct target, so that stray rule was removed rather than fixed.) */
@media (max-width: 430px) {
	:root { --space-section: 48px; --space-xl: 16px; --space-lg: 18px; --display-xl-size: 36px; --display-lg-size: 30px; --headline-size: 20px; --body-lg-size: 17px; --body-size: 15.5px; --body-sm-size: 14.5px; }
	button, .pill-btn { min-height: 44px; }
}
@media (max-width: 375px) {
	:root { --display-xl-size: 32px; --display-lg-size: 27px; --headline-size: 19px; }
}
@media (max-width: 320px) {
	:root { --display-xl-size: 28px; --display-lg-size: 24px; --space-xl: 14px; }
}

input, select, textarea { font-size: 16px !important; }
.pilltabs-compact { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pilltabs-compact::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .pilltabs-compact { display: flex !important; } }

@media (max-width: 480px) {
	.lightbox-arrow-left { left: 8px !important; }
	.lightbox-arrow-right { right: 8px !important; }
	.lightbox-arrow { width: 36px !important; height: 36px !important; }
}

/* Not part of the verbatim port above: CSS grid items default to
   min-width:auto, so a wide child (e.g. the contact form's Budget-range
   select) can force a .two-col grid item past its own track width and
   cause horizontal page scroll on narrow phones -- confirmed by direct
   measurement on the Contact page at 390px. min-width:0 is a no-op at
   every width where no overflow would happen, so it never changes how
   any page looks; it only removes an unwanted scrollbar at phone widths. */
.two-col > * { min-width: 0; }