/* ===========================================================================
   fw-premium.css  v3   REVIEW COPY ONLY (~/Downloads/formiworks-premium)
   ---------------------------------------------------------------------------
   Pairs with fw-premium.js, which replaces five Framer sections with hand-built
   components. This file is the design system those components use, plus a
   restyle of the sections that stay (booking, "Mita saat", video grid,
   timeline, Vaiku, lead form) so the whole page reads as one build.

   Mr P, 24.9: "our cards lack visual identity, they just sit there, stupid grey
   blocks. They don't look sharp, there is no visual contrast and the whole thing
   looks pure vibe coded." The measured cause on the live page: beige cards
   (#EDEAE5) on a beige ground (#F2EFEA), about two percent apart in lightness,
   each holding a second framed panel holding a gradient image. Grey body copy
   on top. Nothing is sharp because nothing has an edge.

   What brandiklinikka.com does instead, and what this system copies:
     1. White ground, near-black type. Contrast comes from ink and imagery,
        never from tinted boxes.
     2. Imagery carries identity. Every card leads with a picture, edge to edge,
        rounded corners, no frame around it.
     3. One construction per component, repeated exactly. Their case cards are
        image, title, two lines. Every one. That repetition IS the polish.
     4. Hairlines instead of boxes to separate things.
     5. Black circular controls, one pill button with a circular arrow badge.
     6. A giant faint logomark bleeding behind the statement section.
     7. A single light band toward the end of the page, then the footer. Ours
      is the brand cream rather than their neutral grey.

   Colour: the hero keeps its cream and pink rings untouched, as Mr P asked, and
   so does the footer. Everything between them is white. Cream top and bottom,
   white body: the two warm ends bookend the page on purpose.
   =========================================================================== */

:root{
  --px-gut:     70px;
  --px-col:     min(1300px, calc(100vw - 2 * var(--px-gut)));
  --px-rhythm:  136px;
  --px-ink:     #0B0B0C;
  --px-body:    #56565B;
  --px-muted:   #8C8C91;
  --px-line:    #E8E8E5;
  --px-surface: #F4F4F2;
  --px-band:    #F3EFE9;   /* cream, not grey: the band runs straight into the
                               cream around the footer, so the page closes on the
                               same brand ground it opens on in the hero. A grey
                               band left a strip of cream between it and the
                               footer, three light tones in a row. */
  --px-cream:   #F3EFE9;
  --px-orange:  #FF462E;
  --px-radius:  20px;
  --px-ease:    cubic-bezier(.2,.7,.2,1);
  --px-display: "Inter Display","Inter Display Placeholder","Inter",system-ui,sans-serif;
  --px-text:    "Inter","Inter Placeholder",system-ui,sans-serif;
}
@media (max-width:1023px){ :root{ --px-gut:40px; --px-rhythm:108px; } }
@media (max-width:767px){  :root{ --px-gut:20px; --px-rhythm:84px; } }

/* ==================================================================== 0
   The Framer sections that fw-premium.js replaces. They stay in the DOM as
   insertion anchors, so hide them here, in the stylesheet, which applies
   before any script runs. That way the old grey slabs never flash. */
#main section.framer-1oopm2z,
#main section.framer-1e4tvrb,
#main section.framer-igj10g,
#main section.framer-1kjaetp,
#main section.framer-d20mik{ display:none !important; }

/* The 172px decorative photos pinned in the gutters beside the fw sections
   (.fw-float) were the clearest "element that just sits there". Their photos
   now live in the statement section's composed scatter instead. */
.fw-floats, .fw-float{ display:none !important; }

/* ==================================================================== 1
   SHARED PRIMITIVES */
/* The homepage parent is a flex column with align-items:center, so a section
   without an explicit width shrinks or grows to its content. The case track
   grew to 3212px and ran off both sides of the screen, and the quote section
   shrank to 1300px and showed cream at its edges. Pin every section to the
   full width. */
