/* Optimyst main page. Ported from the design artifact's <helmet> styles (spec §4.2),
   plus the artifact runtime's `@media print` baseline (ported verbatim at the end).
   Deliberately not ported (runtime-only, screen-neutral; the 1440px fixture-vs-candidate
   full-page diff showed no layout change):
   - the placeholder/streaming/error rules (`.sc-placeholder`, `.sc-interp.sc-missing`,
     `.sc-logic-error`, ...) and `x-dc{display:none!important}`: their elements do not
     exist on this page;
   - support.js `jt`: `html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}`
     (not even present in the rendered fixture's head; `body{margin:0}` below covers margins);
   - the theme style `html,body{background:…}#dc-root>.sc-host{position:relative}`
     (design-mode only, absent from the rendered fixture). */

body{margin:0;background:#FFFFFF;-webkit-font-smoothing:antialiased}
/* Headings, dt and svg text: Outfit. The artifact's extra selector
   [style*="font-weight:300"] matches nothing once its runtime re-serializes inline
   styles, so tile big numbers render in Quicksand; it is dropped here (spec §4.2). */
h1,h2,h3,dt,svg text{font-family:'Outfit','Quicksand',-apple-system,'Segoe UI',sans-serif}
h1,h2{font-weight:600 !important;letter-spacing:-.02em !important}
h3{font-weight:600 !important}
html{scroll-behavior:smooth}
a{color:#81319C}a:hover{color:#22164A}
.op-nav a{color:#FFFFFF;text-decoration:none;opacity:.86}
.op-nav a:hover{opacity:1;color:#CFE40F}
.op-btn{transition:transform .15s ease, box-shadow .15s ease}
.op-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(207,228,15,.25);color:#22164A}
.op-under{text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.op-under:hover{color:#CFE40F}
.op-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.op-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(34,22,74,.10);border-color:#22164A}
.op-thumb{cursor:grab;outline:none}
.op-thumb:focus-visible .op-ring{stroke:#CFE40F}
.op-field{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:14px 16px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#FFFFFF;border-radius:0}
.op-field:focus{outline:2px solid #CFE40F;outline-offset:1px;border-color:transparent}
.op-field::placeholder{color:rgba(255,255,255,.55)}
.op-foot a{color:#FFFFFF;text-decoration:none}
.op-foot a:hover{color:#CFE40F}
:focus-visible{outline:3px solid #81319C;outline-offset:3px}
/* Hero and contact photos under a purple filter */
.op-hero-photo{background-color:#3A2F66;background-image:url(/assets/img/hero.jpg?v=1);background-size:cover;background-position:center 35%;filter:grayscale(.45) brightness(.82) contrast(.95)}
.op-hero-veil{background:linear-gradient(100deg,rgba(34,22,74,.93) 0%,rgba(34,22,74,.82) 35%,rgba(30,24,56,.72) 65%,rgba(34,22,74,.65) 100%)}
.op-contact-photo{background-color:#3A2F66;background-image:url(/assets/img/contact.jpg?v=1);background-size:cover;background-position:center 30%;filter:grayscale(.45) brightness(.82) contrast(.95)}
.op-arrow{opacity:.45;transition:opacity .2s, transform .2s}
.op-arrow:hover{opacity:1}
.op-sit{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:0 16px;padding:16px 0;border-bottom:1.5px solid #E4E1EE;font-size:clamp(14px,1.05vw,15px);font-weight:600;line-height:1.35;cursor:pointer;transition:color .2s}
.op-sit:first-child{border-top:1.5px solid #E4E1EE}
.op-sit:last-child{border-bottom:0}
/* "Usługi" intro (owner request 2026-11-04): with two columns the "Brzmi znajomo?" list
   gets 1.4 shares, so the empty space between the heading text and the list is about half
   of the equal-column layout (1440 px: ~100 px instead of 200 px). One column below 1008 px
   as before (two 440 px minimum columns + 80 px gap + 48 px padding). */
@media (min-width:1008px){.op-svc-intro{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) !important}}

/* "Brzmi znajomo?" situations (owner request 2026-11-03, accordion since 2026-11-04,
   runbook §16; behaviour in situations.js). The whole row is the trigger: the transparent
   button covers the row, so a click anywhere on it opens the answer below the row text
   (one row at a time); the bullet square carries a plus that turns into a cross. The
   answer grows from 0 to its height (grid rows 0fr -> 1fr) and fades in. Without
   JavaScript hover and keyboard focus open it. */
.op-sits{position:relative}
.op-sit:hover{color:#81319C}
.op-sit>span{position:relative}
.op-sit>span::before,.op-sit>span::after{content:"";position:absolute;left:50%;top:50%;background:#22164A;transform:translate(-50%,-50%) rotate(var(--sit-r,0deg));transition:transform .2s}
.op-sit>span::before{width:10px;height:2px}
.op-sit>span::after{width:2px;height:10px}
.op-sit-plus{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.op-sit-plus:focus-visible{outline:2px solid #81319C;outline-offset:2px}
.op-sit-card{position:relative;z-index:2;grid-column:2;box-sizing:border-box;margin:0;padding:0;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;font-weight:400;color:#4A4168;cursor:auto;transition:grid-template-rows .3s ease,opacity .25s ease,margin .3s ease,visibility 0s .3s}
.op-sit-card>h3{display:none}
.op-sit-card>p{margin:0;min-height:0;overflow:hidden;font-size:15.5px;line-height:1.6}
.op-sit.is-open>.op-sit-card,html:not(.js) .op-sit:hover>.op-sit-card,html:not(.js) .op-sit:focus-within>.op-sit-card{grid-template-rows:1fr;opacity:1;visibility:visible;margin-top:12px;transition:grid-template-rows .3s ease,opacity .25s ease,margin .3s ease,visibility 0s}
.op-sit.is-open>span,html:not(.js) .op-sit:hover>span,html:not(.js) .op-sit:focus-within>span{--sit-r:45deg}
@media (prefers-reduced-motion:reduce){.op-sit,.op-sit>span::before,.op-sit>span::after,.op-sit-card{transition:none}}

/* Quote panel following the carousel (owner request 2026-11-03, runbook §16; quotes.js).
   Without quotes.js the artifact's static quote shows; with it (html.has-quotes) the
   per-slide quotes take its place. All quotes share one grid cell, so the panel keeps the
   height of the longest and only cross-fades. Styles mirror the static quote's inline ones. */
.op-quotes{display:none}
.has-quotes .op-qfig>blockquote,.has-quotes .op-qfig>figcaption{display:none}
.has-quotes .op-quotes{display:grid;flex:1 1 auto}
.op-quote{grid-area:1/1;display:flex;flex-direction:column;gap:28px;opacity:0;visibility:hidden;transition:opacity .55s,visibility .55s}
.op-quote.is-on{opacity:1;visibility:visible}
.op-quote>blockquote{margin:auto 0;font-size:clamp(22px,2vw,28px);line-height:1.35;font-weight:500}
.op-quote>blockquote>b{font-weight:700}
.op-quote>p{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){.op-quote{transition:none}}
/* Slides without a quote (flagship project; Szwajcer.pl until the author agrees): the panel
   stays empty, without the decorative opening quote mark. */
.has-quotes .op-qfig:not(:has(.op-quote.is-on))>span[aria-hidden]{visibility:hidden}
/* Carousel slides on phones (2026-11-03): the longer stories read better with each label
   above its text than in a narrow column next to it. */
/* Short slide texts (owner request 2026-11-03) end at about two thirds of the box, a little
   below the arrows; the box keeps one height for every slide. */
@media (min-width:1000px){#realizacje>div{min-height:520px}}
@media (max-width:600px){#realizacje article dl{grid-template-columns:1fr !important;row-gap:4px !important}#realizacje article dd{margin-bottom:10px !important}}

/* Contact form additions (spec §4.4 items 1-5, §6.1). Navy background: note text
   rgba(255,255,255,.6), links in status/note white and underlined. */
.form-status{font-size:15px;font-weight:600;color:#CFE40F}
.form-status.is-error,.form-status.is-ratelimited{color:#FFFFFF}
.form-status a,.form-gdpr a{color:#FFFFFF;text-decoration:underline}
.form-status a:hover,.form-gdpr a:hover{color:#CFE40F}
.form-gdpr{grid-column:1/-1;margin:0;font-size:13px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.6)}
.field-error{font-size:13px;font-weight:600;color:#FFFFFF}
.op-field[aria-invalid="true"]:not(:focus){border-color:#CFE40F}
/* Sending state: the button's inline `cursor: pointer` needs !important. */
#contact-form button[type=submit]:disabled{opacity:.7;cursor:progress !important}
/* Honeypot (spec §6.1): visually hidden, out of the grid flow. */
.hp-field{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Content pages: privacy policy and 404 (spec §4.4-6). White content area with the
   page's heading/body text styles, max-width 760px, section-container padding. */
.content-page{background:#FFFFFF}
.content-page-inner{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.content-eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#81319C}
.content-page h1{margin:0;font-size:clamp(30px,3.2vw,46px);line-height:1.12}
.content-page h2{margin:40px 0 0;font-size:21px;line-height:1.25}
.content-page p,.content-page li{font-size:16px;line-height:1.6;color:#4A4168}
.content-page p{margin:14px 0 0}
.content-page .content-lead{margin-top:20px;font-size:19px;line-height:1.55;color:#4A4168}
.content-page ul{margin:14px 0 0;padding-left:22px}
.content-page li + li{margin-top:6px}

/* No-JS presentation (spec §4.1, §4.4-11). `html.js` is set by the inline head script;
   without JavaScript the heartbeat line and the six step markers are shown fully drawn
   (the artifact's reduced-motion appearance; the moving head stays hidden) and the hero
   drag hint is hidden. Presentation attributes lose to these rules. */
html:not(.js) #jak-pracujemy svg > path:first-of-type{opacity:1;stroke-dasharray:none}
html:not(.js) #jak-pracujemy svg > rect:nth-of-type(-n+6){opacity:1}
html:not(.js) #start svg[role=group] > g > text[text-anchor="end"]{display:none}

/* Print baseline, verbatim from the artifact runtime (support.js); the `#dc-root`
   selectors match nothing here and are kept as authored. */
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important; animation-duration: .001s !important;
    animation-iteration-count: 1 !important; animation-fill-mode: both !important;
    animation-play-state: running !important; transition-duration: 0s !important;
  }
}
/* Owner-approved deviation (2026-10-30): "(opcjonalnie)" on the same line as "Telefon",
   so the phone field lines up with the e-mail field. */
.op-label-inline{display:grid!important;grid-template-columns:auto 1fr;column-gap:.35em;row-gap:8px;align-items:baseline}
.op-label-inline>.op-field,.op-label-inline>.field-error{grid-column:1/-1}

/* Result tiles in #dowody (owner request 2026-11-03, runbook §16): the client name is
   larger (13 px -> 18 px; 19.5 px until 2026-11-04) and the big number bold. Since the tiles are narrow again
   (2026-11-04) the name is resized, not scaled, so a long name wraps inside its tile; the
   number keeps Quicksand at weight 600 instead of Light 300 (content.spec computed-fonts
   selects it by the inline weight). */
#dowody ul>li>button>span:nth-child(1){font-size:18px !important;line-height:1.25;align-self:flex-start}
/* The number never wraps and never leaves its tile (owner request 2026-11-04). tiles-fit.js
   measures every number in the browser and sets one shared size (--op-tile-num, at most
   40 px) at which the longest fits the tile's content box. Without JavaScript a
   conservative container-unit size applies (15cqi leaves room for wider font metrics).
   The line box stays 42 px (40 px x 1.05), so the tile height and the page layout do not
   depend on the fitted size (no layout shift when the fit runs). */
#dowody ul>li>button{container-type:inline-size}
#dowody ul>li>button>span:nth-child(2){font-weight:600 !important;white-space:nowrap;font-size:var(--op-tile-num,min(40px,15cqi)) !important;line-height:42px !important}
/* The seven tiles form one row that scrolls sideways (owner request 2026-11-03); site.js
   scrolls the active slide's tile into the row. The padding keeps the hover lift visible. */
#dowody ul{display:flex !important;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 14px !important;scrollbar-width:thin;scrollbar-color:#C9C3DB transparent}
/* Tile width as in the artifact's five-column grid (taller than wide, owner request
   2026-11-04): five tiles fill the row, the other two scroll in. */
#dowody ul>li{flex:0 0 max(200px,calc((100% - 64px) / 5));scroll-snap-align:start}

/* Links to the static subpages (owner request 2026-11-03, runbook §16). They inherit the
   surrounding colour, so the page renders as the artifact; headings turn purple on hover.
   Service cards: the title link stretches over the whole card. The six steps of
   #jak-pracujemy open /jak-pracujemy#krok-N on click (home-links.js; their markup is left
   as the artifact's), the section heading is the plain link. */
.op-h-link,.op-card-link{color:inherit;text-decoration:none}
.op-h-link:hover{color:#81319C}
.op-card-link:hover{color:inherit}
#uslugi article.op-card{position:relative}
.op-card-link::after{content:"";position:absolute;inset:0}
.op-card-link:focus-visible{outline:none}
#uslugi article.op-card:has(.op-card-link:focus-visible){outline:2px solid #81319C;outline-offset:2px}
#jak-pracujemy ol>li{cursor:pointer}

/* #zespol joins #jak-pracujemy with a gradient like every other section join (owner
   request 2026-11-04). Its top is transparent: an opaque background painted over the
   lilac glow (box-shadow) of the "Od czego zaczynamy?" box and cut it in a hard line. */
#zespol{background:linear-gradient(rgba(247,246,250,0) 0px,rgba(247,246,250,0) 80px,#F7F6FA 280px,#F7F6FA calc(100% - 600px),#ECE9F3 calc(100% - 240px),#DDD8EA 100%) !important}