/* 03-support: "a helpdesk inbox on a good shift". Light theme, locked.
   Shape rule: surfaces (panels, cards, images, phone frame) = 10px; buttons + chips + popover rows = full pill. */

:root{
  --mist:#EAF2F7;
  --mist-2:#DCE8F0;
  --panel:#F8FBFD;
  --line:#BCCCDC;
  --navy:#102A43;
  --slate:#486581;
  --marigold:#F5B83D;      /* fills only: Resolved chip, Email me button */
  --marigold-ink:#8A5A00;  /* small text, tokens, leader lines, hairlines, markers */
  --radius:10px;
  --pill:999px;
  --shadow:0 1px 0 #BCCCDC, 0 24px 48px -28px rgba(16,42,67,.22);

  --f-display:"DM Serif Display", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --h1:64px; --h2:44px; --body:18px;
  --header-h:64px;
  --gutter:24px;
  --side:24px;
  --section:120px;
  --row-h:72px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --t-ui:180ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;background:var(--mist);color:var(--navy);
  font:400 var(--body)/1.55 var(--f-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
sup{line-height:0}

.wrap{width:100%;max-width:calc(1240px + var(--side) * 2);margin-inline:auto;padding-inline:var(--side)}
.section{padding-block:var(--section)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ic{width:20px;height:20px;fill:currentColor;flex:none}
.ic-16{width:16px;height:16px}
.ic-20{width:20px;height:20px}

:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.chip:focus-visible,.lanes-toggle:focus-visible{border-radius:var(--pill)}

.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--navy);color:var(--mist);padding:10px 16px;border-radius:var(--pill);font-weight:500;text-decoration:none;transition:top var(--t-ui) var(--ease-out)}
.skip:focus{top:12px}

/* type */
.h1{font:400 var(--h1)/1.05 var(--f-display);letter-spacing:-.01em;color:var(--navy)}
.h2{font:400 var(--h2)/1.1 var(--f-display);letter-spacing:-.005em;color:var(--navy)}
.body{max-width:46ch}
.list-label{font:600 15px/1.4 var(--f-sans);color:var(--slate);letter-spacing:0}

/* buttons + links */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--pill);
  font:500 16px/1 var(--f-sans);text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-ui) ease-out,color var(--t-ui) ease-out;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--marigold);color:var(--navy)}
.btn-primary:hover{background:var(--navy);color:var(--mist)}
.text-link{
  display:inline-flex;align-items:center;gap:8px;
  font:500 16px/1.3 var(--f-sans);color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line);
  transition:text-decoration-color var(--t-ui) ease-out;
}
.text-link:hover{text-decoration-color:var(--navy)}

/* chips */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;min-width:94px;padding:0 10px;border-radius:var(--pill);
  font:500 13px/1 var(--f-sans);white-space:nowrap;flex:none;
  background:var(--marigold);color:var(--navy);border:1px solid var(--marigold);
}
.chip .l-done{display:inline-flex;align-items:center;gap:4px}
.chip .l-open{display:none}
.chip .chk{width:14px;height:14px}
.chip.is-open{background:transparent;border-color:var(--navy)}
.chip.is-open .l-open{display:inline}
.chip.is-open .l-done{display:none}

/* ---------- header ---------- */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:8px}
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--t-ui) ease-out,border-color var(--t-ui) ease-out;
}
.site-header.is-scrolled,.no-js .site-header{background:var(--mist);border-bottom-color:var(--line)}
.header-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-actions{display:flex;align-items:center;gap:20px}

.lockup{display:inline-flex;align-items:baseline;text-decoration:none;white-space:nowrap;color:var(--navy)}
.lockup-name{font:400 22px/1 var(--f-display)}
.lockup-slash{font:400 18px/1 var(--f-sans);color:var(--marigold-ink);margin:0 .4em}
.lockup-lane{font:400 13px/1 var(--f-mono);color:var(--slate)}
.lockup-lg .lockup-name{font-size:28px}
.lockup-lg .lockup-slash{font-size:22px}
.lockup-lg .lockup-lane{font-size:14px}

