/* ===========================================================================
   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; text-wrap:balance; }
#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; }


/* ===========================================================================
   Round 5 (Mr P's list for the live site, 24.9.2026)
   =========================================================================== */

/* 1. "Tulokset puhuvat puolestaan" loops forever (fw-premium.js bindCases).
      Mandatory snap re-snaps every programmatic scroll and would stall the
      drift, so this track scrolls free. */
.px-cases--loop .px-track{ scroll-snap-type:none !important; scroll-behavior:auto !important; }
.px-cases--loop .px-case{ scroll-snap-align:none; }

/* 2. Booking, built like a scheduling page: who you meet on the left, the
      calendar on the right. Stacked under 900px, host on top. */
#varaus .fw-book-card.px-book-card{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  width:100%; max-width:980px !important; padding:0 !important; overflow:hidden; }
#varaus .px-book-card .vc{ min-width:0; padding:30px 32px 26px; }
.px-host{ display:flex; flex-direction:column; gap:20px; padding:24px; border-right:1px solid var(--px-line); }
.px-host-photo{ margin:0; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#000; }
.px-host-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
#varaus .px-host ul{ list-style:none; margin:0; padding:0; }
#varaus .px-host li{ margin:0; padding:0; line-height:1.35 !important; }
#varaus .px-host li::before{ content:none !important; display:none !important; }
.px-host-people{ display:grid; gap:12px; }
.px-host-people li{ display:flex; flex-direction:column; gap:2px; }
.px-host-people b{ font-family:var(--px-display); font-weight:500; font-size:17px; letter-spacing:-.02em; color:var(--px-ink); }
#varaus .px-host-people span{ font-size:13.5px; color:var(--px-muted); }
.px-host-facts{ display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:18px !important; border-top:1px solid var(--px-line); margin-top:auto !important; }
#varaus .px-host-facts li{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:var(--px-ink) !important; }
.px-host-facts svg{ width:18px; height:18px; flex:none; color:var(--px-muted); }
@media (max-width:899px){
  #varaus .fw-book-card.px-book-card{ grid-template-columns:1fr; max-width:560px !important; }
  .px-host{ border-right:0; border-bottom:1px solid var(--px-line); gap:14px; padding:14px 14px 18px; }
  .px-host-photo{ aspect-ratio:16/10; border-radius:12px; }
  .px-host-photo img{ object-position:50% 30%; }
  .px-host-people{ grid-template-columns:1fr 1fr; gap:10px; padding:0 4px !important; }
  .px-host-people b{ font-size:15.5px; }
  #varaus .px-host-people span{ font-size:12.5px; }
  .px-host-facts{ padding:14px 4px 0 !important; margin-top:0 !important; }
  #varaus .px-book-card .vc{ padding:20px 16px 16px; }
}

/* 3. "Maksuton some-analyysi" on a black photo panel. The studio backdrop is
      pure black (sampled 0-3 of 255), so the panel shows no photo edge. The
      FORMI watermark goes: the photo does that job now. */
#main .fw-sec.fw-sec-lead.px-leadphoto{ padding:var(--px-rhythm) var(--px-gut) !important; }
#main .fw-sec.fw-sec-lead.px-leadphoto::after{ display:none !important; }
.px-lead-panel{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); align-items:center;
  width:100%; max-width:1300px; min-height:640px; margin:0 auto; background:#000; border-radius:28px; overflow:hidden; }
.px-lead-photo{ grid-column:1; grid-row:1; align-self:stretch; position:relative; margin:0; min-height:100%; }
.px-lead-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; }
.px-lead-box{ grid-column:2; grid-row:1; position:relative; z-index:1; margin:44px 44px 44px 0; padding:44px 40px 34px;
  background:#fff; border-radius:20px; }
.px-lead-box .fw-head{ align-items:flex-start !important; text-align:left !important; gap:14px !important; max-width:none !important; margin:0 0 26px !important; }
.px-lead-box .fw-h2{ font-size:clamp(30px,2.6vw,40px) !important; }
.px-lead-box .fw-sub{ font-size:16px !important; max-width:none !important; margin:0 !important; }
.px-lead-box .fw-lead-card{ width:100% !important; max-width:none !important; padding:0 !important; border:0 !important;
  border-radius:0 !important; background:none !important; box-shadow:none !important; }
.px-lead-box .fw-lead-form small{ text-align:left; }
@media (max-width:899px){
  .px-lead-panel{ grid-template-columns:1fr; min-height:0; border-radius:22px; }
  /* Mr P's iPhone, 25.9: Safari let the desktop align-self:stretch beat
     aspect-ratio and collapsed the photo to 0 px, so the box's negative
     margin pushed its heading out of the clipped panel. Padding sizes the
     photo the same in every browser. */
  .px-lead-photo{ grid-row:1; align-self:start; aspect-ratio:auto; min-height:0; height:0; padding-top:95%; background:#000; }
  .px-lead-photo img{ object-position:50% 30%; }
  /* the form is a full-width sheet over the bottom of the photo: no black
     frame around it ("the weird black edges"). The panel itself turns
     transparent so no black shows through the sheet's rounded corners. */
  .px-lead-panel{ background:transparent; }
  .px-lead-box{ grid-column:1; grid-row:2; margin:-44px 0 0; padding:28px 20px 24px; border-radius:18px 18px 22px 22px; }
  .px-lead-box .fw-lead-form .row{ grid-template-columns:1fr !important; }
}

/* 4. FAQ intro column: Mr P's four video answers (25.9) under the button,
      one 16:9 player with the questions as its playlist. It replaced the
      Konsta photo that sat here. The rows share the accordion's hairlines;
      the playing row is marked by colour and the orange dot only, so
      switching never reflows the text. */
.px-fv{ margin:40px 0 0; max-width:480px; }
/* the loaded question, above the player (Mr P 25.9: "bigger black text").
   The box keeps the height of the longest question and sets the text on its
   bottom line, so switching questions never moves a playing video. */
.px-fv-title{ display:flex; align-items:flex-end; min-height:calc(2 * 1.24em); margin:0 0 16px; font-family:var(--px-display);
              font-size:22px; line-height:1.24; font-weight:600; letter-spacing:-.018em; color:var(--px-ink); text-wrap:balance; }
.px-fv-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--px-radius); overflow:hidden; background:#101012; }
.px-fv-video{ display:block; width:100%; height:100%; object-fit:cover; background:#101012; }
.px-fv-play{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start; margin:0; padding:16px; border:0; cursor:pointer;
             background:linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,.3)); }
