/* services.css — H5b: home Services accordion (src/_includes/sections/services.njk, js/accordion.js).
   The markup is Framer's lifted accordion (lifted/home--services.html). Framer switched a row between
   its "Selected" and "Closed" variants by re-rendering inline styles; those per-state inline values now
   live here, keyed on [data-state], and accordion.js swaps the variant classes (framer-v-*) that
   framer.css already styles (padding, number-column width, panel layout per breakpoint).

   Timing = the live accordion. On live every channel — row height, background opacity, padding /
   indent, number column, +/− icon rotation — runs on ONE Framer spring (1.5 % overshoot, peak
   ~245 ms after the first change, settled <0.1 % by ~375 ms; H0 tools/verify/captured/motion/
   accordion/summary.json reports it as 367 ms height/rotation and 188 ms background/padding: the
   background clamps at 0/1 and the 24 px indent's 0.36 px overshoot tail falls under its change
   threshold). accordion.js fits that spring (ω0 0.0227 rad/ms, ζ 0.80) into a CSS linear() easing
   over 400 ms and publishes it as --hwg-acc-ease / --hwg-acc-dur on .hwg-acc; the fallbacks below
   only apply before it runs or in browsers without linear(). As on live, the layout (padding,
   number column, title wrap, panel) switches at once: the row height is animated, the header parts
   slide from their old positions (transforms, accordion.js), and the panel is not animated — the
   growing row (overflow:hidden) uncovers it in place. Measurements: docs/reports/H5b.md. */

.hwg-acc {
  --hwg-acc-ease: cubic-bezier(0.36, 0.4, 0.08, 1.18);
  --hwg-acc-dur: 400ms;
}

/* ---- row: closed look (Framer "… - Closed" inline style) ------------------------------------ */
.hwg-acc-row {
  --border-style: dotted;
  --border-color: var(--token-2f25ab63-251e-4c8a-a43c-96b3d2cd687b, rgb(179, 179, 179));
  --border-bottom-width: 1px;
  border-radius: 0;
}
.hwg-acc-row > .framer-1fwqvba { opacity: 0; }
/* Padding and number-column width switch at once (layout); accordion.js slides the header parts
   from their old positions with transforms (FLIP), during which the two clipping header frames
   let them overflow. */
.hwg-acc-row.hwg-acc-flip .framer-yk4z0t,
.hwg-acc-row.hwg-acc-flip .framer-1bejaqw { overflow: visible; }

/* ---- row: open look (Framer "… - Selected" inline style) ------------------------------------ */
.hwg-acc-row[data-state="open"] {
  --border-style: solid;
  --border-color: rgba(0, 0, 0, 0);
  --border-bottom-width: 0px;
  border-radius: 12px;
}
.hwg-acc-row[data-state="open"] > .framer-1fwqvba { opacity: 1; }

/* ---- plus / minus icon: variant framer-v-zmqu9t = plus, framer-v-ztvwwi = minus ------------- */
.hwg-acc-row .framer-hImdy .framer-j148cr { transform: none; }
.hwg-acc-row .framer-hImdy.framer-v-ztvwwi .framer-j148cr { transform: rotate(90deg); }

/* ---- transitions: only where accordion.js drives the rows (html.hwg-acc-js). Without JS nothing
   toggles, so nothing may animate — not even a first style resolution before this sheet applies. */
.hwg-acc-js .hwg-acc-row { transition: border-radius var(--hwg-acc-dur) var(--hwg-acc-ease); }
.hwg-acc-js .hwg-acc-row > .framer-1fwqvba { transition: opacity var(--hwg-acc-dur) var(--hwg-acc-ease); }
.hwg-acc-js .hwg-acc-row .framer-hImdy .framer-j148cr { transition: transform var(--hwg-acc-dur) var(--hwg-acc-ease); }
.hwg-acc-js .hwg-acc-row .framer-hImdy .framer-1cy1vjl {
  transition: width var(--hwg-acc-dur) var(--hwg-acc-ease), left var(--hwg-acc-dur) var(--hwg-acc-ease);
}