.lanes-menu{position:relative}
.lanes-toggle{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 6px;
  font:500 15px/1 var(--f-sans);color:var(--navy);text-decoration:none;
  background:none;border:0;cursor:pointer;border-radius:var(--pill);
}
.lanes-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.lanes-toggle .ic{transition:transform var(--t-ui) ease-out}
.lanes-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)}
.lane-pop{
  position:absolute;right:0;top:calc(100% + 8px);width:360px;max-width:calc(100vw - 32px);padding:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.lane-pop[hidden]{display:none}
.lane-pop a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:0 16px;border-radius:var(--pill);
  font:400 15px/1.3 var(--f-sans);color:var(--navy);text-decoration:none;
}
.lane-pop a:hover{background:var(--mist-2)}
.lane-pop a span{font:400 12px/1 var(--f-mono);color:var(--slate);white-space:nowrap}
.btn-header{height:40px;padding:0 18px;font-size:15px}
.sm-only{display:none}

/* ---------- 1. hero ---------- */
/* --peek = what of the inbox shows under the hero at load: H2, note, toolbar and the first row */
.hero{
  --peek:250px;
  min-height:max(540px, calc(100vh - var(--header-h) - var(--peek)));
  min-height:max(540px, calc(100dvh - var(--header-h) - var(--peek)));
  display:flex;align-items:center;padding-block:20px 24px;
}
.hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(56px, 7vw, 120px);align-items:center}
.hero-photo{grid-column:1;grid-row:1;justify-self:start;width:max(330px, min(480px, calc((100vh - 400px) * .8)));width:max(330px, min(480px, calc((100dvh - 400px) * .8)))}
.hero-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 80%;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--mist-2);
  filter:brightness(1.06); /* lifts the cafe photo toward the mist palette; on the img, not an overlay */
}
.hero-text{grid-column:2;grid-row:1;max-width:660px}
/* intro pre-gate: html.intro is set by the inline head script (motion allowed only) and removed by main.js when the intro plays, or after 0.7s whatever happens.
   Deliberate FOUC guard, the one exception to "never hide in CSS": JS + motion only, never for no-JS or reduced motion. */
.intro .hero-text,.intro .hero-photo{opacity:0}
.eyebrow{font:600 15px/1.4 var(--f-sans);color:var(--navy);margin-bottom:20px}
.hero .h1{max-width:14ch;text-wrap:balance}
.hero-sub{font:400 20px/1.5 var(--f-sans);color:var(--slate);max-width:34ch;margin-top:24px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:36px}

/* ---------- 2. inbox (static, final state: the no-JS + reduced-motion experience) ---------- */
.inbox{padding-bottom:calc(var(--section) * .35)} /* the next section's own top padding carries the rest of the gap */
.stage{padding-top:16px}
.stage-head{margin-bottom:22px}
.note{font:400 15px/1.45 var(--f-sans);color:var(--slate);margin-top:10px}
.app{
  display:grid;grid-template-columns:42% 58%;grid-template-rows:auto 1fr;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;
}
.toolbar{
  grid-column:1 / -1;position:relative;display:flex;align-items:center;gap:32px;
  height:56px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--panel);
  font:400 13px/1 var(--f-mono);font-variant-numeric:tabular-nums;
}
.tb-title{font:600 15px/1 var(--f-sans);color:var(--navy);margin-right:8px}
.tb-label{color:var(--slate)}
.tb-num{color:var(--navy);font-weight:500;margin-left:6px}
.tb-shift{margin-left:auto}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--marigold-ink);transform-origin:left center}

