/* ===========================================================================
   Service-detail page system — first used by /services/performance-marketing/.
   Ported from the final approved design "Tilth Service - Performance Marketing
   .dc.html" per TILTH_PERFORMANCE_MARKETING_HANDOFF.md.

   Scope: this file owns the PAGE BODY only. The shell (nav, menu, theme toggle,
   footer, clocks, wordmark) is the shared Brand v3 shell and is NOT restated
   here — the design file's shell rules were deliberately dropped during the port
   so the live Homepage/Services shell stays the single implementation.

   Tokens are scoped to .v3-service-detail rather than .v3 because this page's
   --sy, --h2 and --h3 ladders genuinely differ from the values home/services use;
   left unscoped they would either regress those live pages or be overridden by
   them. --tile/--edge/--itile/--iedge are new: brand-v3.css has no equivalent.

   Layout is CSS-first (CLAUDE.md §6b): every grid, gap and type step is a media
   query here, correct before any JS runs.
   =========================================================================== */

/* new tokens — the tactile tile treatment, theme-aware */
.v3-service-detail {
  --tile: rgba(243, 245, 241, .028);
  --edge: inset 0 1px 0 rgba(243, 245, 241, .07);
  --itile: rgba(16, 19, 16, .028);
  --iedge: inset 0 1px 0 rgba(255, 255, 255, .7);
}
html[data-theme="light"] .v3-service-detail {
  --tile: rgba(16, 19, 16, .028);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);
  --itile: rgba(243, 245, 241, .03);
  --iedge: inset 0 1px 0 rgba(243, 245, 241, .07);
}