.px-fv-pill{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 6px; border-radius:999px; background:#fff;
             color:var(--px-ink); font-family:var(--px-text); font-size:14.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
             box-shadow:0 14px 30px -14px rgba(11,11,12,.55); transition:transform .3s var(--px-ease); }
.px-fv-pill i{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--px-orange); color:#fff; }
.px-fv-pill i svg{ width:13px; height:13px; margin-left:2px; }
.px-fv-pill em{ font-style:normal; font-weight:500; color:var(--px-muted); font-variant-numeric:tabular-nums; }
.px-fv-play:hover .px-fv-pill{ transform:translateY(-2px); }
.px-fv-play:focus-visible{ outline:none; }
.px-fv-play:focus-visible .px-fv-pill{ outline:2px solid var(--px-orange); outline-offset:3px; }
.px-fv.is-live .px-fv-play{ display:none; }
.px-fv-cap{ margin:14px 0 6px; font-size:13.5px; line-height:1.4; color:var(--px-muted); }
.px-fv-list{ list-style:none; margin:0; padding:0; border-top:1px solid #DDDDD8; }
.px-fv-list li{ border-bottom:1px solid #DDDDD8; }
.px-fv-q{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:start; gap:14px; width:100%; margin:0; padding:13px 0;
          border:0; background:none; text-align:left; font:inherit; font-size:15px; line-height:1.45; color:var(--px-body); cursor:pointer;
          transition:color .2s; }
.px-fv-q i{ display:grid; place-items:center; width:26px; height:26px; margin-top:-2px; border-radius:50%; border:1px solid #CFCFCA; color:var(--px-ink);
            transition:background .2s, border-color .2s, color .2s; }
.px-fv-q i svg{ width:10px; height:10px; margin-left:2px; }
.px-fv-q em{ font-style:normal; font-size:13px; color:var(--px-muted); font-variant-numeric:tabular-nums; padding-top:1px; }
.px-fv-q:hover, .px-fv-q.is-on{ color:var(--px-ink); }
.px-fv-q.is-on i{ background:var(--px-orange); border-color:var(--px-orange); color:#fff; }
.px-fv-q:focus-visible{ outline:2px solid var(--px-orange); outline-offset:4px; border-radius:6px; }
/* The intro column is sticky beside the accordion. With the player it is too
   tall to stick on shorter screens, where it would hide its own last rows. */
@media (max-height:1000px) and (min-width:900px){ .px-faq-intro{ position:static; } }
@media (max-width:1279px){ .px-fv-title{ min-height:calc(3 * 1.24em); } }   /* the long question wraps to 3 lines here */
@media (max-width:360px){ .px-fv-title{ font-size:20px; } }
@media (max-width:899px){ .px-fv{ max-width:none; margin:32px 0 24px; } }
@media (max-width:420px){ .px-fv-play{ padding:12px; } }

/* 5. Vaiku client logos, rebuilt from Mr P's clean files (24.9). Both are
      wide lockups, so they get a little more width than the 170px cap; the
      bold Live Nation wordmark sits lower than the light Itsuyaki one so the
      two read at the same weight. */
.px-kpi-logo[alt="Itsuyaki"]{ max-width:190px; }
.px-kpi-logo[alt="Live Nation"]{ max-width:196px; }

/* 6. Intro (Mr P 24.9: "a page loading animation for when u enter our site
      ... have our logo do some shit ... like brandiklinikka", mobile and
      desktop). Brandiklinikka: logo alone on a plain screen, then it lifts
      away as the page fades in, about 1.5 s. Ours: a dot grows into the black
      tile, the white mark spins in, "Formi" rises letter by letter, then the
      lockup lifts and the cream screen fades. The overlay is created by an
      inline script in <head> (first page of a session only, never with
      reduced motion), so it paints with the first frame; everything here runs
      on the compositor, so Framer's hydration cannot stall it. Proportions
      copy the header logo: mark 68.75% of the tile, text 0.69x, gap 0.25x. */
.px-intro{ position:fixed; inset:0; z-index:2147483600; /* above the consent banner (2147483000/1) */ display:grid; place-items:center; background:#F3EFE9; pointer-events:none;
  animation:pxIntroOut .46s cubic-bezier(.4,0,.2,1) 1.12s forwards; }
.px-intro-lock{ display:flex; align-items:center; gap:18px; animation:pxIntroLift .44s cubic-bezier(.55,0,.75,.2) 1.04s forwards; }
.px-intro-tile{ position:relative; flex:none; width:72px; height:72px; border-radius:14px; background:#0B0B0C; will-change:transform;
  box-shadow:0 1px 32px rgba(0,0,0,.12); display:grid; place-items:center; overflow:hidden; transform:scale(.16);
  animation:pxIntroTile .66s cubic-bezier(.34,1.42,.56,1) .06s forwards; }
.px-intro-tile img{ display:block; width:68.75%; height:auto; opacity:0; transform:scale(.3) rotate(-38deg);
  animation:pxIntroMark .54s cubic-bezier(.34,1.56,.64,1) .3s forwards; }
.px-intro-word{ display:flex; overflow:hidden; padding:.08em .02em .12em; font-family:var(--px-display); font-weight:600;
  font-size:49.5px; line-height:1; letter-spacing:-.01em; color:#0B0B0C; }
.px-intro-word i{ display:block; font-style:normal; transform:translateY(118%); animation:pxIntroChar .52s cubic-bezier(.2,.8,.2,1) forwards; }
.px-intro-word i:nth-child(1){ animation-delay:.5s; }
.px-intro-word i:nth-child(2){ animation-delay:.555s; }
.px-intro-word i:nth-child(3){ animation-delay:.61s; }
.px-intro-word i:nth-child(4){ animation-delay:.665s; }
.px-intro-word i:nth-child(5){ animation-delay:.72s; }
/* transform only (25.9): the old corner-radius morph could not run on the compositor, so the tile
   stuttered while the page loaded underneath it. At 16 % scale the rounded square reads as a dot. */
@keyframes pxIntroTile{ 0%{ transform:scale(.16); } 100%{ transform:scale(1); } }
@keyframes pxIntroMark{ to{ opacity:1; transform:none; } }
@keyframes pxIntroChar{ to{ transform:none; } }
@keyframes pxIntroLift{ to{ transform:translateY(-30px); opacity:0; } }
@keyframes pxIntroOut{ to{ opacity:0; visibility:hidden; } }
@media (max-width:767px){
  .px-intro-lock{ gap:14px; }
  .px-intro-tile{ width:58px; height:58px; border-radius:11px; }
  .px-intro-word{ font-size:40px; }
}

/* 7. Client pages /referenssimme/<client> (Mr P 24.9: "a readable page for
      every client"). Built like brandiklinikka.com/referenssit/cotò: name and
      logo on a hairline, the short version beside the visual, the figures,
      then the story under question headings, text column capped for reading. */
.px-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.px-cs{ padding:calc(var(--px-rhythm) * .8) 0 0; }
.px-cs-back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 30px; font-size:14px; font-weight:500; color:var(--px-muted); text-decoration:none; }
.px-cs-back:hover{ color:var(--px-ink); }
.px-cs-back i{ display:grid; place-items:center; width:18px; height:18px; }
.px-cs-back svg{ width:16px; height:16px; stroke:currentColor; }
.px-cs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:30px; border-bottom:1px solid var(--px-line); }
.px-cs-h1{ margin:0; font-family:var(--px-display); font-weight:500; font-size:clamp(46px,6.4vw,92px); line-height:.96; letter-spacing:-.045em; color:var(--px-ink); }
.px-cs-logo{ flex:none; display:block; height:46px; width:auto; max-width:220px; object-fit:contain; object-position:right bottom; }
.px-cs-intro{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start; padding-top:48px; }
.px-cs-lede{ margin:0 0 34px; font-family:var(--px-display); font-weight:400; font-size:clamp(22px,2.1vw,30px); line-height:1.32; letter-spacing:-.022em; color:var(--px-ink); }
.px-cs-facts{ margin:0; border-top:1px solid var(--px-line); }
.px-cs-facts div{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--px-line); }
.px-cs-facts dt{ margin:0; font-size:14px; color:var(--px-muted); }
.px-cs-facts dd{ margin:0; font-size:14px; font-weight:500; color:var(--px-ink); text-align:right; }
.px-cs-visual{ margin:0; aspect-ratio:4/3; border-radius:var(--px-radius); overflow:hidden; background:var(--px-cream); }
.px-cs-visual img{ display:block; width:100%; height:100%; object-fit:cover; }
.px-cs-stats{ padding-top:clamp(56px,7vw,100px); }
.px-cs-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); border-top:1px solid var(--px-ink); }
.px-cs-stat{ display:flex; flex-direction:column; padding:26px 26px 6px 0; }
.px-cs-stat + .px-cs-stat{ padding-left:26px; border-left:1px solid var(--px-line); }
.px-cs-stat .v{ font-family:var(--px-display); font-weight:500; font-size:clamp(42px,4.6vw,68px); line-height:1; letter-spacing:-.045em; color:var(--px-ink); }
.px-cs-stat .l{ margin-top:14px; font-size:15px; font-weight:600; color:var(--px-ink); }
.px-cs-stat .s{ margin-top:4px; font-size:14px; line-height:1.45; color:var(--px-muted); }
.px-cs-story{ padding-top:clamp(64px,8vw,120px); }
.px-cs-row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,6vw,96px); padding:40px 0 44px; border-top:1px solid var(--px-line); }
.px-cs-row h2{ margin:0; font-family:var(--px-display); font-weight:500; font-size:clamp(26px,2.6vw,38px); line-height:1.08; letter-spacing:-.03em; color:var(--px-ink); }
.px-cs-text{ max-width:660px; }
.px-cs-text p{ margin:0; font-size:18px; line-height:1.72; color:var(--px-body); }
.px-cs-text ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.px-cs-text li{ position:relative; padding-left:28px; font-size:18px; line-height:1.62; color:var(--px-body); }
.px-cs-text li::before{ content:""; position:absolute; left:2px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--px-orange); }
.px-cs-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px !important; }
.px-cs-link{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px 10px 18px; border:1px solid var(--px-line); border-radius:999px; font-size:15px; font-weight:500; color:var(--px-ink); text-decoration:none; transition:border-color .2s; }
.px-cs-link:hover{ border-color:var(--px-ink); }
.px-cs-link i{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--px-ink); }
.px-cs-link svg{ width:12px; height:12px; stroke:#fff; }
.px-cs-quote{ padding-top:clamp(64px,8vw,110px); }
.px-cs-quote figure{ margin:0; padding:clamp(32px,4vw,56px); border-radius:var(--px-radius); background:var(--px-cream); }
.px-cs-quote blockquote{ margin:0; max-width:980px; font-family:var(--px-display); font-weight:400; font-size:clamp(24px,2.8vw,38px); line-height:1.25; letter-spacing:-.025em; color:var(--px-ink); }
.px-cs-quote figcaption{ margin-top:26px; font-size:15px; color:var(--px-muted); }
.px-cs-quote figcaption b{ margin-right:10px; font-weight:600; color:var(--px-ink); }
.px-cs-media{ padding-top:clamp(64px,8vw,110px); }
.px-cs-media-head h2{ margin:0 0 28px; font-family:var(--px-display); font-weight:500; font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.035em; color:var(--px-ink); }
.px-cs-vids{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.px-cs-vids::-webkit-scrollbar{ display:none; }
.px-cs-vid{ position:relative; flex:0 0 min(300px,70vw); aspect-ratio:9/16; display:flex; align-items:flex-end; padding:20px; border:0; border-radius:18px; overflow:hidden; cursor:pointer; text-align:left;
  background:radial-gradient(120% 90% at 50% 0%, #2A2A2E 0%, #0B0B0C 70%); color:#fff; font:inherit; }
.px-cs-vid:focus-visible{ outline:2px solid var(--px-orange); outline-offset:3px; }
.px-cs-play{ position:absolute; left:50%; top:50%; display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); transition:transform .3s var(--px-ease); }
.px-cs-play svg{ width:24px; height:24px; margin-left:3px; fill:#0B0B0C; }
.px-cs-vid:hover .px-cs-play{ transform:translate(-50%,-50%) scale(1.07); }
.px-cs-vid-meta{ display:flex; flex-direction:column; gap:2px; }
.px-cs-vid-meta b{ font-size:15px; font-weight:600; }
.px-cs-vid-meta span{ font-size:13px; opacity:.72; }
.px-cs-vid.is-live{ padding:0; cursor:default; background:#0B0B0C; }
.px-cs-vid.is-live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.px-cs-vid.is-ig{ flex-basis:min(340px,86vw); aspect-ratio:auto; height:620px; background:#fff; border:1px solid var(--px-line); }
.px-cs-next{ padding:clamp(72px,9vw,130px) 0 clamp(72px,9vw,120px); }
.px-cs-next-k{ margin:0 0 18px; font-size:14px; font-weight:500; color:var(--px-muted); }
.px-cs-next-card{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); align-items:center; padding-top:28px; border-top:1px solid var(--px-line); color:inherit; text-decoration:none; }
.px-cs-next-img{ display:block; aspect-ratio:4/3; border-radius:var(--px-radius); overflow:hidden; background:var(--px-cream); }
.px-cs-next-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--px-ease); }
.px-cs-next-card:hover .px-cs-next-img img{ transform:scale(1.04); }
.px-cs-next-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.px-cs-next-copy b{ font-family:var(--px-display); font-weight:500; font-size:clamp(34px,4vw,56px); line-height:1; letter-spacing:-.04em; color:var(--px-ink); }
.px-cs-next-copy span{ max-width:520px; font-size:17px; line-height:1.6; color:var(--px-body); }
.px-cs-next-copy i{ display:grid; place-items:center; width:48px; height:48px; margin-top:10px; border-radius:50%; background:var(--px-ink); transition:transform .3s var(--px-ease); }
.px-cs-next-copy i svg{ width:18px; height:18px; stroke:#fff; }
.px-cs-next-card:hover .px-cs-next-copy i{ transform:translateX(4px); }
@media (max-width:899px){
  .px-cs-head{ flex-direction:column-reverse; align-items:flex-start; gap:20px; }
  .px-cs-logo{ display:none; }   /* on a phone it sat right above the same name, and the visual below carries the logo anyway */
  .px-cs-intro, .px-cs-row, .px-cs-next-card{ grid-template-columns:1fr; }
  .px-cs-intro{ gap:28px; padding-top:30px; }
  .px-cs-intro-copy{ order:2; }
  .px-cs-stat-row{ grid-template-columns:1fr 1fr; }
  .px-cs-stat, .px-cs-stat + .px-cs-stat{ padding:22px 16px 18px 0; border-left:0; border-bottom:1px solid var(--px-line); }
  .px-cs-stat:nth-child(even){ padding-left:16px; border-left:1px solid var(--px-line); }
  .px-cs-row{ gap:16px; padding:30px 0 34px; }
  .px-cs-text p, .px-cs-text li{ font-size:17px; }
}

/* Referenssimme: every card with a client page is one big link ("Lue case"
   is stretched over the card), and so is its logo on the wall. */
.px-case{ position:relative; }
.px-case-more{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-size:15px; font-weight:600; color:var(--px-ink); text-decoration:none; }
.px-case-more::after{ content:""; position:absolute; inset:0; z-index:1; }
.px-case-more i{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--px-ink); transition:transform .3s var(--px-ease); }
.px-case-more i svg{ width:13px; height:13px; stroke:#fff; }
.px-case:hover .px-case-more i{ transform:translateX(3px); }
.px-case-more:focus-visible{ outline:2px solid var(--px-orange); outline-offset:4px; border-radius:6px; }
.px-logos a{ display:grid; place-items:center; width:100%; height:100%; transition:opacity .2s; }
.px-logos a:hover{ opacity:.55; }

/* 8. Blog, rebuilt to the rest of the site's level (Mr P 24.9: "blog rerun
      means just make the ui up to bar with the rest of the site"). Same
      articles and words; only the construction changes. The boxed white
      cards were exactly the "grey blocks that just sit there" the homepage
      lost in v3, so the index becomes an editorial list on hairlines, and an
      article gets the case pages' type scale on a white page. Scoped by the
      body classes px-blog-index / px-blog-post (service pages share blog.css). */
body.px-blog{ background:#fff; }
.px-blog main .wrap{ max-width:none; }   /* main only: the header pill and footer card have their own .wrap */
/* index */
.px-blog-index .hero{ padding:calc(var(--px-rhythm) * .9) 0 0; }
.px-blog-index .hero .wrap, .px-blog-index .posts .wrap{ width:var(--px-col); max-width:var(--px-col); padding:0; }
.px-blog-index .hero .wrap{ padding-bottom:40px; border-bottom:1px solid var(--px-ink); }
.px-blog-index .eyebrow{ display:none; }
.px-blog-index .hero h1{ margin:0; max-width:13ch; font-family:var(--px-display); font-weight:500; font-size:clamp(46px,6.4vw,92px);
  line-height:.96; letter-spacing:-.045em; color:var(--px-ink); }
.px-blog-index .hero .lede{ margin:28px 0 0; max-width:600px; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--px-body); }
.px-blog-index .posts{ padding:0 0 var(--px-rhythm); }
.px-blog-index .grid{ display:block; }
.px-blog-index .card{ display:grid; grid-template-columns:150px minmax(0,1.15fr) minmax(0,1fr) 44px; gap:0 40px; align-items:center;
  padding:34px 0; border:0; border-bottom:1px solid var(--px-line); border-radius:0; background:none; box-shadow:none; transform:none;
  color:var(--px-ink); transition:background .25s; }
.px-blog-index .card:hover{ transform:none; box-shadow:none; }
.px-blog-index .card .meta{ grid-column:1; grid-row:1; align-self:start; flex-direction:column; align-items:flex-start; gap:2px; padding-top:6px; font-size:14px; line-height:1.45; color:var(--px-muted); white-space:nowrap; }
.px-blog-index .card .meta .dot{ display:none; }
.px-blog-index .card h2{ grid-column:2; grid-row:1; margin:0; font-family:var(--px-display); font-weight:500; font-size:clamp(21px,1.9vw,27px);
  line-height:1.18; letter-spacing:-.025em; color:var(--px-ink); text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:5px; text-decoration-thickness:1.5px; transition:text-decoration-color .2s; }
.px-blog-index .card p{ grid-column:3; grid-row:1; margin:0; font-size:15px; line-height:1.6; color:var(--px-body); }
.px-blog-index .card::after{ content:""; grid-column:4; grid-row:1; width:44px; height:44px; border-radius:50%;
  background:var(--px-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/17px no-repeat; transition:transform .3s var(--px-ease); }
.px-blog-index .card:hover h2{ text-decoration-color:var(--px-ink); }
.px-blog-index .card:hover::after{ transform:translateX(4px); }
@media (max-width:899px){
  .px-blog-index .card{ grid-template-columns:minmax(0,1fr) 36px; gap:10px 18px; padding:26px 0; align-items:start; }
  .px-blog-index .card .meta{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; padding:0; }
  .px-blog-index .card .meta .dot{ display:inline-block; }
  .px-blog-index .card h2{ grid-column:1; grid-row:2; }
  .px-blog-index .card p{ grid-column:1; grid-row:3; }
  .px-blog-index .card::after{ grid-column:2; grid-row:2; width:36px; height:36px; background-size:14px; }
}
/* article */
.px-blog-post .article{ padding:calc(var(--px-rhythm) * .8) 0 var(--px-rhythm); }
.px-blog-post .article .wrap{ width:min(760px, calc(100vw - 2 * var(--px-gut))); max-width:760px; padding:0; }
.px-blog-post .back{ gap:6px; margin-bottom:30px; font-size:14px; font-weight:500; color:var(--px-muted); }
.px-blog-post .back:hover{ color:var(--px-ink); }
.px-blog-post .article h1{ margin:0 0 24px; max-width:none; font-family:var(--px-display); font-weight:500; font-size:clamp(36px,5vw,64px);
  line-height:1.02; letter-spacing:-.04em; color:var(--px-ink); }
.px-blog-post .article .meta{ margin:0 0 44px; padding-bottom:26px; border-bottom:1px solid var(--px-ink); font-size:14px; color:var(--px-muted); }
.px-blog-post .prose{ font-size:18px; line-height:1.76; color:var(--px-body); }
.px-blog-post .prose > p:first-child{ font-size:clamp(19px,1.6vw,21px); line-height:1.62; color:var(--px-ink); }
.px-blog-post .prose p{ margin:0 0 24px; }
.px-blog-post .prose h2{ margin:60px 0 18px; font-family:var(--px-display); font-weight:500; font-size:clamp(26px,2.6vw,34px);
  line-height:1.12; letter-spacing:-.03em; color:var(--px-ink); }
.px-blog-post .prose h3{ margin:40px 0 12px; font-family:var(--px-display); font-weight:500; font-size:22px; letter-spacing:-.02em; color:var(--px-ink); }
.px-blog-post .prose a{ color:var(--px-ink); text-decoration-color:var(--px-orange); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.px-blog-post .prose strong{ color:var(--px-ink); font-weight:600; }
.px-blog-post .prose ul, .px-blog-post .prose ol{ padding-left:22px; }
.px-blog-post .prose li{ margin:0 0 10px; }
.px-blog-post .prose li::marker{ color:var(--px-orange); }
.px-blog-post .prose blockquote{ margin:34px 0; padding:0 0 0 22px; border-left:2px solid var(--px-orange); font-family:var(--px-display);
  font-size:22px; line-height:1.4; letter-spacing:-.015em; color:var(--px-ink); }
.px-blog-post .prose table{ margin:34px 0; font-size:15px; line-height:1.5; border-top:1px solid var(--px-ink); }
.px-blog-post .prose th{ padding:14px 18px 14px 0; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--px-ink);
  border-bottom:1px solid var(--px-line); vertical-align:bottom; }
.px-blog-post .prose td{ padding:15px 18px 15px 0; border-bottom:1px solid var(--px-line); color:var(--px-body); vertical-align:top; }
.px-blog-post .prose td:first-child{ color:var(--px-ink); font-weight:500; }
.px-blog-post .endcta{ margin-top:64px; padding:clamp(28px,4vw,44px); border:0; border-radius:var(--px-radius); background:var(--px-cream); gap:24px; }
.px-blog-post .endcta p{ max-width:26ch; font-family:var(--px-display); font-size:clamp(22px,2.2vw,30px); line-height:1.15; letter-spacing:-.025em; color:var(--px-ink); }
.px-blog-post .endcta .cta{ display:inline-flex; align-items:center; gap:12px; padding:8px 8px 8px 22px; border-radius:999px; background:var(--px-orange);
  color:#fff; font-size:15.5px; font-weight:600; text-decoration:none; box-shadow:0 10px 24px -12px rgba(255,70,46,.7); }
.px-blog-post .endcta .cta svg{ width:34px; height:34px; padding:10px; border-radius:50%; background:#fff; color:var(--px-orange); box-sizing:border-box; }

/* 9. One phone menu for every page (fw-premium.js buildMenu/openMenu). */
html.px-menu-open, html.px-menu-open body{ overflow:hidden; }
.px-mnav{ position:fixed; inset:0; z-index:2147483400; display:flex; flex-direction:column; padding:0 20px calc(22px + env(safe-area-inset-bottom));
  background:#fff; opacity:0; transition:opacity .28s var(--px-ease); overflow-y:auto; overscroll-behavior:contain; }
.px-mnav[hidden]{ display:none; }
.px-mnav.is-open{ opacity:1; }
.px-mnav-top{ flex:none; display:flex; align-items:center; justify-content:space-between; height:72px; }
.px-mnav-logo{ display:inline-flex; align-items:center; gap:8px; color:var(--px-ink); text-decoration:none; font-family:var(--px-display); font-weight:600; font-size:22px; letter-spacing:-.01em; }
.px-mnav-tile{ display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:#0B0B0C; }
.px-mnav-tile img{ display:block; width:22px; height:auto; }
.px-mnav-close{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--px-line); border-radius:50%; background:#fff; color:var(--px-ink); cursor:pointer; }
.px-mnav-close svg{ width:18px; height:18px; stroke:currentColor; }
.px-mnav-links{ display:flex; flex-direction:column; margin-top:14px; border-top:1px solid var(--px-line); }
.px-mnav-links a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 2px; border-bottom:1px solid var(--px-line);
  font-family:var(--px-display); font-weight:500; font-size:clamp(30px,8.6vw,38px); line-height:1.05; letter-spacing:-.035em; color:var(--px-ink); text-decoration:none;
  opacity:0; transform:translateY(12px); transition:opacity .35s var(--px-ease), transform .5s var(--px-ease); }
.px-mnav.is-open .px-mnav-links a{ opacity:1; transform:none; }
.px-mnav.is-open .px-mnav-links a:nth-child(2){ transition-delay:.04s; }
.px-mnav.is-open .px-mnav-links a:nth-child(3){ transition-delay:.08s; }
.px-mnav.is-open .px-mnav-links a:nth-child(4){ transition-delay:.12s; }
.px-mnav-links a i{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#F1F1EE; }
.px-mnav-links a i svg{ width:15px; height:15px; stroke:var(--px-ink); }
.px-mnav-links a[aria-current="page"]{ color:var(--px-orange); }
.px-mnav-cta{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; min-height:60px; padding:8px 8px 8px 24px;
  border-radius:999px; background:var(--px-orange); color:#fff; font-size:17px; font-weight:600; text-decoration:none; box-shadow:0 14px 30px -14px rgba(255,70,46,.7); }
.px-mnav-links{ margin-bottom:28px; }   /* the CTA's auto margin can shrink to 0 on a short screen */
.px-mnav-cta i{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; }
.px-mnav-cta i svg{ width:17px; height:17px; stroke:var(--px-orange); }
@media (min-width:900px){ .px-mnav{ display:none !important; } }

/* 10. Phone header bars: logo left, then the booking pill, then the burger at
       the far right. The burger used to sit mid-bar, between logo and pill. */
@media (max-width:899px){
  header.tk-hdr .tk-cta{ order:2; margin-left:auto !important; }
  header.tk-hdr .px-burger{ order:3; margin-left:2px !important; }
}
@media (max-width:809px){
  header.hdr .cta{ order:2; margin-left:auto !important; }
  header.hdr .burger{ order:3; margin-left:2px !important; }
  header.hdr .nav{ order:4; }
}

/* 11. Mr P 24.9: on a phone the first screen had ~106px of empty space above
       the hero headline (140px section padding + 38px inside, under a 72px
       header). Start the hero right under the header so more of the page
       shows in the first screen. */
@media (max-width:809px){
  #main section.framer-bum7he{ padding-top:92px !important; }
  #main section.framer-bum7he .framer-hqz76t{ padding-top:8px !important; }
}

/* 12. "Miten eroamme ...": on phones the six photos were a stacked 2x3 grid
       under the text. Mr P: scattered along the sides, above the heading, and
       ONLY on mobile ("dont change the miten eroamme section on desktop"), so
       tablets and desktop keep their layout. A loose collage band, tilted,
       bleeding off both edges. The Referenssimme team scatter shares it.
       Every photo resets the side it does not use: the desktop rules set
       left on some and right on others, and a leftover left beats right. */
@media (max-width:767px){
  .px-statement-inner{ --bw:100vw; display:block !important; min-height:0 !important; padding-top:calc(var(--bw) * .86); }
  .px-statement-copy{ margin:0 auto !important; }
  .px-ph{ position:absolute !important; box-shadow:0 20px 40px -26px rgba(11,11,12,.45); }
  .px-ph--1{ left:-4%;  right:auto; top:0;                    width:34% !important; aspect-ratio:3/4; transform:rotate(-5deg); }
  .px-ph--2{ left:31%;  right:auto; top:calc(var(--bw) * .08); width:25% !important; aspect-ratio:1;   transform:rotate(4deg); }
  .px-ph--3{ right:-4%; left:auto;  top:calc(var(--bw) * .02); width:33% !important; aspect-ratio:3/4; transform:rotate(6deg); }
  .px-ph--4{ left:5%;   right:auto; top:calc(var(--bw) * .50); width:27% !important; aspect-ratio:1;   transform:rotate(3deg); }
  .px-ph--5{ left:37%;  right:auto; top:calc(var(--bw) * .40); width:24% !important; aspect-ratio:4/5; transform:rotate(-4deg); }
  .px-ph--6{ right:4%;  left:auto;  top:calc(var(--bw) * .53); width:30% !important; aspect-ratio:4/3; transform:rotate(-3deg); }
}

/* 13. Three more behind-the-scenes shots (fw-premium.js enhanceTimeline):
       loose in the gutters beside the timeline on wide screens, a small
       scattered strip under its heading below that. */
.px-tl{ overflow:hidden; }
.px-tl > .fw-head, .px-tl > .fw-timeline{ position:relative; z-index:1; }
.px-tl-scatter{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.px-tl-ph{ position:absolute; margin:0; border-radius:18px; overflow:hidden; background:#EDEDEA; box-shadow:0 24px 50px -30px rgba(11,11,12,.4); }
.px-tl-ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.px-tl-ph--1{ top:14%; left:calc(50% - 416px - clamp(190px,16vw,250px)); width:clamp(190px,16vw,250px); aspect-ratio:1;   transform:rotate(-4deg); }
.px-tl-ph--2{ top:38%; right:calc(50% - 416px - clamp(170px,14vw,215px)); width:clamp(170px,14vw,215px); aspect-ratio:3/4; transform:rotate(5deg); }
.px-tl-ph--3{ top:62%; left:calc(50% - 410px - clamp(170px,14vw,215px)); width:clamp(170px,14vw,215px); aspect-ratio:3/4; transform:rotate(3deg); }   /* 3:4 photo in a 3:4 frame: shown whole */
@media (max-width:1279px){
  .px-tl-scatter{ position:relative; inset:auto; width:100%; max-width:620px; height:min(74vw, 470px); margin:0 auto; }
  .px-tl-ph--1{ top:6%;  left:0;   right:auto; width:42%; }
  .px-tl-ph--2{ top:0;   right:2%; left:auto;  width:31%; transform:rotate(6deg); }
  .px-tl-ph--3{ top:30%; left:37%; right:auto; width:31%; }
}

/* 14. Vaiku photo on phones: the 4:3 crop cut the laptop out of "Konsta with
       laptop". A taller frame keeps both his face and the laptop. */
@media (max-width:1023px){
  .px-vaiku .px-split-media{ aspect-ratio:4/5; }
  .px-vaiku .px-split-media img{ object-position:50% 45%; }
}

/* 15. The Formi-malli on Meistä is four steps now (Mr P 24.9: "we don't have
       six steps"): one row of four on desktop, 2x2 on tablets, a list on phones. */
@media (min-width:1024px){
  .px-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .px-step, .px-step:nth-child(3n){ border-right:1px solid #E6E6E2; border-bottom:0; }
  .px-step:last-child{ border-right:0; }
}

/* 16. Mobile pass (Mr P 24.9: "optimize the viewport for mobile"): the hero's
       "Tutustu palveluun" link was a 25px-tall tap target. Grow the hit area,
       not the link. */
@media (max-width:809px){
  #main section.framer-bum7he a.framer-W990X{ position:relative; }
  #main section.framer-bum7he a.framer-W990X::after{ content:""; position:absolute; inset:-11px -12px; }
}