.list-window{border-right:1px solid var(--line);background:var(--mist);min-width:0}
.tickets{display:block}
.t{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;
  align-content:center;min-height:var(--row-h);padding:12px 20px;
  border-bottom:1px solid var(--mist-2);background:var(--panel);min-width:0;
}
.t-tag{font:400 12px/1.2 var(--f-mono);color:var(--slate)}
.t-age{font:400 12px/1.2 var(--f-mono);color:var(--slate);text-align:right;font-variant-numeric:tabular-nums}
.t-sub{font:500 16px/1.3 var(--f-sans);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.t .chip{justify-self:end}
.t.is-active{background:var(--mist-2);box-shadow:inset 3px 0 0 var(--marigold-ink)}

.inbox-zero{padding:40px 24px 48px;text-align:center;display:flex;flex-direction:column;align-items:center}
.iz-title{
  font:400 56px/1.1 var(--f-display);color:var(--navy);
  display:inline-block;position:relative;padding-bottom:10px;
}
.iz-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--marigold-ink);transform-origin:left center;transform:scaleX(var(--u,1))}
.iz-line{font:400 15px/1.4 var(--f-mono);color:var(--navy);margin-top:18px;font-variant-numeric:tabular-nums}
.iz-small{font:400 14px/1.5 var(--f-sans);color:var(--slate);max-width:32ch;margin-top:12px}

.pane{position:relative;min-width:0;background:var(--panel)}
.pane-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pane-track{display:flex;flex-direction:column}
.opened{padding:40px 48px;border-bottom:1px solid var(--mist-2)}
.opened:last-child{border-bottom:0}
.op-sub{font:600 22px/1.3 var(--f-sans);color:var(--navy)}
.op-trans{display:flex;align-items:center;gap:8px;font:400 15px/1.4 var(--f-sans);color:var(--slate);margin-top:6px}
.op-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.op-tag{font:400 13px/1.3 var(--f-mono);color:var(--slate)}
.op-label{font:600 14px/1.4 var(--f-sans);color:var(--slate);margin-top:28px}
.op-steps{counter-reset:step;margin-top:16px;display:grid;gap:16px;max-width:44ch}
.op-steps li{counter-increment:step;display:grid;grid-template-columns:32px 1fr;gap:12px;font:400 17px/1.5 var(--f-sans);color:var(--navy)}
.op-steps li::before{
  content:counter(step);display:grid;place-items:center;width:28px;height:28px;margin-top:-1px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--mist);
  font:500 13px/1 var(--f-mono);color:var(--marigold-ink);
}

/* ---------- 2b. inbox, live (JS + motion OK): fixed app panel, pinned ---------- */
/* pinned just under the sticky header (ScrollTrigger start: "top 64px") */
.stage.is-live{
  height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
  display:flex;flex-direction:column;padding-top:16px;padding-bottom:24px;
}
.stage.is-live .stage-head{margin-bottom:22px;flex:none}
.stage.is-live .stage-body{flex:1;min-height:0;display:flex}
.app.is-live{flex:1;min-height:0;max-height:620px;width:100%;margin-inline:auto}
.app.is-live .list-window{position:relative;overflow:hidden;min-height:0}
.app.is-live .tickets{will-change:transform}
.app.is-live .t{height:var(--row-h);min-height:0}
.app.is-live .inbox-zero{position:absolute;inset:0;justify-content:center;background:transparent}
.app.is-live .pane{overflow:hidden;min-height:0}
.app.is-live .pane-track{position:absolute;left:0;right:0;top:0;height:400%;will-change:transform}
/* each card fills the pane: content centred, set larger, so it reads as an opened email */
.app.is-live .opened{height:25%;border-bottom:0;padding:48px 64px;display:flex;flex-direction:column;justify-content:center}
.app.is-live .opened > *{max-width:46ch}
.app.is-live .op-sub{font-size:30px;line-height:1.2}
.app.is-live .op-steps{max-width:46ch;gap:18px}
.app.is-live .op-steps li{font-size:19px;line-height:1.5}