.v3-service-detail{--tile:rgba(243,245,241,.028);--edge:inset 0 1px 0 rgba(243,245,241,.07);--itile:rgba(16,19,16,.028);--iedge:inset 0 1px 0 rgba(255,255,255,.7);--pad:18px;--sy:62px;--h1:32px;--h2:24px;--h3:19px;--body:16px;--card:15px;}
@media (min-width:480px){
  .v3-service-detail{--h1:39px;--h2:27px;}
}
@media (min-width:620px){
  .v3-service-detail{--h1:45px;--h2:31px;}
}
@media (min-width:768px){
  .v3-service-detail{--pad:32px;--sy:84px;--h1:53px;--h2:36px;--h3:19.5px;--body:16.5px;}
}
@media (min-width:1024px){
  .v3-service-detail{--pad:40px;--sy:108px;--h1:68px;--h2:44px;--h3:20px;--body:17px;}
}
@media (min-width:1280px){
  .v3-service-detail{--h1:74px;}
}
@media (min-width:1440px){
  .v3-service-detail{--pad:48px;--sy:132px;--h1:74px;--h2:48px;--h3:21px;}
}
@media (min-width:1700px){
  .v3-service-detail{--h1:84px;--h2:54px;}
  [data-hero-grid]{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:56px}
}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line2);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--line2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:var(--moss);border:0}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--moss);border:0}
input[type=range]:focus-visible{outline:2px solid var(--moss);outline-offset:6px}
[data-hero-grid]{gap:38px;margin-top:26px}
[data-prob-grid]{gap:36px;margin-top:32px}
[data-app-head]{gap:22px}
[data-faq-grid]{gap:34px}
[data-cta-grid]{gap:32px}
[data-rel]{gap:20px}
[data-deliv-grid]{column-gap:32px}
[data-proof-grid]{margin-top:40px}
[data-hero-cta],[data-cta-actions]{flex-direction:column;align-items:stretch;gap:14px}
[data-cta-actions]{align-items:flex-start}
[data-cta-h]{font-size:25px}
[data-h1]{font-size:var(--h1)}
[data-h2]{font-size:var(--h2)}
[data-h1],[data-cta-h],[data-h2]{max-width:100%}
@media (min-width:480px){
  [data-cta-h]{font-size:31px}
}
@media (min-width:620px){
  [data-cta-h]{font-size:36px}
}
@media (min-width:768px){
  [data-h1]{max-width:none}
  [data-cta-h]{max-width:620px}
  [data-h2]{max-width:580px}
}
@media (min-width:1024px){
  [data-h1],[data-cta-h]{max-width:none}
  [data-h2]{max-width:760px}
}
@media (min-width:1440px){
  [data-h2]{max-width:820px}
}
[data-prob-head]{flex-direction:column;align-items:flex-start;gap:16px}
[data-probhint]{text-align:left}
[data-legend]{flex-direction:column}
[data-cta-actions] a:first-child,[data-hero-cta] a:first-child{font-size:12.5px!important;padding:0 18px!important;white-space:normal!important;text-align:center;line-height:1.25!important}
@media (min-width:420px){
  [data-legend]{flex-direction:row;flex-wrap:wrap}
}
@media (min-width:480px){
  [data-cta-actions] a:first-child,[data-hero-cta] a:first-child{font-size:14.5px!important;padding:0 28px!important;white-space:nowrap!important;line-height:1!important}
}
@media (min-width:560px){
  [data-hero-cta]{flex-direction:row;align-items:center;gap:26px}
}
@media (min-width:620px){
  [data-deliv-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px){
  [data-cta-actions]{flex-direction:row;align-items:center;gap:26px}
}
@media (min-width:700px){
  [data-cap-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  [data-hero-grid]{margin-top:34px}
  [data-prob-grid]{margin-top:42px}
  [data-proof-grid]{margin-top:52px}
  [data-cta-h]{font-size:42px}
}
@media (min-width:1024px){
  [data-cta-h]{font-size:46px}
}
@media (min-width:900px){
  [data-proof-grid]{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
}
@media (min-width:1024px){
  [data-rel]{grid-template-columns:220px minmax(0,1fr);gap:48px}
}
@media (min-width:1100px){
  [data-app-head]{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:end}
  [data-prob-head]{flex-direction:row;align-items:flex-end;gap:40px}
  [data-probhint]{text-align:right}
}
@media (min-width:1180px){
  [data-faq-grid]{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px}
}
@media (min-width:1200px){
  [data-prob-grid]{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}
  [data-cap-grid]{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-deliv-grid]{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
}
@media (min-width:1440px){
  [data-hero-grid]{grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr);gap:44px}
  [data-cta-grid]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
  [data-cta-actions]{flex-direction:column;align-items:flex-start;gap:18px}
  [data-cta-h]{font-size:52px}
  [data-prob-grid]{gap:60px}
  [data-faq-grid]{gap:64px}
}
/* ---------------------------------------------------------------------------
   INTERACTION STATES — shared by every Brand v3 service-detail page.

   These are the states the approved designs specify. In the prototypes they are
   carried as style-hover="" attributes, which are a Claude Design convention and
   inert in a browser, so they are restated here as real CSS and the attributes
   are dropped from production markup.

   Restrained by design (CLAUDE.md §7): a ~1px lift and a clearer edge. No glow,
   no scale, no card animation. The reduced-motion block at the end of this file
   already zeroes every transition, so the colour change still lands instantly
   while the movement does not.

   Nothing here is hover-only: the tiles are non-interactive containers whose
   hover is decorative, and every link and button carries the shared
   .v3 :focus-visible ring from brand-v3.css.
   --------------------------------------------------------------------------- */
.v3-service-detail { --carbon: var(--tilth-carbon, #101310); }

/* The approved markup carries each element's resting colour and padding as an
   inline style, which outranks any selector, so the changed properties are the
   one place in this file that needs !important. transform is not set inline and
   therefore does not. Verified by hovering each element, not by reading the CSS. */
.v3-service-detail [data-cap] { transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s; }
.v3-service-detail [data-cap]:hover { transform: translateY(-1px); border-color: var(--ichip) !important; }

.v3-service-detail [data-connk]:hover,
.v3-service-detail [data-connk]:focus-visible { color: var(--fg) !important; padding-left: 6px !important; }

.v3-service-detail [data-herocta]:hover,
.v3-service-detail [data-herocta]:focus-visible {
  background: var(--clay) !important; color: var(--tilth-mineral) !important; transform: translateY(-1px);
}

.v3-service-detail [data-ctacta]:hover,
.v3-service-detail [data-ctacta]:focus-visible { background: var(--clay) !important; transform: translateY(-1px); }

.v3-service-detail [data-textcta]:hover,
.v3-service-detail [data-textcta]:focus-visible { color: var(--fg) !important; }

.v3-service-detail [data-ctatext]:hover,
.v3-service-detail [data-ctatext]:focus-visible { color: var(--carbon) !important; }

/* brand-v3.css sets a moss focus ring globally. Inside an inverted section the
   panel is mineral in dark theme, where moss on mineral is hard to see, so the
   ring switches to the inverted foreground. */
.v3-service-detail #approach :focus-visible,
.v3-service-detail #faq :focus-visible { outline-color: var(--ifg); }

@keyframes gRise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes gFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}