/* ---- the toggle: one <button> per row, laid over the whole title line --------------------------
   It sits inside the <h3> (heading → button pattern) and is named by the visible title text
   (aria-labelledby; the visible <span> is aria-hidden so the heading's name is the title once).
   The title's own wrappers are made static so the button's containing block is the Title Stack
   (position:relative in framer.css): the hit area is the full row header — number, title and
   icon — never smaller than the 45–67 px icon. */
.hwg-acc-row .framer-1dsu734,
.hwg-acc-row .framer-1pfaj5d { position: static; }
.hwg-acc-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hwg-acc-btn:focus { outline: none; }
/* Focus ring: drawn by the row, 2 px OUTSIDE its box (the row and the Title Stack clip, and a closed
   row's content starts at its left edge, so any ring inside them would sit on the "[" of "[NN]").
   It follows the row's radius (0 closed, 12 px open). */
.hwg-acc-row:has(.hwg-acc-btn:focus-visible) {
  outline: 2px solid var(--hwg-black, #000);
  outline-offset: 2px;
}
@supports not selector(:has(*)) {
  .hwg-acc-btn:focus-visible { outline: 2px solid var(--hwg-black, #000); outline-offset: -2px; }
}
.hwg-acc-row { cursor: pointer; }
.hwg-acc-panel { cursor: auto; }

/* Pill links (panel CTA + closing "Let’s talk!"): monochrome ring instead of the browser's blue.
   Their frames (.framer-fcqpcs panel, .framer-wjrjwn closing grid) had overflow:hidden, which would
   cut the ring; neither needs it (no layout change — both are flex:none, height min-content). */
.hwg-acc-row .hwg-acc-panel,
.framer-FaVEM .framer-wjrjwn { overflow: visible; }
.hwg-acc-panel a:focus { outline: none; }
.framer-FaVEM .framer-wjrjwn a:focus { outline: none; }
.hwg-acc-panel a:focus-visible,
.framer-FaVEM .framer-wjrjwn a:focus-visible {
  outline: 2px solid var(--hwg-black, #000);
  outline-offset: 2px;
}

/* ---- expanded panel: left = summary, right = sub-services + CTA -----------------------------
   The sub-service list takes the template's tools block slot (framer-2if7tl: column, 24 px gap)
   and its grid (framer-1ch7kke: 2 columns desktop, one column tablet/phone) and item frame
   (framer-1xm4oas) with the tools' text preset (1c6i783). Tool icons and the tools label are
   gone (R7). */
.hwg-acc-subs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hwg-acc-row .hwg-acc-subs > .framer-1xm4oas {
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
}
.hwg-acc-subs .framer-text {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Panel CTA pill (new, R7). The template pill is one line (label white-space:pre, fixed 48 px);
   service CTA labels are up to ~226 px, so below ~400 px wide the label must wrap INSIDE the pill:
   the pill is as wide as its one-line label but never wider than the column, grows in height, and
   keeps its 24 px side padding. At 1440 / 768 it is unchanged (one line, 48 px). */
.framer-FaVEM .hwg-acc-cta { height: auto; max-width: 100%; }
.hwg-acc-cta .framer-EYLHz.framer-hfwbwm {
  width: max-content;
  max-width: 100%;
  height: auto;
  min-height: 48px;
  padding: 11px 24px;
}
.hwg-acc-cta .framer-EYLHz .framer-1j4f0is,
.hwg-acc-cta .framer-EYLHz .framer-1oaobln {
  --framer-text-alignment: center;
  white-space: normal;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}
/* the hover twin is split into inline-block letters (reveal.js), which drops kerning and makes it
   ~1 px wider than the label; 8 px of slack keeps it on one line whenever the label is */
.hwg-acc-cta .framer-EYLHz .framer-1oaobln { max-width: calc(100% - 40px); }
.hwg-acc-cta .framer-EYLHz p.framer-text { --framer-text-alignment: center; text-align: center; }
/* a wrapped label splits into even lines ("See what we build / on Shopify Plus"), not a lone last word */
.hwg-acc-cta .framer-1j4f0is p,
.hwg-acc-cta .framer-1oaobln p { text-wrap: balance; }

/* Rows still in their "Closed" variant need the "Selected" panel layout whenever their panel shows
   (no JS): tablet framer-v-1rne6yj ← framer-v-1ool9jg, phone framer-v-ow33el ← framer-v-i5tlwh. */
.framer-xTyJN.framer-v-1rne6yj .framer-1ch7kke,
.framer-xTyJN.framer-v-ow33el .framer-1ch7kke {
  flex-flow: column;
  place-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.framer-xTyJN.framer-v-ow33el .framer-fcqpcs {
  flex-flow: column;
  align-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 0 0 0 48px;
  display: flex;
}
.framer-xTyJN.framer-v-ow33el .framer-3u5s84 { align-self: unset; padding: 0; }
.framer-xTyJN.framer-v-ow33el .framer-2if7tl { align-self: unset; }

/* ---- intro line: never clip descenders ------------------------------------------------------
   The intro paragraph is bottom-aligned (align-items:flex-end) in a 1em line box inside the
   template's overflow:hidden "Subheadline Content" frame; in Outfit (D17) the last line's
   descenders ("p" in "proud", "g") paint below that frame and were cut by 2–5 px at 1440/768
   (pixel diff with overflow on/off: 113 / 33 px). Letting the frame overflow changes no layout. */
.framer-FaVEM .framer-2oei0s { overflow: visible; }

/* ---- with JS: html.hwg-acc-js (set inline by services.njk before the markup; removed again at
   DOMContentLoaded if accordion.js never set html.hwg-acc-ready) ------------------------------ */
.hwg-acc-js .hwg-acc-row[data-state="closed"] > .hwg-acc-panel { display: none; }

/* ---- without JS: every row is an expanded row --------------------------------------------------
   All panels show, so every row takes the "Selected" look and geometry (framer.css gives the Closed
   variants 24/0/36 px padding and a 120 px number column at desktop/tablet; Selected = 24/24/48 px
   and 96 px, phone 48 px in both), and there is no toggle: no buttons, no +/− icon (its space is
   kept so titles wrap exactly as in the JS layout). */
html:not(.hwg-acc-js) .hwg-acc-btn { display: none; }
html:not(.hwg-acc-js) .hwg-acc-row {
  cursor: auto;
  --border-style: solid;
  --border-color: rgba(0, 0, 0, 0);
  --border-bottom-width: 0px;
  border-radius: 12px;
}
html:not(.hwg-acc-js) .hwg-acc-row > .framer-1fwqvba { opacity: 1; }
html:not(.hwg-acc-js) .framer-xTyJN.framer-v-1730omn.framer-1rb6rpk,
html:not(.hwg-acc-js) .framer-xTyJN.framer-v-1rne6yj.framer-1rb6rpk,
html:not(.hwg-acc-js) .framer-xTyJN.framer-v-ow33el.framer-1rb6rpk { padding: 24px 24px 48px; }
html:not(.hwg-acc-js) .framer-xTyJN.framer-v-1730omn .framer-193o3av-container,
html:not(.hwg-acc-js) .framer-xTyJN.framer-v-1rne6yj .framer-193o3av-container { width: 96px; }
html:not(.hwg-acc-js) .hwg-acc-row .framer-qih467-container { visibility: hidden; }

/* ---- service titles below 390 px: never split a word ------------------------------------------
   The phone rows keep the template's 32 px title preset (1.4em line height, −0.04em tracking) and
   its word-break:break-word. In Bingo Dilan (D31, wider than the template's Outfit) the longest
   title words — "Development", "Optimization)" — are 5.96 em wide in place (190.7 px at 32 px),
   and an open row's title column is only 100vw − 197 px wide, so below 390 px they would break
   mid-word ("Developme / nt"). Here the title shrinks with the viewport so the longest word always
   fits the open-row column (0.1659 × column: the word is ≤ 0.989 of it). It depends on the viewport / list
   width only, never on the row's state, so a title never changes size when its row toggles; at
   390 px and wider it is the template's 32 px. The list is the size container (its width = the
   viewport minus the section's 2 × 16 px padding, scrollbar excluded; open-row column = list −
   165 px); the vw line is the fallback where container units are unsupported. */
@media (max-width: 809.98px) {
  .framer-FaVEM .hwg-acc { container-type: inline-size; }
  .hwg-acc-row .framer-1pfaj5d h3.hwg-title {
    font-size: min(32px, calc((100vw - 197px) * 0.1659));
    font-size: min(32px, calc((100cqi - 165px) * 0.1659));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hwg-acc-row,
  .hwg-acc-row * { transition: none !important; }
}