/* ---------- 3. reply ---------- */
.reply-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.reply-h2{grid-column:2 / 9;margin-bottom:48px}
.mail{grid-column:2 / 8;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;z-index:1}
.mail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line)}
.mail-subject{font:600 16px/1.3 var(--f-sans)}
.mail-label{font:400 12px/1 var(--f-mono);color:var(--slate)}
.mail-body{padding:28px 28px 32px;font:400 17px/1.6 var(--f-sans)}
.mail-body p+p{margin-top:16px}
.tok{font:400 15px/1 var(--f-mono);color:var(--marigold-ink);background:var(--mist-2);border-radius:4px;padding:2px 3px;white-space:nowrap}
.mark{text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px}
.ref{font:500 11px/1 var(--f-mono);color:var(--marigold-ink);margin-left:2px;vertical-align:super}
.notes{grid-column:9 / 13;counter-reset:note;display:grid;gap:20px;align-self:stretch;position:relative}
.notes li{counter-increment:note;display:grid;grid-template-columns:28px 1fr;gap:8px;font:400 16px/1.45 var(--f-sans);color:var(--navy);max-width:30ch}
.notes li::before{content:counter(note);font:500 12px/1.9 var(--f-mono);color:var(--marigold-ink)}
.notes.is-aligned li{position:absolute;left:0;right:0}
.leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.leaders path{fill:none;stroke:var(--marigold-ink);stroke-width:1}
.leaders circle{fill:var(--marigold-ink)}
.reply-grid.has-leaders .leaders{display:block}
/* superscripts only when there are no leader lines (mobile, or before JS layout) */
.reply-grid.has-leaders .ref{display:none}

/* ---------- 4. limfae ---------- */
.limfae-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.limfae-text{grid-column:2 / 7;padding-top:72px}
.limfae-text .body{margin-top:24px}
.limfae-text .list-label{margin-top:40px}
.dash-list{margin-top:14px;display:grid;gap:12px}
.dash-list li{position:relative;padding-left:26px;font:400 17px/1.5 var(--f-sans)}
.dash-list li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:6px;border-radius:var(--pill);background:var(--marigold-ink)}
.phone{grid-column:8 / 12;justify-self:center;width:100%;max-width:280px}
.phone-label{display:block;font:400 12px/1 var(--f-mono);color:var(--slate);margin-bottom:10px}
.phone-frame{padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.phone-frame img{width:100%;aspect-ratio:390/795;/* keeps the store headline and the full "Odkryj Limfae" button */object-fit:cover;object-position:top;border-radius:6px}
.phone figcaption{font:400 14px/1.45 var(--f-sans);color:var(--slate);margin-top:14px}
.small-link{font-size:14px;margin-top:8px}

/* ---------- 5. day one ---------- */
.dayone-col{max-width:calc(720px + var(--side) * 2)}
.dayone .h2{margin-bottom:36px}
.thread{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.thread-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--mist-2)}
.thread-title{font:600 17px/1.3 var(--f-sans)}
.msg{display:grid;grid-template-columns:128px 1fr;gap:20px;padding:24px 28px}
.msg+.msg{border-top:1px solid var(--mist-2)}
.msg-label{font:400 13px/1.6 var(--f-mono);color:var(--slate);padding-top:3px}
.msg-who{display:flex;align-items:center;gap:10px;font:500 14px/1 var(--f-sans);color:var(--navy);padding-top:0;align-self:start}
.msg-who img{width:32px;height:32px;border-radius:var(--pill);object-fit:cover;object-position:50% 22%;border:1px solid var(--line)}
.msg-text{font:400 18px/1.55 var(--f-sans)}
.quote blockquote p{font:italic 400 28px/1.2 var(--f-display);color:var(--navy);padding-bottom:.1em}
.quote figcaption{margin-top:14px}
.quote cite{font:400 15px/1.4 var(--f-sans);font-style:normal;color:var(--slate)}

