/* Skandage website v2: phone layout (767px and below). Loaded after site.css with media="(max-width: 767px)".
   Phone fixes go here only; site.css keeps desktop and tablet (768px and up). */
.ask input { min-height: 44px; }
.snav .dots button::after, .switch::before { content: ""; position: absolute; inset: -12px -2px; }   /* round 38: -2px so neighbouring dots' tap areas (4px apart) no longer overlap */
@media (max-width: 560px) { .acts .btn { display: none; } .logo img { height: 29px; } .logo.sub img { height: 24px; } }
@media (max-width: 760px) { .sheet { border-radius: 24px 24px 0 0; margin-top: -24px; } main > :last-child { border-radius: 0 0 24px 24px; } }
@media (max-width: 640px) { .hero { min-height: 0; grid-template-rows: auto auto auto; padding-top: 112px; } .hero .low { padding-top: 32px; } .hero h1 { font-size: 8.4vw; } .hero h1 span { white-space: nowrap; } }
@media (max-width: 640px) { .cs-card { height: 420px; } .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } .week > div:nth-child(1), .week > div:nth-child(5) { display: none; } }
@media (max-width: 640px) { .pcard { min-height: 0; grid-template-rows: auto 190px auto auto auto; } .pcard .obj { width: 84%; margin-right: -30px; } }
/* Round 38: feature cards ("What you get" and the like) are one sideways row you swipe through, not a long column. Dots come from site.js. */
.bento { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); margin: 0 calc(var(--m) * -1); padding: 4px var(--m) 10px; scrollbar-width: none; }
.bento::-webkit-scrollbar { display: none; }
.bento > .fx, .bento > .fx.w3, .bento > .fx.w4 { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
.js [data-fx~="fade"] .bento .rv { opacity: 1; transform: none; }   /* off-screen cards in the row never cross the viewport, so they can't wait for the reveal */
.bento-nav { justify-content: center; margin-top: 14px; }
.iso-stage { touch-action: pan-y; }
@media (max-width: 640px) { .answer .ba { grid-template-columns: 1fr; } .cf { font-size: 12px; padding: 8px 10px 8px 8px; } .cf i { width: 26px; height: 26px; } .ask .field { padding: 6px 6px 6px 16px; border-radius: 18px; } .ask .go { min-height: 46px; padding: 0 14px; } .ask .go span { display: none; } }
@media (max-width: 640px) { .steps .st span.l { display: none; } .steps .st[aria-current="step"] span.l { display: inline; } }
@media (max-width: 640px) { .stagger { height: 480px; } .tcard { padding: 22px; } .tcard q, .tcard .big { font-size: 15px; } .tcard .by { left: 22px; right: 22px; bottom: 18px; font-size: 13px; } }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .next { grid-template-columns: minmax(0, 1fr); } .next-gap { display: none; } }
@media (max-width: 767px) { .pairs-suite { flex-direction: column; align-items: stretch; padding: 24px 20px; } .pairs-suite p { flex: 0 0 auto; font-size: 18px; } .pairs-suite .btn { width: 100%; } .pairs .next a { min-height: 0; padding: 24px 20px; } .pflow .ps { font-size: 16px; } }
@media (max-width: 640px) { .pbook .pb-body { grid-template-columns: 1fr; } .pbook nav { grid-auto-flow: column; overflow-x: auto; } .pbook nav span { white-space: nowrap; } .pbook .pb-tiles { grid-template-columns: 1fr 1fr; } .pbook .pb-tiles div:last-child { display: none; } }
@media (max-width: 720px) {
  .strip { grid-template-columns: 1fr; gap: 26px; }
  .strip::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .strip li { grid-template-columns: 44px 1fr; column-gap: 16px; padding-right: 0; }
  .strip .n { grid-row: 1 / span 2; margin-bottom: 0; }
}
@media (max-width: 640px) { .cmp-track { grid-auto-columns: minmax(262px, 82vw); } }
@media (max-width: 560px) { .acts .btn { display: none; } }
@media (max-width: 600px) { .fwd { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .skills, .both .skills { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pdpa-note, .chkbox, .ck-ig2, .ck-fb, .chk-about label, .note-sm, .cs-cap, .tier-short, .fs-brand p, .over, .tcard .by, .ct-cap, .tcard q, .tcard .big { font-size: 16px; }
  .hp-copy .hp-lede { white-space: normal; font-size: 16px; text-wrap: balance; }
  .crumbs ol { padding-top: 6px; }
  .crumbs a { position: relative; padding: 0; }
  .crumbs a::after { content: ""; position: absolute; inset: -12px -6px; }
  .cs-title .over { font-size: 16px; }
  .fs .tags { padding-bottom: 64px; font-size: 16px; }
  .fs .tags a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .ck-promo .ck-ig, .hp-tapnote, .ind .hrs, .ind .hrs b, .ind .ph .cap { font-size: 16px; }
  .hp-tapnote { min-height: 24px; }
  .mn-free small { font-size: 16px; }
  .crumbs ol { flex-wrap: nowrap; }
  .crumbs li { flex: none; }
  .crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
  .crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .steps .st { min-height: 44px; padding: 8px 6px; }
  .ask .ex button { min-height: 44px; }
  .bh h1.h2 { font-size: clamp(30px, 8.5vw, 40px); }
}
/* Round 21: home "Can I automate?" on phones. The floating task cards are decoration (the chips and the answer carry the content), so the art box is hidden. */
.ask-art { display: none; }
.answer { min-width: 0; }
.answer .ba { grid-template-columns: minmax(0, 1fr); }
.tcard { max-width: 100%; overflow: hidden; }
/* Round 22: breadcrumbs take their own row (about 28px) with 12px clear above the first heading. */
.lap-pin { padding-top: calc(var(--hdr) + 40px); }
.cs-title { padding-top: 12px; }
.lap { height: 190svh; }
/* Round 22: Social roles stack, smaller info card so piles, card and Prev / Next share one screen (slab sizes are set in fit() in site.js) */
.iso-info { padding: 16px 18px; gap: 8px; }
.iso-info h3 { font-size: 26px; }
.iso-info p { font-size: 16px; }
.iso-info .prompt { font-size: 20px; }
/* Round 22: Suite "Mixes that work well" (and any .tbl): each row becomes a stacked card, so no column is cut off */
.tbl-wrap { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
.tbl, .tbl tbody, .tbl tr, .tbl td { display: block; min-width: 0; width: auto; }
.tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tbl tr { margin-bottom: 12px; padding: 18px 18px 16px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.tbl td { padding: 0; border: 0; }
.tbl td + td { border-left: 0; margin-top: 10px; }
.tbl td:first-child { width: auto; font-size: 20px; }
.tbl td:last-child::before { content: "What it does for you"; display: block; margin-bottom: 2px; font: 600 14px/1.3 var(--body); color: var(--slate); }
/* Round 22: the Social hero frame hugs the landscape screenshot on phones (no empty bands above and below) */
.cs-card { height: auto; }
.cs-screen.shot { height: auto; }
.cs-screen.shot img { width: 100%; height: auto; }
/* Round 23: case study graphic first on phones; the phone menu text stays at 16px */
.case-vis { order: -1; }
.case-tabs { gap: 6px; }
.case-tabs button { padding: 0 12px; font-size: 15px; }
.mnav .dd-i small { font-size: 16px; }
.mn-ask { font-size: 16px; }
.case-tabs .lg { display: none; } .case-tabs .sh { display: inline; }
.case-tabs { flex-wrap: nowrap; }
.case-card { padding: 16px 14px 18px; }
.case-tabs button { flex: 1 1 auto; padding: 0 8px; }
/* Round 24: the case study flow chart stacks on phones (no bars or stubs, just the lines into and out of each group) */
.fb { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fb.t::before, .fb.b::after, .fb.t > .fn::before, .fb.b > .fn::after { display: none; }
.fn { padding: 14px; }
.chips i { font-size: 16px; }
.fn > span:not(.fi):not(.chips) { font-size: 16px; }
/* Round 24: Our work on phones. Cards are one column; screenshots stack. */
.wk-filter { gap: 8px; }
.wk-filter button { padding: 0 14px; }
.fa-shots { grid-template-columns: minmax(0, 1fr); }
.fa-shots .wkphone { max-width: 240px; }
.map-vid { order: -1; }
.case-link .row { width: 100%; }
.wk-tags li, .wk-p b, .wk-r b, .map-vid figcaption, .wkshot figcaption { font-size: 16px; }

/* Round 25: EBS mailer flow stacks on phones; arrows point down. */
.ebs-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.ef-n:not(:last-child)::after { display: block; top: auto; bottom: -22px; right: auto; left: 34px; margin: 0; transform: rotate(135deg); }
.ebs-draft { font-size: 16px; }
.imp-s, .imp-note { font-size: 16px; }
.pr-cap { font-size: 16px; }

/* Round 25 review fixes (phones) */
.wk-grid { grid-template-columns: minmax(0, 1fr); }
.foot .fa a { min-height: 44px; font-size: 16px; display: inline-flex; align-items: center; }
.foot .fa h3, .foot .fa h2 { font-size: 16px; }
.crumbs ol, .crumbs a, .crumbs [aria-current] { font-size: 16px; }
/* Round 32: one breadcrumb row height at every phone width (601 to 767 used the desktop 14px of padding, so headings tuned for the 6px row sat under it). */
.crumbs ol { padding-top: 6px; }
.crumbs a { position: relative; padding: 0; }
.crumbs a::after { content: ""; position: absolute; inset: -12px -6px; }
.ct-grid label, .ct-grid .rad, .ct-grid .rad span, .cform label, .cform legend { font-size: 16px; }
.wk-filter button, .ask .ex button, .ptag, .btag, .answer .ba div, .answer .ba strong { font-size: 16px; }
.plx { height: 150svh; }
/* Round 38: phones get the desktop version, the word pinned on screen while the three words take turns (a shorter runway than desktop).
   svh keeps the pinned height steady while Safari's toolbar shows and hides. */
@media (prefers-reduced-motion: no-preference) { .wordband { height: 170svh; margin: calc(var(--gap) * -1) 0 24px; } }
.wb-in span { font-size: clamp(44px, 14vw, 60px); }
.totop { width: 44px; height: 44px; }
.totop.show { opacity: .92; }   /* round 38: only once shown; a bare opacity here kept the hidden button visible at the top of every page */
.crumbs li:nth-last-child(n+3) { display: none; }
.crumbs li:nth-last-child(2):not(:first-child)::before { content: none; }
.pr-toc a, .wk-filter button, .wk-p b, .wk-r b, .ef-n > span:not(.ef-i) { font-size: 16px; }
.skip { top: -120px; }


/* Round 26: background graphics on phones: at least one per section, smaller, still, no motion. */
.bgx .opt { display: none; }
.bgx svg { animation: none !important; }
.bgx-ink .bg-a { width: 260px; left: -70px; bottom: -40px; opacity: .15; }
.bgx-light .bg-a { width: 240px; right: -70px; top: -30px; opacity: .3; }
.bgx-strip .bg-a { width: 220px; right: -60px; bottom: -30px; opacity: .3; }
.sx-n { font-size: clamp(34px, 14cqw, 56px); } .sx-hours .sx-n, .sx-leads .sx-n { font-size: clamp(34px, 18cqw, 56px); }
.bgx-sub .bg-a { width: 180px; right: -50px; top: -20px; opacity: .26; }

/* Round 26c: phones. Background graphics: only the clean ones; the leave-tracker page is tidier (one tab at a time, compact flow and stats). */
.bgx-ink, .bgx-strip { display: none; }
.bgx-light .bg-a { width: 150px; right: -26px; top: 14px; opacity: .3; }
.js .case-panels { display: block; }
.js .case-panels > .case-g { display: none; opacity: 1; visibility: visible; transition: none; }
.js .case-panels > .case-g.on { display: block; }
.case-stats { gap: 10px; }
.case-stats > div { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 14px 18px; }
.case-stats b { font-size: 32px; white-space: nowrap; }
.case-stats span { font-size: 16px; }
.flow { margin-top: 28px; }
.flow-h { margin-bottom: 18px; }
.fn { padding: 12px 14px; gap: 2px 12px; grid-template-columns: 36px minmax(0, 1fr); }
.fn .fi { width: 36px; height: 36px; }
.fn b { font-size: 17px; }
.fb { gap: 8px; }

/* Round 27: hero shapes on phones, two or three small ones per family, clear of the word, chips and buttons. */
/* Round 34: the hero shapes sit in the side gutters, behind the text, and never over the wordmark or the buttons (they were fixed percentages of a hero whose height changes). */
.hp-art { z-index: 0; }
.hp-stage, .hp-copy { z-index: 2; }
/* Round 38: all four shapes show on phones, two in a band above the wordmark and two either side of the scroll cue (placePhoneShapes() in site.js).
   The band comes from the hero's top padding; the "tap again" note floats under the chips instead of taking a row, which pays for it. */
.hs .sh { width: clamp(52px, 15vw, 66px); }
.hs .sh { visibility: hidden; } .hs-join { display: none; }
.hp { padding-top: calc(var(--hdr) + 84px); }
.hp-stage { padding-bottom: 0; }
.hp-tapnote { position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; }
.hp-copy { margin-top: 44px; }
@media (orientation: landscape) and (max-height: 520px) { .hs .sh { display: none; } }
/* Round 27: the Ask field stays at least 52px tall on phones. */
.ask .field { min-height: 60px; }
.ask .own { margin-top: 18px; }

/* Round 27: floating WhatsApp button, phones only. Single colour glyph (Off White on Ink). Back-to-top sits 12px above it. */
.wafab { display: grid; place-items: center; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--off); box-shadow: 0 8px 20px rgba(14, 42, 51, .28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease); }
.wafab[hidden] { display: none; }
.wafab.show { opacity: 1; transform: none; pointer-events: auto; }
.wafab svg { width: 30px; height: 30px; }
.wafab:active { transform: scale(.95); }
/* Round 38: back-to-top sits beside the WhatsApp button, not above it, so the pair covers a 56px strip instead of a 130px column.
   A light ring keeps the WhatsApp button visible over the Ink footer, and the footer ends with room for the pair. */
.totop { bottom: calc(16px + 6px + env(safe-area-inset-bottom, 0px)); right: calc(max(16px, env(safe-area-inset-right, 0px)) + 56px + 12px); }
.wafab { box-shadow: 0 0 0 1.5px rgba(245, 245, 245, .4), 0 8px 20px rgba(14, 42, 51, .28); }
.fs-bleed { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.menu-open .wafab, .menu-open .totop, .kb-up .wafab, .kb-up .totop { display: none; }
@media (prefers-reduced-motion: reduce) { .wafab { transition: none; } }
/* Round 27: timeline on phones: one column, the line on the left edge, the label above each block, no sticky labels. */
.tl { --lab: 0px; }
.tl-line { left: 11px; top: 10px; }
.tl-step { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "dot lab" "dot body"; column-gap: 16px; row-gap: 10px; padding-bottom: 40px; }
.tl-lab { grid-area: lab; position: static; text-align: left; padding: 0; }
.tl-lab h2 { font-size: 26px; }
.tl-dot { grid-area: dot; position: relative; top: auto; width: 24px; height: 24px; margin-top: 2px; }
.tl-body { grid-area: body; }
.tl-body .fa-points, .tl-body .fa-shots { grid-template-columns: minmax(0, 1fr); }
/* Round 28 D: the free business check on phones. The result is a bottom sheet that opens from a "See my result" bar. */
.chk-head { margin-bottom: 24px; }
.chk-g { padding: 24px 16px 16px; }
.chk-gh h2 { font-size: 24px; }
.chk-card { padding: 14px 14px; gap: 12px; grid-template-columns: 28px minmax(0, 1fr); }
.chk-tx b { font-size: 17px; }
.chk-fq { padding-left: 0; }
.chk-res { position: fixed; inset: auto 0 0 0; z-index: 70; max-height: 86svh; margin: 0; border-radius: 28px 28px 0 0; padding: 20px 20px 28px; transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; box-shadow: 0 -12px 40px rgba(14, 42, 51, .2); }
.chk-res.open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.chk-grab { display: block; justify-self: center; width: 64px; height: 24px; margin-top: -8px; border: 0; background: none; cursor: pointer; position: relative; }
.chk-grab::before { content: ""; position: absolute; left: 12px; right: 12px; top: 10px; height: 4px; border-radius: 999px; background: var(--silver); }
.chk-grab[hidden] { display: none; }
.chk-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; min-height: 52px; border: 0; border-radius: 999px; background: var(--harbour); color: var(--off); font: 600 16px/1 var(--body); box-shadow: 0 10px 28px rgba(14, 42, 51, .3); display: block; }
.chk-bar[hidden] { display: none; }
.chk-bar:active { transform: scale(.97); }
body.chk-open { overflow: hidden; }
.ck-promo { flex-direction: column; align-items: flex-start; }
.ck-promo.band img { width: 96px; }
.ck-promo .btn { width: 100%; white-space: normal; }
.chk { padding-top: 124px; padding-bottom: 96px; }   /* round 32: clears the header and the breadcrumb row by 12px or more (was 72px, so the eyebrow sat on the breadcrumb) */

/* Round 28 follow-up: "Things we've built" bar on phones */
.wkc { padding: 24px 20px; gap: 16px; }
.wkc-s .btn { width: 100%; }
.wkc-bar { justify-content: center; }
.wkc-bar .more { width: 100%; justify-content: center; }

/* Round 30: the returning-visitor link meets the 16px and 44px phone minimums. */

.cta-value { font-size: 16px; }
.fs-big { margin-bottom: 32px; }

/* ---------- Round 34 ---------- */
/* Four hero buttons: same width and height, stacked, 12px apart. */
/* Round 38: Social roles use the desktop layer stack on phones too. The slabs are too small for readable tilted text, so their labels are
   hidden here; the flat card under the piles names each role as it is dealt. (Reduced motion still gets the plain list, .iso.plain.) */
.slab .top .t { display: none; }
.iso-list li { padding: 20px; border-radius: var(--tile); background: var(--soft); min-width: 0; }
.iso-list h3 { font-size: 22px; overflow-wrap: anywhere; }
/* Phone menu: hairlines between groups, and the free audit as a filled Harbour pill with its tag on the same line. */
.mn-scroll > * + * { border-top: 1px solid var(--silver); }
.mn-scroll > a.mn-free { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; border-top: 0; margin-bottom: 8px; padding: 12px 18px; min-height: 48px; border-radius: 999px; background: var(--harbour); color: var(--off); font-weight: 600; box-sizing: border-box; }
.mn-scroll > a.mn-free + * { border-top: 0; }
.mn-free small { margin-left: auto; white-space: nowrap; color: var(--off); opacity: .9; font-size: 16px; }
@media (max-width: 340px) { .mn-free small { flex-basis: 100%; margin-left: 0; } }
.mn-free small { background: transparent !important; padding: 0 !important; border-radius: 0 !important; color: var(--off) !important; }

.chk.chk-hero { padding-bottom: 28px; }
.chk.chk-app { padding-top: 40px; }
.chk-jump { gap: 0 10px; }

.ck-promo.band .ck-go { width: 100%; } .ck-promo.band .ck-go .btn { width: 100%; }
.strip-more .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 10px; line-height: 1.25; }

/* Round 37: the home audit band on phones: the code-drawn graphic fills the top of the band, edge to edge. */
.ck-promo.band { padding-top: 0; overflow: hidden; }
.ck-promo.band .ck-art { display: block; width: calc(100% + 2 * clamp(24px, 4vw, 64px)); max-width: none; margin: 0 calc(-1 * clamp(24px, 4vw, 64px)) 8px; height: auto; }

/* Round 38: on the narrowest phones the long sub-brand logos (e.g. "skandage solutions.") shrink to fit instead of pushing the menu button off-screen. */
.hdr .bar > .logo { flex: 0 1 auto; min-width: 0; padding-block: 10px; }   /* padding: a 44px-tall tap target */
.hdr .bar > .logo img { max-width: 100%; }   /* object-fit: contain (site.css) keeps the proportions */