.px{ width:100% !important; max-width:100vw; align-self:stretch; min-width:0; }
.px{ position:relative; background:#fff; padding:var(--px-rhythm) 0; color:var(--px-ink);
     font-family:var(--px-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.px *, .px *::before, .px *::after{ box-sizing:border-box; }
.px-wrap{ width:var(--px-col); margin:0 auto; }
.px-h2{ font-family:var(--px-display); font-weight:500; font-size:clamp(32px,3.5vw,50px);
        line-height:1.05; letter-spacing:-.036em; color:var(--px-ink); margin:0; text-wrap:balance; }
.px-lead{ font-size:17px; line-height:1.66; letter-spacing:-.006em; color:var(--px-body); margin:0; }

/* One button, everywhere: pill + circular arrow badge. */
.px-btn{ display:inline-flex; align-items:center; gap:14px; height:54px; padding:0 8px 0 24px;
         border-radius:999px; background:var(--px-orange); color:#fff; text-decoration:none;
         font:500 15.5px/1 var(--px-text); letter-spacing:-.01em; border:0; cursor:pointer;
         transition:transform .3s var(--px-ease), box-shadow .3s var(--px-ease);
         box-shadow:0 1px 2px rgba(11,11,12,.08), 0 14px 28px -18px rgba(255,70,46,.7); }
.px-btn i{ width:38px; height:38px; border-radius:50%; background:#fff; display:grid; place-items:center;
           transition:transform .3s var(--px-ease); }
.px-btn i svg{ width:15px; height:15px; stroke:var(--px-orange); }
.px-btn:hover{ transform:translateY(-1px); }
.px-btn:hover i{ transform:translateX(3px); }

/* Black circular controls, like the reference's carousel arrows. */
.px-arrow{ width:50px; height:50px; flex:none; border-radius:50%; border:0; background:var(--px-ink);
           display:grid; place-items:center; cursor:pointer; padding:0;
           transition:opacity .25s, transform .25s var(--px-ease); }
.px-arrow svg{ width:19px; height:19px; stroke:#fff; }
.px-arrow:not(:disabled):hover{ transform:scale(1.06); }
.px-arrow:disabled{ opacity:.22; cursor:default; }
.px-arrow:focus-visible, .px-btn:focus-visible, .px-track:focus-visible{ outline:2px solid var(--px-orange); outline-offset:3px; }

/* ==================================================================== 2
   CASES: a full-bleed carousel, exactly the reference's "Valikoituja
   asiakkuuksia" construction. Heading flush left on the container edge,
   black arrows flush right, the track starts on that same edge and runs off
   the right side of the screen. Every card is built identically. */
.px-cases{ padding-bottom:calc(var(--px-rhythm) - 8px); }
/* The hero above is cream; fade the seam instead of cutting it. */
.px-cases::before{ content:""; position:absolute; inset:0 0 auto 0; height:180px; pointer-events:none;
                   background:linear-gradient(var(--px-cream), rgba(255,255,255,0)); }
.px-headrow{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:52px; }
.px-arrows{ display:flex; gap:10px; }

.px-track{ width:100%; display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain;
           scroll-snap-type:x mandatory; scrollbar-width:none;
           padding:0 var(--px-gut) 4px max(var(--px-gut), calc((100vw - 1300px) / 2));
           scroll-padding-left:max(var(--px-gut), calc((100vw - 1300px) / 2)); }
.px-track::-webkit-scrollbar{ display:none; }

.px-case{ flex:0 0 clamp(292px, 30.5vw, 420px); scroll-snap-align:start; display:flex; flex-direction:column; }
.px-case-media{ position:relative; aspect-ratio:4/3; border-radius:var(--px-radius); overflow:hidden; background:var(--px-cream); }
.px-case-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
                    transform:scale(1.02); transition:transform 1s var(--px-ease); }
.px-case:hover .px-case-media img{ transform:scale(1.06); }
.px-case-body{ display:flex; flex-direction:column; flex:1; padding-top:26px; }
.px-case-name{ font-family:var(--px-display); font-weight:500; font-size:26px; line-height:1.1; letter-spacing:-.03em; margin:0 0 10px; color:var(--px-ink); }
.px-case-text{ font-size:15px; line-height:1.62; color:var(--px-body); margin:0 0 28px; }
.px-case-stats{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:22px; border-top:1px solid var(--px-line); }
.px-stat{ display:flex; flex-direction:column; }
.px-stat-v{ font-family:var(--px-display); font-weight:500; font-size:clamp(30px,2.6vw,38px); line-height:1;
            letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--px-ink); }
.px-stat-l{ margin-top:12px; font-size:13.5px; font-weight:500; color:var(--px-ink); letter-spacing:-.005em; }
.px-stat-s{ margin-top:2px; font-size:13px; color:var(--px-muted); }

/* Aggregate figures: big ink numerals on hairlines, no boxes. */
.px-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:96px; border-top:1px solid var(--px-line); }
.px-kpi{ padding:40px 40px 0 0; }
.px-kpi + .px-kpi{ padding-left:40px; border-left:1px solid var(--px-line); }
.px-kpi-v{ font-family:var(--px-display); font-weight:500; font-size:clamp(48px,5.4vw,80px); line-height:.95;
           letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--px-ink); }
.px-kpi-l{ margin:16px 0 0; max-width:280px; font-size:15px; line-height:1.55; color:var(--px-body); }

/* ==================================================================== 3
   QUOTES: the reference's testimonial construction. Centred heading, the
   quote set large in ink, the person under it, black arrows either side. No
   card, no quote-mark ornament, no grey box. */
.px-quotes{ text-align:center; padding-top:calc(var(--px-rhythm) - 24px); }
.px-quotes .px-h2{ margin:0 auto 72px; max-width:760px; }
.px-q-stage{ display:grid; grid-template-columns:50px minmax(0,1fr) 50px; align-items:center; gap:clamp(24px,5vw,72px); max-width:1100px; margin:0 auto; }
.px-q-slides{ display:grid; }
.px-q{ grid-area:1/1; margin:0; opacity:0; visibility:hidden; transform:translateY(8px);
       transition:opacity .55s var(--px-ease), transform .55s var(--px-ease), visibility .55s; }
.px-q.is-on{ opacity:1; visibility:visible; transform:none; }
.px-q blockquote{ margin:0 auto; max-width:860px; font-family:var(--px-text); font-weight:400;
                  font-size:clamp(20px,2.05vw,28px); line-height:1.45; letter-spacing:-.018em; color:var(--px-ink); text-wrap:pretty; }
.px-q blockquote::before{ content:"\201D"; }
.px-q blockquote::after{ content:"\201D"; }
.px-q figcaption{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:40px; text-align:left; }
.px-q figcaption img{ width:52px; height:52px; border-radius:50%; object-fit:cover; display:block; }
.px-q-name{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--px-ink); }
.px-q-role{ display:block; margin-top:2px; font-size:14px; color:var(--px-muted); }
.px-q-count{ margin:36px 0 0; font-size:13px; letter-spacing:.04em; color:var(--px-muted); font-variant-numeric:tabular-nums; }

/* ==================================================================== 4
   STATEMENT: centred copy framed by six behind-the-scenes photos placed
   around it at different sizes and heights, with the Formi mark enlarged and
   bled off the right edge behind everything. This is the reference's
   "Monenlaisia asiakkuuksia" construction, with our own mark in place of
   their B. Six photos, never one or two: the composition is what makes it
   read as intentional. */
.px-statement{ overflow:hidden; padding:calc(var(--px-rhythm) + 24px) 0; }
.px-statement-mark{ position:absolute; top:50%; left:58%; width:min(860px,62vw); height:auto;
                    transform:translate(-20%,-52%) rotate(-14deg); pointer-events:none; user-select:none; }