/* ---------- 6. experience ---------- */
.exp-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.exp-wrap .h2{grid-column:2 / 9;margin-bottom:40px}
.jobs{grid-column:2 / 12;border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:4px 24px;padding:24px 0}
.job-date{font:400 14px/1.6 var(--f-mono);color:var(--slate);font-variant-numeric:tabular-nums}
.job-role{font:600 18px/1.4 var(--f-sans)}
.job-co{font-weight:400}
.job-line{font:400 16px/1.5 var(--f-sans);color:var(--slate);margin-top:4px}
.job-type{font:400 13px/1.9 var(--f-mono);color:var(--slate);text-align:right}
.facts{grid-column:2 / 12;display:grid;grid-template-columns:5fr 6fr;gap:var(--gutter);margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.tools{margin-top:14px;display:grid;gap:10px}
.tools li{font:400 17px/1.45 var(--f-sans)}
.proofs{margin-top:14px;display:grid;gap:20px}
.proof{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:20px;align-items:center}
.proof-img{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.proof-img img{width:100%;border-radius:4px}
/* English test: crop to the result lines so "C2" is legible at column width */
/* window = source px x0..390, y47..109 ("Congratulations ... C2 (advanced/mastery)" + the big "C2"), below the grey title strip.
   White frame so the crop edge disappears into the screenshot's own white. */
.proof-img--en{background:#fff;padding:14px 16px}
.proof-img--en .crop{position:relative;aspect-ratio:390/62;overflow:hidden;background:#fff}
.proof-img--en img{position:absolute;left:0;top:-75.81%;width:146.41%;max-width:none;height:auto;border-radius:0}
.proof figcaption{font:500 16px/1.4 var(--f-sans)}
.setup-label{margin-top:36px}
.setup{margin-top:10px;font:400 17px/1.5 var(--f-sans);max-width:44ch}

/* ---------- 7. contact + footer ---------- */
.contact-col{max-width:calc(640px + var(--side) * 2);text-align:center;display:flex;flex-direction:column;align-items:center}
.contact-h2{font-size:56px;text-wrap:balance;max-width:14ch}
.contact-body{font:400 18px/1.55 var(--f-sans);color:var(--slate);margin-top:20px;max-width:40ch;text-wrap:balance}
.contact-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 24px;margin-top:36px}
.mail-plain{font:400 16px/1.3 var(--f-mono);color:var(--navy);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.mail-plain:hover{text-decoration-color:var(--navy)}
.contact-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;margin-top:28px}

.site-footer{border-top:1px solid var(--line);padding-block:48px}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px}
.footer-id{grid-column:1 / 6;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.copy{font:400 14px/1.4 var(--f-sans);color:var(--slate)}
.footer-lanes{grid-column:7 / 13}
#lanes{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:12px}
#lanes a{font:400 16px/1.4 var(--f-sans);color:var(--navy);text-decoration:none;padding:6px 0}
#lanes a:hover{text-decoration:underline;text-underline-offset:4px}
#lanes a span{display:block;font:400 12px/1.4 var(--f-mono);color:var(--slate)}

/* ---------- responsive ---------- */
@media (min-width:1200px){
  :root{--h1:72px}
}

/* static inbox (no JS / reduced motion), desktop: the opened cards ride beside the long list */
@media (min-width:900px){
  .app:not(.is-live){overflow:clip} /* hidden would make .app the sticky scroller; clip keeps the rounded corners without it */
  .app:not(.is-live) .pane-track{position:sticky;top:calc(var(--header-h) + 24px)}
  .app:not(.is-live) .t{min-height:60px;padding-block:8px}
  /* live: the app caps at 620px, so on tall screens cap the pinned stage too (no empty band under the panel, smaller gap after the pin) */
  .stage.is-live{max-height:768px} /* 16 top + ~104 head + 620 app + 24 bottom */
}

@media (max-width:1100px){
  .reply-h2,.mail{grid-column:1 / 8}
  .notes{grid-column:9 / 13}
  .limfae-text{grid-column:1 / 7}
  .exp-wrap .h2,.jobs,.facts{grid-column:1 / 13}
}

@media (max-width:899px){
  :root{--h1:40px;--h2:32px;--body:17px;--side:16px;--section:72px;--row-h:64px}
  .lg-only{display:none}
  .sm-only{display:inline-flex}
  .btn-header{width:40px;padding:0}
  .header-actions{gap:8px}

  .hero{min-height:0;padding-block:20px 16px;display:block}
  .hero-grid{grid-template-columns:1fr;row-gap:32px}
  .hero-text,.hero-photo{grid-column:1;grid-row:auto}
  .hero-photo{width:100%;min-width:0}
  .hero-photo img{aspect-ratio:16/10;object-position:50% 52%} /* eyes at about 38% of the frame, the drink stays in */
  .hero-sub{font-size:17px}
  .hero-actions{margin-top:28px}

  .stage{padding-top:8px}
  .app{grid-template-columns:1fr;grid-template-rows:auto}
  .list-window{border-right:0}
  .toolbar{gap:20px;padding:0 16px}
  .tb-title{margin-right:0}
  .t{padding:10px 16px;column-gap:12px}
  .t-sub{font-size:15px}
  .chip{min-width:86px}
  .pane{border-top:1px solid var(--line)}
  .pane-title{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;font:600 15px/1.4 var(--f-sans);color:var(--slate);padding:24px 16px 0}
  .opened{padding:24px 16px}
  .op-meta{flex-wrap:wrap}
  .iz-title{font-size:40px}

  /* live on mobile: list only inside the pin; the pane is moved out by JS into .pane-slot */
  .stage.is-live{padding-top:12px;padding-bottom:16px}
  .stage.is-live .stage-head{margin-bottom:16px}
  .app.is-live{grid-template-rows:auto 1fr;max-height:none}
  .pane-slot .pane{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  /* compact cards below the pin: less scroll at 390 */
  .pane-slot .opened{padding:18px 16px}
  .pane-slot .op-sub{font-size:19px}
  .pane-slot .op-meta{margin-top:8px;padding-bottom:12px;border-bottom:0}
  .pane-slot .op-label{margin-top:4px;font-size:13px}
  .pane-slot .op-steps{margin-top:8px;gap:8px}
  .pane-slot .op-steps li{font-size:16px;line-height:1.45;grid-template-columns:26px 1fr;gap:10px}
  .pane-slot .op-steps li::before{width:24px;height:24px;font-size:12px}

  .reply-grid,.limfae-grid,.exp-wrap,.footer-grid{grid-template-columns:1fr}
  .reply-h2,.mail,.notes,.limfae-text,.phone,.exp-wrap .h2,.jobs,.facts,.footer-id,.footer-lanes{grid-column:1}
  .reply-h2{margin-bottom:28px}
  .mail-head{padding:14px 18px}
  .mail-body{padding:20px 18px 24px;font-size:16px}
  .tok{font-size:14px}
  .notes{margin-top:28px;gap:14px}
  .limfae-text{padding-top:0}
  .limfae-text .list-label{margin-top:28px}
  .phone{width:78%;margin-top:48px}

  .msg{grid-template-columns:1fr;gap:8px;padding:20px 18px}
  .thread-head{padding:14px 18px}
  .quote blockquote p{font-size:22px}

  .job{grid-template-columns:1fr auto;padding:20px 0}
  .job-date{grid-column:1;grid-row:1}
  .job-type{grid-column:2;grid-row:1}
  .job-main{grid-column:1 / -1}
  .facts{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .proof{grid-template-columns:1fr;gap:10px}

  .contact-h2{font-size:36px}
  #lanes{grid-template-columns:1fr}
}

@media (max-width:420px){
  .tb-answered{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}