.px-statement-inner{ position:relative; width:var(--px-col); margin:0 auto; min-height:660px; display:grid; place-items:center; }
.px-statement-copy{ position:relative; z-index:2; max-width:660px; text-align:center; }
.px-statement-copy .px-h2{ margin:0 0 28px; }
.px-statement-copy .px-lead{ color:#6C6C71; }
.px-ph{ position:absolute; z-index:1; margin:0; aspect-ratio:1; border-radius:18px; overflow:hidden; background:#EDEDEA; }
.px-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.px-ph--1{ left:3%;  top:1%;  width:15.5%; }
.px-ph--2{ left:6%;  top:43%; width:10%; }
.px-ph--3{ left:10%; top:69%; width:13%; }
.px-ph--4{ right:13%; top:5%;  width:11%; }
.px-ph--5{ right:3%;  top:34%; width:13.5%; }
.px-ph--6{ right:9%;  top:67%; width:15%; }

/* ==================================================================== 5
   COMPARISON: two identical columns, hairline rows, and the contrast carried
   by colour and weight rather than by an orange slab. */
.px-compare .px-h2{ text-align:center; margin:0 auto 64px; }
.px-cmp{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1040px; margin:0 auto; align-items:stretch; }
.px-cmp-col{ border-radius:var(--px-radius); padding:34px 36px 16px; }
.px-cmp-col--them{ background:var(--px-surface); }
.px-cmp-col--us{ background:#fff; border:1px solid var(--px-line);
                 box-shadow:0 1px 2px rgba(11,11,12,.04), 0 30px 60px -36px rgba(11,11,12,.28); }
.px-cmp-head{ display:flex; align-items:center; gap:12px; padding-bottom:24px; border-bottom:1px solid var(--px-line);
              font-family:var(--px-display); font-weight:500; font-size:23px; letter-spacing:-.025em; color:var(--px-ink); }
.px-cmp-col--them .px-cmp-head{ color:var(--px-muted); }
.px-tile{ width:30px; height:30px; border-radius:8px; background:var(--px-ink); display:grid; place-items:center; }
.px-tile img{ width:12px; height:auto; display:block; }
.px-cmp-list{ list-style:none; margin:0; padding:0; }
.px-cmp-list li{ display:flex; align-items:flex-start; gap:14px; padding:19px 0; border-bottom:1px solid var(--px-line);
                 font-size:16px; line-height:1.45; letter-spacing:-.006em; }
.px-cmp-list li:last-child{ border-bottom:0; }
.px-cmp-col--them li{ color:var(--px-muted); }
.px-cmp-col--us li{ color:var(--px-ink); font-weight:500; }
.px-ico{ flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; display:grid; place-items:center; }
.px-ico svg{ width:12px; height:12px; }
.px-ico--x{ background:#E4E4E0; } .px-ico--x svg{ stroke:#9C9CA1; }
.px-ico--ok{ background:var(--px-orange); } .px-ico--ok svg{ stroke:#fff; }

/* ==================================================================== 6
   FAQ: the reference's hairline list, on the one light band the page gets.
   Intro pinned on the left, questions on the right, a plus that turns into a
   minus. No grey accordion boxes. */
.px-faq{ background:var(--px-band); }
.px-faq-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,110px); align-items:start; }
.px-faq-intro{ position:sticky; top:124px; }
.px-faq-intro .px-h2{ font-size:clamp(30px,3vw,44px); }
.px-faq-intro .px-lead{ margin:24px 0 36px; max-width:440px; }
.px-faq-list{ border-top:1px solid #DDDDD8; }
.px-faq-item{ border-bottom:1px solid #DDDDD8; }
.px-faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:28px;
                      padding:27px 0; cursor:pointer; font-family:var(--px-display); font-weight:500;
                      font-size:clamp(17px,1.4vw,20px); line-height:1.3; letter-spacing:-.02em; color:var(--px-ink); }
.px-faq-item summary::-webkit-details-marker{ display:none; }
.px-faq-item summary:focus-visible{ outline:2px solid var(--px-orange); outline-offset:4px; border-radius:4px; }
.px-plus{ position:relative; flex:none; width:22px; height:22px; }
.px-plus::before, .px-plus::after{ content:""; position:absolute; left:50%; top:50%; width:15px; height:1.6px;
                                   background:var(--px-ink); transform:translate(-50%,-50%); transition:transform .35s var(--px-ease); }
.px-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.px-faq-item[open] .px-plus::after{ transform:translate(-50%,-50%) rotate(0deg); }
.px-faq-item p{ margin:-6px 0 28px; max-width:640px; font-size:16px; line-height:1.68; color:var(--px-body); }

/* ==================================================================== 7
   THE SECTIONS THAT STAY, restyled into the same system so the page reads as
   one build: white ground, ink headings, hairline cards, the one button. */

/* ground: white between the cream hero and the cream footer */
#main .fw-sec, #main section.framer-q44s54{ background:#fff !important; }
#main div:has(> .fm-in), #main section:has(.fm-in){ background:#fff !important; }
/* The page column centres its children at their natural width, so a section
   without an explicit width shows the cream page behind it at both edges.
   "Mita saat tapaamisesta" (#formi-meeting) was 1080px wide for exactly that
   reason. Pin every section in the column to the full width. */
#main .framer-re0wR > section:not(.framer-bum7he){ width:100% !important; align-self:stretch !important; }
/* The lead form and the FAQ share the page's one light band. The selector has
   to carry #main: the plain .fw-sec-lead rule lost to "#main .fw-sec" above and
   the lead section stayed white, so the band started at the FAQ instead and
   sliced straight through the giant FORMI watermark that fw-add.css hangs off
   the bottom of the lead section. */
#main .fw-sec.fw-sec-lead{ background:var(--px-band) !important; }
/* That watermark is the reference's "LAHETA MAILI" device. fw-add sets it at
   bottom:-.2em, which with Inter's metrics puts the letter feet about 12px
   below the section edge, where the next section paints over them. Seat it
   inside the section so the letters are never cropped. */
.fw-sec-lead::after{ bottom:0 !important; }

/* one container, released from the 1040/1100 wrappers that pinched it */
.framer-wfshr9, .framer-18koy9n, .framer-1o3agsp-container, .framer-uu0o2m,
.framer-1azli1u, .framer-1bsra9d, .framer-gqqght{
  max-width:var(--px-col) !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; }
.fw.fw-team, .fw.fw-vsl{ max-width:var(--px-col) !important; width:100% !important; margin-inline:auto !important; }
.fw.fw-timeline{ max-width:760px !important; }

/* one rhythm */
@media (min-width:900px){
  #main .fw-sec:not(.fw-sec-team), #main section.framer-q44s54{ padding-top:var(--px-rhythm) !important; padding-bottom:var(--px-rhythm) !important; }
}
/* The team section ("Tiimi tulosten takana") is deliberately collapsed on the
   live site: padding 0, grid display:none, height 0, presumably until the team
   photos exist. A blanket padding rule re-inflated it into 272px of blank white
   between the statement and the timeline. Keep it exactly as collapsed as
   production has it. */
#main .fw-sec.fw-sec-team{ display:none !important; }

/* type */
.fw-h2, #main section.framer-q44s54 h2{
  font-family:var(--px-display) !important; font-weight:500 !important; font-size:clamp(32px,3.5vw,50px) !important;
  line-height:1.05 !important; letter-spacing:-.036em !important; color:var(--px-ink) !important; text-wrap:balance; }
.fw-h3, .fw-h4{ font-weight:500 !important; letter-spacing:-.022em !important; color:var(--px-ink) !important; }
.fw-sub, .fw-p, .fw-sec li, .fw-sec p{ color:var(--px-body) !important; line-height:1.64 !important; }
.fw-sub{ font-size:17px !important; max-width:580px !important; margin-left:auto !important; margin-right:auto !important; }
.fw-head{ max-width:760px !important; }
.fw-note{ color:var(--px-muted) !important; }

/* cards: one radius, one hairline, one shadow. Was 32px bubble corners. */
.fw-card, .fw-book-card, .fw-vaiku-card, .fw-lead-card, .fw-member-box, .fm-in{
  background:#fff !important; border:1px solid var(--px-line) !important; border-radius:var(--px-radius) !important;
  box-shadow:0 1px 2px rgba(11,11,12,.04), 0 30px 60px -38px rgba(11,11,12,.26) !important; }
.fw-tile, .fw-step, .fw-member{ border-radius:16px !important; }
.fw-tile{ background:var(--px-surface) !important; border:0 !important; }

/* the one button */
.fw-btn{
  display:inline-flex !important; align-items:center !important; gap:14px !important; border-radius:999px !important;
  min-height:54px !important; padding:8px 8px 8px 24px !important; border:0 !important;
  font-weight:500 !important; letter-spacing:-.01em !important;
  box-shadow:0 1px 2px rgba(11,11,12,.08), 0 14px 28px -18px rgba(255,70,46,.7) !important;
  transition:transform .3s var(--px-ease) !important; }
.fw-btn::after{ content:""; width:38px; height:38px; flex:none; border-radius:50%;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF462E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>") center / 15px no-repeat;
  transition:transform .3s var(--px-ease); }
.fw-btn:hover{ transform:translateY(-1px) !important; }
.fw-btn:hover::after{ transform:translateX(3px); }

/* The grey slab token behind any remaining Framer card, white instead. The
   same token doubles as light text in the footer, so it is restored there. */
:root{ --token-0f7b312f-196d-4945-93b3-20a358067f7e:#FFFFFF !important; }
footer, footer *{ --token-0f7b312f-196d-4945-93b3-20a358067f7e:#EEECEA !important; }

/* ==================================================================== 8
   NAV: a capsule floating clear of the top edge, on every page. Desktop only;
   the mobile nav was tuned separately for lag and is not touched. Never touch
   the fixed container's left/right/width: Framer centres it, and overriding
   that geometry collapsed the bar and pushed the logo off-screen. */
@media (min-width:900px){
  .framer-1l05dxo-container{ top:18px !important; }
  .framer-1l05dxo-container nav{
    width:calc(100% - 96px) !important; max-width:var(--px-col) !important; margin:0 auto !important;
    height:66px !important; min-height:66px !important; background:rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter:saturate(1.7) blur(16px) !important; backdrop-filter:saturate(1.7) blur(16px) !important;
    border:1px solid rgba(11,11,12,.07) !important; border-radius:999px !important;
    box-shadow:0 1px 2px rgba(11,11,12,.04), 0 12px 28px -18px rgba(11,11,12,.32) !important; }
  header.tk-hdr, header.hdr{ background:transparent !important; border:0 !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding-top:18px !important; }
  header.tk-hdr > .tk-wrap, header.hdr > .wrap{
    max-width:var(--px-col) !important; background:rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter:saturate(1.7) blur(16px) !important; backdrop-filter:saturate(1.7) blur(16px) !important;
    border:1px solid rgba(11,11,12,.07) !important; border-radius:999px !important;
    box-shadow:0 1px 2px rgba(11,11,12,.04), 0 12px 28px -18px rgba(11,11,12,.32) !important;
    padding-left:20px !important; padding-right:12px !important; min-height:64px !important; }
}

/* ==================================================================== 9
   TABLET AND PHONE */
@media (max-width:1023px){
  .px-kpis{ grid-template-columns:1fr; margin-top:72px; }
  .px-kpi, .px-kpi + .px-kpi{ padding:28px 0; border-left:0; border-bottom:1px solid var(--px-line); }
  .px-kpi:last-child{ border-bottom:0; }
  .px-faq-grid{ grid-template-columns:1fr; }
  .px-faq-intro{ position:static; }
  /* the scatter becomes a tidy 3 x 2 grid under the copy */
  .px-statement-inner{ min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .px-statement-copy{ grid-column:1 / -1; order:-1; margin:0 auto 36px; }   /* copy first, photos after */
  .px-ph{ position:static; width:auto !important; }
  .px-statement-mark{ left:40%; width:110vw; opacity:.8; }
}
@media (max-width:767px){
  .px-headrow{ align-items:flex-start; flex-direction:column; gap:22px; margin-bottom:36px; }
  .px-case{ flex-basis:84vw; }
  .px-case-name{ font-size:23px; }
  .px-q-stage{ grid-template-columns:1fr 1fr; gap:14px; }
  .px-q-slides{ grid-column:1 / -1; grid-row:1; }
  .px-q-stage .px-arrow:first-child{ grid-row:2; justify-self:end; }
  .px-q-stage .px-arrow:last-child{ grid-row:2; justify-self:start; }
  .px-q figcaption{ margin-top:30px; }
  .px-cmp{ grid-template-columns:1fr; }
  .px-cmp-col{ padding:26px 24px 10px; }
  .px-statement-inner{ grid-template-columns:repeat(2,1fr); }
  .px-faq-item summary{ padding:22px 0; }
}

::selection{ background:rgba(255,70,46,.16); }
/* No blanket prefers-reduced-motion override. Headless Chrome, and any viewer
   with the OS setting on, reports "reduce", and killing every animation froze
   the client-logo marquee at frame zero so the logos vanished. */

/* ===========================================================================
   v4 (24.9 afternoon): team, Vaiku, booking, footer, Meistä, Referenssimme
   =========================================================================== */

/* A second button colour for secondary actions. Same construction as the
   orange one, so it still reads as the site's one button. */
.px-btn--ink{ background:var(--px-ink); box-shadow:0 1px 2px rgba(11,11,12,.1), 0 14px 28px -18px rgba(11,11,12,.55); }
.px-btn--ink i svg{ stroke:var(--px-ink); }

/* ------------------------------------------------ homepage: team row */
.px-team .px-headrow{ align-items:flex-end; margin-bottom:48px; }
.px-team-lead{ margin-top:16px; max-width:520px; }
.px-team-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.px-member{ margin:0; }
.px-member-img{ aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:#0B0B0C; }
.px-member-img img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform 1.1s var(--px-ease); }
.px-member:hover .px-member-img img{ transform:scale(1.045); }
/* Names always visible. The reference shows them only on hover; Mr P asked
   for them to be readable at a glance, which is also the only version that
   works on a phone. */
.px-member figcaption{ padding-top:16px; }
.px-member figcaption b{ display:block; font-family:var(--px-display); font-weight:500; font-size:19px; line-height:1.2; letter-spacing:-.022em; color:var(--px-ink); }
.px-member figcaption span{ display:block; margin-top:4px; font-size:14px; color:var(--px-muted); }

/* ------------------------------------------------ homepage: Vaiku */
.px-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center; }
.px-split-media{ margin:0; aspect-ratio:4/5; border-radius:var(--px-radius); overflow:hidden; background:#0B0B0C; }
.px-split-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.px-split-copy .px-lead{ margin:24px 0 36px; max-width:540px; }
.px-pillars{ list-style:none; margin:0; padding:0; border-top:1px solid var(--px-line); }
.px-pillars li{ display:grid; grid-template-columns:52px minmax(0,1fr); padding:22px 0; border-bottom:1px solid var(--px-line); }
.px-pillar-n{ font-family:var(--px-display); font-size:14px; font-weight:500; color:var(--px-orange); padding-top:4px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.px-pillars b{ display:block; font-family:var(--px-display); font-weight:500; font-size:21px; letter-spacing:-.022em; color:var(--px-ink); }
.px-pillars p{ margin:6px 0 0; font-size:15.5px; line-height:1.6; color:var(--px-body); }
.px-vaiku-results{ margin-top:104px; }
.px-vaiku-results-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-bottom:26px; font-size:14px; color:var(--px-muted); }
.px-vaiku-results-head img{ height:24px; width:auto; display:block; }
.px-kpis--tight{ margin-top:0; }
.px-kpi-l b{ color:var(--px-ink); font-weight:500; }
/* the original fw section is replaced by px-vaiku */
#main section.fw-sec-vaiku{ display:none !important; }

/* ------------------------------------------------ homepage: booking
   "Too many little texts": the calendar sat inside five separate lines of
   small print. It now has one heading, one sentence, the team peeking over
   the card, and the guarantee as the single line under it. */
#varaus.px-booking .fw-sub{ max-width:520px !important; }
.px-book-team{ position:relative; z-index:0; margin:-22px auto calc(-56px - 30px); width:min(270px,58vw); pointer-events:none; }
.px-book-team img{ display:block; width:100%; height:auto; }
#varaus .fw-book-card{ position:relative; z-index:1; max-width:540px !important; padding:24px 24px 20px !important; }
#varaus .vc-foot{ display:none !important; }
#varaus .cal-head{ margin-bottom:12px; }
#varaus .cal-month{ font-size:17px !important; letter-spacing:-.015em; }
#varaus .cal-nav{ width:36px !important; height:36px !important; border-radius:50% !important; border:1px solid var(--px-line) !important; background:#fff !important; }
#varaus .cal-dow span{ font-size:11px !important; font-weight:500 !important; color:var(--px-muted) !important; text-transform:uppercase; letter-spacing:.07em; }
#varaus .cal-grid{ row-gap:6px !important; }
#varaus .cal-d{ width:42px !important; height:42px !important; aspect-ratio:auto !important; margin:0 auto !important; padding:0 !important;
  border-radius:50% !important; display:grid !important; place-items:center !important; font-size:14.5px !important; font-variant-numeric:tabular-nums; }
#varaus .cal-d.off{ color:#C6C6C9 !important; background:none !important; }
#varaus .cal-d.free{ background:#F1F1EE !important; color:var(--px-ink) !important; font-weight:500 !important; cursor:pointer; transition:background .2s; }
#varaus .cal-d.free:hover{ background:#E4E4E0 !important; }
#varaus .cal-d.sel{ background:var(--px-ink) !important; color:#fff !important; }
#varaus .slot-wrap{ margin-top:18px; padding-top:18px; border-top:1px solid var(--px-line); }
#varaus .slot-day{ font-size:13px !important; font-weight:500 !important; color:var(--px-muted) !important; margin:0 0 10px !important; }
#varaus .slot{ border-radius:999px !important; border:1px solid var(--px-line) !important; padding:11px 8px !important; font-size:15px !important; color:var(--px-ink) !important; }
#varaus .slot:hover{ border-color:var(--px-ink) !important; }
#varaus .slot.on{ background:var(--px-ink) !important; border-color:var(--px-ink) !important; color:#fff !important; }
#varaus .fw-note{ display:flex !important; align-items:flex-start; gap:10px; max-width:520px !important; margin:0 auto !important;
  font-size:14.5px !important; line-height:1.55 !important; color:var(--px-body) !important; text-align:left !important; }
#varaus .fw-note::before{ content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:var(--px-orange) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 11px no-repeat; }
#varaus .fw-note b{ color:var(--px-ink); font-weight:600; }

/* ------------------------------------------------ footer: the invitation
   Mr P's cutout stands on the footer's divider line with the invitation to his
   right, so it reads as him saying it. Same treatment on the Framer footer
   (homepage) and the generated .tk-foot (every other page). */
.px-foot-cta{ margin:26px 0 30px; }
.px-foot-framer [data-framer-name="Header"] .px-foot-cta{ margin:22px 0 26px; }
.px-foot-cut{ position:absolute; bottom:100%; left:0; height:430px; width:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.px-foot-bottom{ position:relative !important; }
@media (min-width:1100px){
  .px-foot-framer [data-framer-name="Header"]{ padding-left:320px !important; box-sizing:border-box; }
  .px-foot-framer .px-foot-cut{ left:-10px; }
}
@media (max-width:1099px){
  .px-foot-framer .px-foot-cut{ position:static; display:block; height:300px; margin:0 auto -1px; }
}

/* the generated pages' footer, restyled to match the homepage's black card */
footer.tk-foot.px-foot-tk{ background:transparent !important; padding:0 clamp(12px,2.8vw,40px) clamp(12px,2.8vw,40px) !important; margin-top:0 !important; }
footer.tk-foot.px-foot-tk > .tk-wrap{ max-width:1360px !important; background:#0B0B0C; border-radius:28px; padding:clamp(40px,5vw,72px) clamp(24px,4.4vw,64px) 28px !important; }
/* desktop columns only: on a phone the invitation needs the full width */
@media (min-width:768px){ .px-foot-tk .tk-foot-grid{ grid-template-columns:1.6fr 1fr 1fr !important; } }
@media (max-width:767px){ .px-foot-tk .tk-foot-grid{ grid-template-columns:1fr 1fr !important; }
  .px-foot-tk .tk-foot-grid > div:first-child{ grid-column:1 / -1; } }
.px-foot-tk .tk-foot-meta{ position:relative; margin-top:clamp(40px,6vw,120px); }
.px-foot-h{ margin:0; font-family:var(--px-display); font-weight:500; font-size:clamp(30px,3vw,42px); line-height:1.06; letter-spacing:-.035em; color:#fff; }
.px-foot-p{ margin:12px 0 26px !important; font-size:16px !important; color:rgba(255,255,255,.72) !important; max-width:none !important; }
@media (min-width:1100px){
  .px-foot-tk .tk-foot-grid > div:first-child{ padding-left:300px; }
  .px-foot-tk .px-foot-cut{ left:-4px; }
}
@media (max-width:1099px){
  .px-foot-tk .px-foot-cut{ position:static; display:block; height:280px; margin:0 auto 22px; }
  .px-foot-tk .tk-foot-meta{ display:block; }
}

/* ------------------------------------------------ nav: current page */
.tk-nav a[aria-current="page"], header.hdr nav#nav a[aria-current="page"]{ color:var(--px-ink) !important; font-weight:500; }

/* ===========================================================================
   NEW PAGES: /meista and /referenssimme
   Built on the reference's "Meistä" and "Referenssimme" pages: a near
   full-bleed photo card as the hero with the title bottom-left, then split
   sections, a six-step model, a team grid, a scatter of team photos, a logo
   wall. Everything reuses the homepage primitives above.
   =========================================================================== */
.px-page{ background:#fff; }
.px-page main{ display:block; }
.px-page .px:first-child{ padding-top:0; }

.px-hero-card{ position:relative; margin:12px clamp(10px,1.4vw,20px) 0; border-radius:28px; overflow:hidden; background:#0B0B0C;
  height:clamp(520px,78vh,820px); }
.px-hero-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.px-hero-card::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,12,0) 38%, rgba(11,11,12,.35) 62%, rgba(11,11,12,.82) 100%); }
.px-hero-copy{ position:absolute; z-index:1; left:clamp(22px,4vw,64px); right:clamp(22px,4vw,64px); bottom:clamp(28px,4.4vw,60px); color:#fff; }
.px-hero-copy h1{ margin:0 0 18px; font-family:var(--px-display); font-weight:500; font-size:clamp(42px,6vw,88px); line-height:.98; letter-spacing:-.045em; color:#fff; max-width:900px; text-wrap:balance; }
.px-hero-copy p{ margin:0; max-width:600px; font-size:clamp(16px,1.3vw,18px); line-height:1.6; color:rgba(255,255,255,.84); }
.px-hero-copy .px-hero-note{ margin-top:18px; font-size:14px; font-weight:600; color:#fff; }

/* split with text on the right, photo left (reference "Mitä ilmiöittäminen on?") */
.px-split--text .px-split-copy p{ margin:0 0 18px; font-size:17px; line-height:1.7; color:var(--px-body); max-width:560px; }
.px-split--text .px-split-copy h2{ margin-bottom:28px; }
.px-split--text .px-split-copy p.px-strong{ color:var(--px-ink); font-weight:500; }

/* the six-step model (reference "Brändistä ilmiöksi -malli") */
.px-model-head{ max-width:640px; margin-bottom:44px; }
.px-model-head p{ margin-top:16px; }
.px-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:var(--px-radius); background:#F6F6F4; overflow:hidden; }
.px-step{ padding:clamp(24px,2.6vw,36px); border-right:1px solid #E6E6E2; border-bottom:1px solid #E6E6E2; }
.px-step:nth-child(3n){ border-right:0; }
.px-step:nth-last-child(-n+3){ border-bottom:0; }
.px-step img{ width:56px; height:56px; border-radius:12px; object-fit:cover; display:block; margin-bottom:22px; }
.px-step h3{ margin:0 0 10px; font-family:var(--px-display); font-weight:500; font-size:20px; letter-spacing:-.022em; color:var(--px-ink); }
.px-step p{ margin:0; font-size:15px; line-height:1.62; color:var(--px-body); }
.px-model-close{ margin:64px auto 0; text-align:center; font-family:var(--px-display); font-weight:500; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.03em; color:var(--px-ink); }

/* team grid (reference "Brändi Klinikan tiimi"): text fills the first cell */
.px-team-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px); align-items:start; }
.px-team-intro{ padding:8px clamp(0px,2vw,24px) 0 0; }
.px-team-intro p{ margin:18px 0 0; font-size:16.5px; line-height:1.68; color:var(--px-body); }
.px-team-grid .px-member--tilt .px-member-img{ transform:rotate(-2.2deg); box-shadow:0 30px 60px -34px rgba(11,11,12,.45); }
.px-team-grid .px-member figcaption b{ font-size:21px; }

/* vision and mission */
.px-vm h3{ margin:0 0 10px; font-family:var(--px-display); font-weight:500; font-size:22px; letter-spacing:-.022em; color:var(--px-ink); }
.px-vm p{ margin:0; font-size:16.5px; line-height:1.7; color:var(--px-body); }
.px-vm-block + .px-vm-block{ margin-top:36px; padding-top:36px; border-top:1px solid var(--px-line); }

/* values: a 2 x 2 of hairline cells */
.px-values-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.px-values-head p{ margin-top:16px; }
.px-values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1040px; margin:0 auto; border-top:1px solid var(--px-line); }
.px-value{ padding:34px clamp(0px,3vw,40px) 34px 0; border-bottom:1px solid var(--px-line); }
.px-value:nth-child(even){ padding-left:clamp(20px,3vw,40px); border-left:1px solid var(--px-line); }
.px-value h3{ margin:0 0 10px; font-family:var(--px-display); font-weight:500; font-size:24px; letter-spacing:-.025em; color:var(--px-ink); }
.px-value p{ margin:0; font-size:16px; line-height:1.66; color:var(--px-body); }

/* logo wall (reference homepage client grid): one ink colour, centred rows */
.px-logos-head{ text-align:center; max-width:720px; margin:0 auto 60px; }
.px-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0; max-width:1300px; margin:0 auto; list-style:none; padding:0; }
.px-logos li{ flex:0 0 185px; height:104px; display:grid; place-items:center; }
.px-logos img{ max-width:128px; max-height:40px; width:auto; height:auto; display:block; opacity:.9; }
.px-logos img.px-logo--mark{ max-height:62px; }

@media (max-width:1023px){
  .px-team-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .px-split{ grid-template-columns:1fr; }
  .px-split-media{ aspect-ratio:4/3; }
  .px-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-step, .px-step:nth-child(3n), .px-step:nth-last-child(-n+3){ border-right:1px solid #E6E6E2; border-bottom:1px solid #E6E6E2; }
  .px-step:nth-child(2n){ border-right:0; }
  .px-step:nth-last-child(-n+2){ border-bottom:0; }
  .px-team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-team-intro{ grid-column:1 / -1; padding-right:0; }
}
@media (max-width:767px){
  .px-team .px-headrow{ align-items:flex-start; }
  .px-team-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .px-member figcaption b{ font-size:17px; }
  .px-hero-card{ height:clamp(480px,82vh,700px); border-radius:22px; }
  .px-steps{ grid-template-columns:1fr; }
  .px-step, .px-step:nth-child(n){ border-right:0 !important; border-bottom:1px solid #E6E6E2 !important; }
  .px-step:last-child{ border-bottom:0 !important; }
  .px-values{ grid-template-columns:1fr; }
  .px-value, .px-value:nth-child(even){ padding:28px 0; border-left:0; }
  .px-logos li{ flex-basis:50%; height:90px; }
  .px-vaiku-results{ margin-top:72px; }
}

/* ---- v4 fixes after review ---------------------------------------------- */
/* Guarantee line: a flex row split "Takuu:" from its sentence and hung the
   second line under "jos". Plain block with the icon absolutely placed. */
#varaus .fw-note{ display:block !important; position:relative; padding-left:30px !important; }
#varaus .fw-note::before{ position:absolute; left:0; top:1px; }

/* Footer, two faults that are also live on formiworks.fi today:
   1. The "Sivut" column is 201px wide but "Ulkoistettu markkinointitiimi" is
      208px, so the service links are cut off mid-word.
   2. The contact email is printed twice on the bottom row, and the second copy
      (Framer's own "Made In Framer" slot) collides with the first. */
footer [data-framer-name="Links"]{ width:auto !important; gap:clamp(32px,4vw,64px) !important; }
footer [data-framer-name="Links"] [data-framer-name="Navigate"]{ width:max-content !important; min-width:0 !important; }
footer [data-framer-name="Links"] [data-framer-name="Navigate"] p{ white-space:nowrap !important; }
footer [data-framer-name="Made In Framer"]{ display:none !important; }
/* The generated pages inherit tk-body's cream ground, which showed as a cream
   frame around the hero card and a seam where the white sections start. The
   reference pages are white top to bottom. */
html:has(body.px-page), body.px-page{ background:#fff !important; }
/* tulokset.css styles every link in the generated footer grid as a plain
   block link (display:block, opacity .85, 15px). That caught the CTA pill and
   stacked its label on top of its arrow badge. */
.tk-foot .px-btn{ display:inline-flex !important; align-items:center !important; gap:14px !important; margin:0 !important;
  opacity:1 !important; color:#fff !important; font-size:15.5px !important; text-decoration:none !important; }
.tk-foot .px-btn:hover{ text-decoration:none !important; }
/* give the invitation room to sit on one line beside the cutout */
@media (min-width:1100px){
  .px-foot-tk .tk-foot-grid{ grid-template-columns:2.1fr 1fr 1fr !important; }
  .px-foot-tk .tk-foot-grid > div:first-child{ padding-left:290px; }
}
/* the homepage carousel fades in from the cream hero; on a white page that
   fade is just a cream band */
.px-page .px-cases::before{ display:none; }
/* Vitunleija's script mark is all hairlines and turns to a smudge at 40px */
.px-logos img[alt="Vitunleija"]{ max-height:62px; max-width:150px; }
.px-foot-tk .px-foot-h{ font-size:clamp(28px,2.6vw,36px); }
/* keep the face in frame when the Vaiku photo goes landscape on tablets/phones */
.px-vaiku .px-split-media img{ object-position:50% 22%; }

/* ---- v5 (24.9 late): Vaiku client logos, live arrows ------------------- */
.px-kpi-logo{ display:block; height:34px; width:auto; max-width:150px; object-fit:contain; object-position:left center; margin-bottom:22px; }
/* arrows never grey out any more: they loop */
.px-cases .px-arrow:disabled{ opacity:1; cursor:pointer; }
.px-kpi-logo{ height:42px; max-width:170px; }
.px-kpi-logo[alt="Luckiefun's"]{ height:58px; }

/* ------------------------------------------------ footer.ftr (27 pages) */
footer.ftr.px-foot-ftr{ border-top:0 !important; background:transparent !important; padding:0 clamp(12px,2.8vw,40px) clamp(12px,2.8vw,40px) !important; }
footer.ftr.px-foot-ftr > .wrap{ max-width:1360px !important; background:#0B0B0C; border-radius:28px; padding:clamp(40px,5vw,72px) clamp(24px,4.4vw,64px) 28px !important;
  display:grid !important; grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr); gap:40px 48px !important; align-items:start !important; color:#fff; }
.px-foot-ftr .px-foot-cta{ margin:0; }
.px-foot-ftr .ftr-cols{ margin:0 !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:30px 36px !important; }
.px-foot-ftr .ftr-h{ color:#fff !important; }
.px-foot-ftr .ftr-col a{ color:rgba(255,255,255,.7) !important; }
.px-foot-ftr .ftr-col a:hover{ color:#fff !important; }
.px-foot-ftr .px-btn{ color:#fff !important; }
.px-foot-ftr .copy{ grid-column:1 / -1; display:block; position:relative; margin-top:clamp(40px,6vw,120px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6) !important; font-size:13.5px; }
@media (min-width:1100px){
  .px-foot-ftr .px-foot-cta{ padding-left:290px; }
  .px-foot-ftr .px-foot-cut{ left:-4px; }
}
@media (max-width:1099px){
  footer.ftr.px-foot-ftr > .wrap{ grid-template-columns:1fr; }
  .px-foot-ftr .px-foot-cut{ position:static; display:block; height:280px; margin:0 auto 22px; }
}
@media (max-width:767px){ .px-foot-ftr .ftr-cols{ grid-template-columns:1fr 1fr !important; } }

/* ------------------------------------------------ tk header: phone menu */
.px-burger{ display:none; background:none; border:0; padding:10px 8px; cursor:pointer; margin-left:auto; }
.px-burger span{ display:block; width:20px; height:2px; background:var(--px-ink); border-radius:2px; transition:transform .25s var(--px-ease), opacity .2s; }
.px-burger span + span{ margin-top:5px; }
@media (max-width:899px){
  header.tk-hdr .tk-wrap{ position:relative; gap:10px !important; }
  .px-burger{ display:block; }
  header.tk-hdr .tk-nav{ display:none !important; }
  header.tk-hdr.px-nav-open .tk-nav{ display:flex !important; flex-direction:column; align-items:stretch; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
    background:#fff; border:1px solid var(--px-line); border-radius:18px; padding:8px 20px; box-shadow:0 24px 48px -28px rgba(11,11,12,.35); }
  header.tk-hdr.px-nav-open .tk-nav a{ padding:14px 0; font-size:17px; border-bottom:1px solid var(--px-line); color:var(--px-ink) !important; text-decoration:none; }
  header.tk-hdr.px-nav-open .tk-nav a:last-child{ border-bottom:0; }
  header.tk-hdr.px-nav-open .px-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.tk-hdr.px-nav-open .px-burger span:nth-child(2){ opacity:0; }
  header.tk-hdr.px-nav-open .px-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  header.tk-hdr .tk-cta{ padding:10px 16px !important; font-size:14px !important; }
}

/* ===========================================================================
   MOBILE PASS (24.9, audited on the live site at 390 x 844, iPhone UA, DPR 3)
   =========================================================================== */

/* 1. Sideways scroll on the 27 blog/service pages: the header's "Varaa lyhyt
      tapaaminen" pill ends at x=407 on a 390px screen, so the whole page could
      be dragged sideways (and the fixed cookie card, which spans the layout
      viewport, overflowed with it). On narrow phones the pill says the short
      version. Same for the tk header (Palvelut, Meistä, Referenssimme). */
@media (max-width:420px){
  .hdr .cta, header.tk-hdr .tk-cta{ font-size:0 !important; gap:0 !important; padding:10px 16px !important; white-space:nowrap; }
  .hdr .cta svg{ display:none !important; }
  .hdr .cta::before, header.tk-hdr .tk-cta::before{ content:"Varaa tapaaminen"; font-size:14px; font-weight:500; letter-spacing:-.005em; }
  .hdr .wrap{ gap:8px !important; }
}

/* 2. Tap targets. The audit found links and buttons 16 to 36px tall across the
      site; a thumb needs about 44. Hit areas grow, the visual design does not
      change. */
@media (max-width:767px){
  .burger, .px-burger{ min-width:44px; min-height:44px; display:grid !important; place-content:center; padding:0 !important; }
  .brand, a.tk-wm{ min-height:44px; }
  #varaus .cal-nav, #calPrev, #calNext{ width:44px !important; height:44px !important; }
  #varaus .cal-d{ width:40px !important; height:40px !important; }
  footer [data-framer-name="Social Links"] a{ min-width:44px; min-height:44px; display:grid !important; place-items:center; }
  footer [data-framer-name="Navigate"] a{ padding:10px 0 !important; }
  .px-foot-ftr .ftr-col a, .px-foot-tk .tk-foot-grid a:not(.px-btn){ padding:10px 0 !important; }
  .px-foot-ftr .ftr-col{ gap:0 !important; }
  .tk-foot-meta a, .tk-foot-meta span{ display:inline-block; padding:6px 0; }
  a.back{ display:inline-block; padding:10px 0; }
  .k-consent-actions button, .k-consent-actions a{ min-height:44px; }
  section.framer-bum7he a{ padding-top:10px; padding-bottom:10px; }
}

/* 3. Team row on phones: five portraits in a two-column grid left Roni alone
      on a third row and took 900px of scroll. A snap carousel keeps the row a
      row, the way the case carousel already works. */
@media (max-width:767px){
  .px-team-row{ display:flex !important; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin:0 calc(-1 * var(--px-gut)); padding:0 var(--px-gut) 4px; scroll-padding-left:var(--px-gut); }
  .px-team-row::-webkit-scrollbar{ display:none; }
  .px-team-row .px-member{ flex:0 0 62vw; scroll-snap-align:start; }
}
/* one logo height so the three result figures share a baseline; the taller
   Luckiefun's mark had pushed its "50" below the other two numbers */
.px-kpi-logo, .px-kpi-logo[alt="Luckiefun's"]{ height:52px; max-width:170px; object-position:left bottom; }