@font-face{font-family:Euclid;src:url("../assets/fonts/EuclidCircularA-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Euclid;src:url("../assets/fonts/EuclidCircularA-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
:root{--accent:#fb3e62;--pink:#ffeaef;--bg:#dfe4e5;--soft:#f0f2f3;--ink:#000;--text:#404040;--muted:rgba(64,64,64,.64);--radius:24px;--small-radius:16px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Euclid,Arial,sans-serif;color:var(--ink);font-size:18px;line-height:24px;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0}
h1,h2,h3,strong,b{font-weight:500}
img{display:block;max-width:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #a0153b;outline-offset:4px}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;padding:12px 20px;background:white;border-radius:12px;z-index:30}
.page{width:100%;max-width:1600px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.surface{background:white;border-radius:var(--radius)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--small-radius);min-height:48px;line-height:24px;transition:background .18s ease,transform .18s ease,box-shadow .18s ease;color:inherit;text-align:center}
.button img,.contacts img{flex:none}
.button-primary{background:var(--accent);color:#fff}
.button-neutral{background:var(--bg);color:var(--ink)}
.button-soft{background:var(--pink);color:var(--accent)}
.button:active{transform:scale(.98)}
.hero{height:784px;position:relative;overflow:hidden;padding:24px;isolation:isolate}
.intro{width:672px;max-width:calc(100% - 460px);position:relative;z-index:2}
h1{font-size:72px;line-height:76px;letter-spacing:0}
.intro p{color:var(--text);margin-top:24px;line-height:28px}
.intro strong{color:var(--accent)}
.hero-art{position:absolute;top:284px;left:0;width:1141px;height:567px;overflow:hidden;z-index:-1}
.hero-art img{width:100.13%;height:100.77%;position:absolute;top:0;left:-.06%}
.relocation{position:absolute;top:24px;right:24px;width:413px;padding:24px;display:flex;flex-direction:column;gap:24px;border-radius:24px;background:var(--soft);color:var(--text);transition:opacity .2s,transform .2s}
.relocation-actions{display:flex;flex-direction:column;gap:12px}
.relocation .button{width:100%;padding-inline:18px}
.relocation.is-leaving{opacity:0;transform:translateY(-8px);pointer-events:none}
.contacts{position:absolute;right:24px;bottom:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;z-index:2}
.contact-link-icon{display:block;flex:none;width:16px;height:16px;background-color:currentColor;mask:url("../assets/images/55a64.svg") center / contain no-repeat;-webkit-mask:url("../assets/images/55a64.svg") center / contain no-repeat}
.contacts a{display:inline-flex;align-items:center;gap:8px;max-width:100%;overflow-wrap:anywhere;transition:color .15s}
.achievements{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;position:relative}
.period-sidebar{display:flex;flex-direction:column;gap:8px}
.period-stack{display:flex;flex-direction:column;align-items:center;isolation:isolate}
.period-tab{position:relative;display:flex;justify-content:center;align-items:flex-end;background:white;color:var(--text);height:48px;padding:16px 12px 8px;border-radius:0 0 24px 24px;box-shadow:0 1px 4px #0000000a,0 4px 8px #0000000a;margin-top:-8px;width:calc(100% - var(--stack-distance)*16px);z-index:calc(5 - var(--stack-distance));transition:background .18s,transform .18s}
.period-tab.selected{background:var(--pink);color:var(--accent);border-radius:24px;height:253px;padding:0;overflow:hidden;box-shadow:none}
.period-tab:first-child{margin-top:0}
.period-tab.before-selected{border-radius:24px 24px 0 0;align-items:flex-start;padding:8px 12px 16px}
.period-title{position:absolute;left:24px;top:24px;width:300px;text-align:left;font-size:44px;line-height:48px;font-weight:500}
.period-years{position:absolute;left:102px;top:140px;width:248px;height:139px}
.year{position:absolute;top:0;width:139px;height:139px;display:grid;place-items:center;font-size:28px;line-height:34px;font-weight:500}
.year img{position:absolute;inset:0;z-index:-1}
.year-start{left:0;z-index:2;color:var(--accent)}.year-end{left:109px;color:white;z-index:1}
.selected .period-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.period-tab:focus-visible{outline-offset:-4px}
.resume-button{width:100%}
.achievement-panel{padding:8px;min-width:0;min-height:469px}
.result-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:100%}
.result-card{position:relative;min-height:453px;background:var(--pink);border-radius:16px;overflow:hidden;isolation:isolate}
.step{position:absolute;top:16px;left:16px;display:grid;place-items:center;width:40px;height:40px;background:white;color:var(--accent);border-radius:50%;font-weight:500}
.result-description{position:relative;margin:68px 16px 0;font-weight:500;color:var(--accent);z-index:2}
.term{display:inline;white-space:normal;text-align:inherit;cursor:pointer;touch-action:manipulation;font:inherit;color:inherit;background:transparent;padding:0;text-decoration:underline wavy;text-decoration-thickness:1.4px;text-underline-offset:4px}
.result-art{position:absolute;pointer-events:none;z-index:-1}
.apple-art{top:245px;left:calc(50% - 145px)}
.bread-art,.watermelon-art{bottom:0;left:calc(50% - 126.5px);width:253px;height:453px}
.bread-shape{position:absolute;transform:matrix(.985931,-.167272,.180320,.983630,-10.487,331.304);transform-origin:0 0}
.bread-shape img{position:absolute;left:-3px;top:-3px}
.melon-stem,.melon-body{position:absolute;transform:rotate(31.362173deg);transform-origin:0 0}
.melon-stem{left:219.021px;top:214.637px}
.melon-body{left:111.603px;top:209.417px}
.melon-stem>img,.melon-body>img{position:absolute;left:-3px;top:-3px}
.melon-mask{position:absolute;width:226.756px;height:296.199px;mask:url("../assets/images/cc157.svg") 0 0 / 226.756px 296.199px no-repeat;-webkit-mask:url("../assets/images/cc157.svg") 0 0 / 226.756px 296.199px no-repeat}
.melon-mask img{position:absolute;left:28.91px;top:-7.42px}
.tomato-art{top:201px;left:calc(50% - 168px)}
.result-metric{position:absolute;bottom:16px;left:16px;right:16px;color:white}
.metric{font-size:44px;line-height:48px;font-weight:500;white-space:nowrap}
.metric-caption{font-size:14px;line-height:20px;margin-top:4px;overflow-wrap:anywhere}
.bread-card .result-metric{color:black;text-align:right;left:50%;right:auto;width:221px;max-width:calc(100% - 32px);transform:translateX(-50%)}
.watermelon-card .result-metric,.tomato-card .result-metric{text-align:center}
.watermelon-card .metric-caption{margin-top:0}
.empty-period{min-height:453px;height:100%;padding:40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:var(--pink);border-radius:16px;gap:16px}
.empty-year{color:var(--accent);font-size:18px}
.empty-period h2{font-size:40px;line-height:44px}
.empty-period p{color:var(--text)}
.empty-period .button{background:white;margin-top:8px}
.cases{padding:24px;display:flex;flex-direction:column;gap:24px}
.cases h2{font-size:44px;line-height:48px}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case-card{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-width:0;border-radius:16px;transition:transform .2s}
.case-cover{width:100%;height:440px;background:var(--soft);border-radius:16px;position:relative;overflow:hidden;transition:box-shadow .2s}
.case-description{margin-top:-8px;color:var(--text);width:100%;display:flex;flex-direction:column;gap:8px}
.case-description h3{font-size:18px;line-height:24px;font-weight:400;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.reading-time{color:var(--muted)}
.registration-button{position:absolute;left:0;top:34.77%;width:100%;height:10%;overflow:hidden;box-shadow:1px 1px 8px #0000000a,0 4px 24px #00000029}
.registration-button img{width:100%;height:107.14%;position:absolute;top:-.63%}
.registration-copy{position:absolute;width:76.92%;height:auto;left:11.54%;top:48.41%}
.cover-poc img{position:absolute;width:72.75%;height:auto;left:13.625%;top:27.73%;box-shadow:1px 1px 8px #0000000a,0 4px 24px #00000029}
.cover-warcraft img{position:absolute;left:50%;height:auto;object-fit:contain;transform:translateX(-50%);pointer-events:none}
.cover-warcraft .warcraft-gift{width:68%;top:7%}
.cover-warcraft .warcraft-gift-button{width:50%;top:67%}
.offer{display:flex;min-height:110px;overflow:hidden;position:relative}
.offer-visual{width:656px;flex:none;min-height:110px;position:relative;overflow:hidden;isolation:isolate;border-radius:0 24px 24px 0;background:linear-gradient(173.51deg,#ffbdcd 8.8279%,#ff5181 69.527%)}
.offer-decoration{position:absolute;inset:0;z-index:-1}
.star{position:absolute;transform:rotate(-26.63deg)}
.star-4{left:174px;top:-32px}.star-3{left:187.6px;top:-18.6px}.star-2{left:199.7px;top:-6.5px}.star-1{left:215px;top:11px}
.offer-tail{position:absolute;top:0;left:415px}
.discount{display:flex;gap:16px;align-items:center;position:absolute;top:26px;left:24px;white-space:nowrap}
.discount strong{background:#b9003f;color:white;font-size:28px;line-height:34px;padding:12px;border-radius:16px;transform:rotate(-13.02deg);margin-inline:0 2px}
.countdown{position:absolute;left:452px;top:35px;display:flex;gap:4px;isolation:isolate;font-variant-numeric:tabular-nums}
.time-unit{position:relative;display:flex;flex-direction:column;align-items:center}
.time-unit b{display:grid;place-items:center;width:40px;height:40px;background:var(--pink);border-radius:50%;font-size:18px;line-height:24px;color:var(--accent)}
.day-unit{margin-right:8px}
.time-label{position:absolute;top:41px;font-size:10px;line-height:12px;color:#721c37}
.time-join{position:absolute;top:8px;z-index:-1}.join-1{left:84px}.join-2{left:128px}
.offer-content{flex:1;min-width:0;padding:24px 32px;display:flex;align-items:center;position:relative;color:var(--text)}
.offer-content p{transition:padding-right .2s}
.offer-cta{position:absolute;right:24px;opacity:0;transform:translateX(16px);pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
.offer-cta img{display:none}
.offer:hover .offer-cta,.offer:focus-within .offer-cta,.offer.is-expired .offer-cta{opacity:1;transform:none;pointer-events:auto}
.offer:hover .offer-content p,.offer:focus-within .offer-content p,.offer.is-expired .offer-content p{padding-right:220px}
.is-expired .discount{opacity:.5}
footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);padding-top:16px;min-height:40px}
.info-dialog{border:0;border-radius:24px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:32px;background:white;color:var(--ink);box-shadow:0 24px 80px #0003;overflow:auto}
.info-dialog::backdrop{background:#20272d66;backdrop-filter:blur(5px)}
.info-dialog[open]{animation:dialog-in .16s ease-out}
.dialog-close{position:absolute;top:12px;right:12px;width:40px;height:40px;background:var(--soft);border-radius:50%;font-size:30px;line-height:1;display:grid;place-items:center}
.dialog-eyebrow{font-size:14px;color:var(--accent);margin:8px 24px 12px 0}
.info-dialog h2{font-size:30px;line-height:34px;padding-right:16px}
#dialog-copy{margin:16px 0 24px;color:var(--text);line-height:28px}
.no-js-note:empty,.toast:empty{display:none}
.no-js-note{padding:16px;text-align:center}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
 .button-primary:hover{background:#e82b50}
 .button-neutral:hover{background:#d1d8da}
 .button-soft:hover,.case-card:hover .button-soft{background:#ffd7e1}
 .contacts a:hover{color:var(--accent)}
 .case-card:hover{transform:translateY(-3px)}
 .case-card:hover .case-cover{box-shadow:0 8px 20px #222b3510}
 .period-tab:not(.selected):hover{background:#fff5f7;transform:translateY(2px)}
 .term:hover{color:#b9003f;text-decoration:none}
}
@media(min-width:1280px) and (max-width:1399px){
 .intro{max-width:calc(100% - 440px)}
 .intro h1{font-size:64px;line-height:68px}
 .achievements{grid-template-columns:300px minmax(0,1fr)}
 .period-title{width:270px;font-size:40px;line-height:44px}
 .period-years{left:72px}
 .result-card{min-height:493px}
 .result-art{margin-top:40px}
 .offer-visual{width:620px}
 .countdown{left:425px}
 .discount{gap:12px}
 .offer:hover .offer-content p,.offer:focus-within .offer-content p,.offer.is-expired .offer-content p{padding-right:0}
 .offer-content{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:16px 24px}
 .offer-cta{position:static;opacity:1;transform:none;pointer-events:auto;padding:8px 16px;min-height:40px}
}
@media(max-width:1279px){
 .hero{height:auto;min-height:740px;display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:24px;row-gap:24px;padding:24px}
 .intro{max-width:none;width:auto;grid-column:1}
 h1{font-size:56px;line-height:60px}
 .intro p{margin-top:20px}
 .relocation{position:static;grid-column:2;grid-row:1;align-self:start;width:auto;padding:20px}
 .relocation .button{padding-inline:12px}
 .hero-art{position:relative;top:auto;left:-24px;width:calc(100% + 48px);height:380px;grid-column:1 / -1;grid-row:2;align-self:end}
 .hero-art img{position:static;width:780px;height:auto;max-width:100%;margin-top:0}
 .contacts{position:static;grid-column:1 / -1;grid-row:3;flex-direction:row;justify-content:flex-end;flex-wrap:wrap;gap:12px 24px}
 .achievements{grid-template-columns:minmax(0,1fr)}
 .period-sidebar{gap:16px}
 .period-stack{flex-direction:row;gap:8px;flex-wrap:wrap;justify-content:flex-start}
 .period-tab,.period-tab.selected,.period-tab.before-selected{width:auto;height:auto;min-height:48px;padding:12px 18px;border-radius:16px;margin:0;box-shadow:none;overflow:visible}
 .period-title,.period-years{display:none}
 .selected .period-label{position:static;clip-path:none;width:auto;height:auto;overflow:visible;font-weight:500}
 .resume-button{width:auto;align-self:flex-start}
 .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .result-card{min-height:420px}
 .result-description{max-width:300px}
 .result-art{transform:scale(1.15);transform-origin:bottom center}
 .apple-art{top:216px}.bread-art,.watermelon-art{top:auto}.tomato-art{top:182px}
 .result-metric{max-width:270px}
 .apple-card .result-metric{left:0;right:0;margin:auto;max-width:240px;text-align:center}
 .watermelon-card .result-metric,.tomato-card .result-metric{margin:auto}
 .cases .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
 .case-description h3{-webkit-line-clamp:unset}
 .case-cover{height:auto;aspect-ratio:1}
 .offer{flex-direction:column}
 .offer-visual{width:100%;height:110px;border-radius:24px}
 .offer-decoration{left:50%;width:656px;transform:translateX(-50%)}
 .discount{left:calc(50% - 304px)}
 .countdown{left:calc(50% + 124px)}
 .offer-content{padding:20px 24px;gap:24px}
 .offer-content p{padding-right:0!important}
 .offer-cta{position:static;opacity:1;transform:none;pointer-events:auto;flex:none}
}
@media(max-width:767px){
 .page{padding:12px;gap:12px}
 .hero{display:flex;flex-direction:column;padding:20px;gap:24px;min-height:0}
 .intro{order:0}
 h1{font-size:40px;line-height:44px;max-width:470px}
 .intro p{font-size:17px;line-height:26px;margin-top:20px}
 .hero-art{order:1;left:0;width:calc(100% + 40px);height:auto;aspect-ratio:1.82;align-self:center;margin-top:-8px;margin-bottom:-16px;flex:none}
 .hero-art img{width:100%;max-width:none;height:auto}
 .contacts{order:2;flex-direction:column;align-items:flex-start;gap:4px}
 .contacts a{min-height:40px;font-size:17px}
 .relocation{order:3;padding:20px;margin:0;gap:16px}
 .relocation .button{font-size:16px;line-height:22px;padding:12px}
 .achievements{gap:12px}
 .period-sidebar{gap:12px}
 .period-stack{gap:8px}
 .period-tab,.period-tab.selected,.period-tab.before-selected{font-size:15px;padding:10px 12px;min-height:44px;border-radius:12px}
 .resume-button{width:100%;font-size:17px}
 .result-grid{grid-template-columns:minmax(0,1fr)}
 .result-card{min-height:410px}
 .result-description{font-size:18px;line-height:24px;max-width:280px}
 .result-art{transform:scale(1.12)}
 .apple-art{top:203px}.bread-art,.watermelon-art{top:auto}.tomato-art{top:174px}
 .result-metric{max-width:none}
 .watermelon-card .result-metric,.tomato-card .result-metric{max-width:270px}
 .apple-card .result-metric{left:0;right:0;margin:auto;max-width:240px;text-align:center}
 .cases{padding:20px;gap:20px}
 .cases h2{font-size:30px;line-height:34px}
 .cases .case-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .case-description h3,.reading-time,.case-card .button{font-size:17px;line-height:24px}
 .case-card .button{width:100%}
 .offer-visual{height:180px}
 .offer-decoration{width:656px;left:50%;height:180px}
 .offer-tail{transform:scaleY(1.7);transform-origin:top}
 .discount{left:50%;top:23px;transform:translateX(-50%);gap:12px;font-size:16px}
 .discount strong{font-size:24px;padding:10px;line-height:30px}
 .countdown{top:108px;left:50%;transform:translateX(-50%)}
 .offer-content{padding:20px;flex-direction:column;gap:16px;align-items:stretch}
 .offer-content p{font-size:17px;line-height:26px}
 footer{font-size:14px;line-height:20px;padding-top:8px;align-items:flex-end}
 footer p:first-child{max-width:230px}
 .empty-period{padding:24px;min-height:350px}
 .empty-period h2{font-size:30px;line-height:34px}
 .empty-period .button{font-size:16px;padding-inline:16px}
 .info-dialog{padding:24px}
 .info-dialog h2{font-size:26px;line-height:30px}
}
@media(max-width:359px){
 h1{font-size:36px;line-height:40px}
 .hero,.cases{padding:16px}
 .hero-art{width:calc(100% + 32px)}
 .discount{gap:8px;font-size:14px}
 .discount strong{font-size:22px}
 .relocation{padding:16px}
}
@media(hover:none){
 .offer-cta{opacity:1;transform:none;pointer-events:auto}
 @media(min-width:1400px){.offer-content p{padding-right:220px}}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .button:active,.case-card:hover{transform:none}
}

/* Figma 14:327. Kept outside clipped achievement cards. */
.term-popover{position:fixed;z-index:100;width:min(428px,calc(100vw - 24px));filter:drop-shadow(0 8px 12px #0000001a) drop-shadow(0 2px 1px #0000001a);text-align:left}
.term-popover-body{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:16px;background:white;color:var(--text);font-size:14px;line-height:20px;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.term-popover-body>img{flex:none;align-self:flex-start}
.term-popover-title{color:var(--accent)}
.term-popover-arrow{position:absolute;left:var(--arrow-x);top:-26px;transform:translateX(-50%);pointer-events:none}
.term-popover[data-placement="top"] .term-popover-arrow{top:auto;bottom:-26px;transform:translateX(-50%) rotate(180deg)}

/* Keep the storyboard layers mounted so their contents can move inside the card. */
.period-tab{overflow:hidden;flex-shrink:0}
.period-title,.period-years{opacity:0;pointer-events:none}
.period-tab.selected .period-title,.period-tab.selected .period-years{opacity:1}
.period-label{position:absolute;inset:0;display:grid;place-items:center}
.selected .period-label{width:auto;height:auto;clip-path:none;opacity:0}
.period-stack.is-switching .period-tab{transition:none;transform:none}
.achievement-panel{position:relative}
.achievement-panel.is-switching{overflow:hidden;isolation:isolate}
.achievement-outgoing{position:absolute;left:8px;top:8px;pointer-events:none;z-index:2}
@media(max-width:1279px){
 .period-label,.selected .period-label{position:static;display:block;opacity:1}
}

/* Location states from Figma 14:976 and 14:1154. */
.hero-location{position:absolute;top:24px;right:24px;width:264px;height:24px;max-width:100%;color:var(--text);font-size:18px;line-height:24px}
.hero-location:focus{outline:none}
.hero-location.has-route{height:117px}
.location-origin,.location-destination{display:flex;align-items:center;gap:8px;white-space:nowrap}
.location-origin{margin-left:16px}
.location-origin img,.location-destination img{flex:none}
.location-destination{position:absolute;left:100px;top:93px;color:var(--accent)}
.location-route{position:absolute;left:0;top:22px}
@media(max-width:1279px){
 .hero-location{position:relative;top:auto;right:auto;grid-column:2;grid-row:1;justify-self:end;align-self:start}
}
@media(max-width:767px){
 .hero-location{order:3;align-self:flex-end;font-size:16px}
}

/* Mobile composition, October 13 reference. Desktop geometry stays unchanged. */
.mobile-period-heading{display:none}
.contact-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){
 .page{padding:16px;gap:16px}
 .hero{padding:24px;gap:24px}
 .intro{width:100%;max-width:none}
 .hero-art{width:calc(100% + 48px);margin:0 0 -24px;aspect-ratio:2}
 .relocation{position:static;order:0;width:100%;padding:24px;gap:24px;font-size:18px;line-height:24px}
 .relocation .button{font-size:17px;line-height:24px;padding:12px 8px}
 .hero-location{position:relative;order:0;align-self:stretch;width:100%;height:auto;min-height:64px;padding:16px;background:white;border-radius:24px;font-size:17px;line-height:24px}
 .hero-location.has-route{height:96px}
 .location-origin{margin-left:8px}
 .location-destination{left:auto;right:24px;top:52px}
 .location-route{left:12px;top:36px;transform:none;transform-origin:top left}
 .contacts{position:static;order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;background:white;border-radius:24px;overflow:hidden}
 .contacts a{min-width:0;max-width:none;min-height:48px;justify-content:center;padding:12px;font-size:17px;line-height:24px;white-space:nowrap;overflow:hidden}
 .contacts a:nth-child(odd){border-right:1px solid var(--soft)}
 .contacts a:nth-child(-n+2){border-bottom:1px solid var(--soft)}
 .achievements{gap:16px}
 .period-sidebar{background:var(--pink);padding:16px;border-radius:24px;gap:16px}
 .mobile-period-heading{display:block;color:var(--accent);font-size:30px;line-height:34px}
 .period-stack{gap:8px;justify-content:flex-start}
 .period-tab,.period-tab.selected,.period-tab.before-selected{background:white;color:var(--accent);font-size:17px;line-height:24px;padding:6px 8px;min-height:36px;border-radius:12px}
 .period-tab.selected{background:var(--accent);color:white}
 .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .result-card{min-height:453px}
 .step{top:8px;left:8px}
 .result-description{margin:60px 8px 0;font-size:17px;line-height:26px;max-width:none}
 .result-art{transform:scale(1.12);transform-origin:bottom center}
 .apple-art{top:auto;bottom:-48px}
 .tomato-art{top:auto;bottom:-30px;transform:scale(1.05)}
 .bread-art,.watermelon-art{top:auto;bottom:0}
 .bread-art{transform:scale(1.4)}
 .watermelon-art{transform:scale(1.12)}
 .result-card .result-metric{left:8px;right:8px;bottom:8px;width:auto;max-width:none;margin:0;transform:none;text-align:left}
 .metric{font-size:30px;line-height:34px}
 .metric-caption{font-size:14px;line-height:20px}
 .resume-button{grid-column:1/-1}
}
@media(max-width:374px){
 .contacts a{font-size:14px;padding:12px 8px}
 .relocation{padding:16px}
 .relocation .button{font-size:15px}
 .result-card{min-height:500px}
 .result-description{font-size:16px;line-height:24px}
 .period-tab,.period-tab.selected,.period-tab.before-selected{font-size:15px;padding-inline:8px}
}

/* Inline vector keeps independent motion layers and an accessible title. */
.hero-art .hero-character{display:block;width:100.13%;height:100.77%;position:absolute;top:0;left:-.06%;overflow:visible}
@media(max-width:1279px){.hero-art .hero-character{position:static;width:780px;max-width:100%;height:auto}}
@media(max-width:767px){.hero-art .hero-character{width:100%;max-width:none;height:auto}}

/* Tablet retains the desktop composition with a narrower sidebar and 2×2 results. */
@media(min-width:768px) and (max-width:1279px){
 .hero{display:block;height:680px;min-height:0;padding:24px}
 .intro{width:calc(100% - 344px);max-width:672px}
 .intro h1{font-size:56px;line-height:60px}
 .intro p{margin-top:24px;font-size:18px;line-height:28px}
 .relocation{position:absolute;top:24px;right:24px;width:304px;padding:20px;gap:20px;font-size:17px;line-height:24px}
 .relocation .button{font-size:16px;line-height:22px;padding:12px 8px}
 .hero-location{position:absolute;top:24px;right:24px}
 .hero-art{position:absolute;left:0;top:auto;bottom:-40px;width:calc(100% - 224px);height:auto;aspect-ratio:2;overflow:hidden}
 .hero-art .hero-character,.hero-art img{position:static;width:100%;max-width:none;height:auto}
 .contacts{position:absolute;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex-wrap:nowrap;font-size:17px;line-height:24px}
 .achievements{grid-template-columns:280px minmax(0,1fr)}
 .period-sidebar{gap:8px;align-self:start}
 .period-stack{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:0}
 .period-tab,.period-tab.selected,.period-tab.before-selected{width:calc(100% - var(--stack-distance)*16px);height:48px;min-height:0;margin-top:-8px;padding:16px 12px 8px;border-radius:0 0 24px 24px;overflow:hidden;box-shadow:0 1px 4px #0000000a,0 4px 8px #0000000a}
 .period-tab:first-child{margin-top:0}
 .period-tab.before-selected{border-radius:24px 24px 0 0;align-items:flex-start;padding:8px 12px 16px}
 .period-tab.selected{width:100%;height:253px;padding:0;border-radius:24px;box-shadow:none}
 .period-title{display:block;left:20px;top:24px;width:240px;font-size:34px;line-height:38px}
 .period-years{display:block;left:42px}
 .period-label,.selected .period-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:400}
 .selected .period-label{opacity:0}
 .resume-button{width:100%;font-size:16px;padding-inline:12px}
 .result-card{min-height:453px}
 .result-description{font-size:17px;line-height:24px}
 .cases .case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media(min-width:768px) and (max-width:1023px){
 .intro{width:calc(100% - 292px)}
 .intro h1{font-size:44px;line-height:48px}
 .intro p{font-size:17px;line-height:26px}
 .relocation{width:268px;padding:16px;font-size:16px}
 .relocation .button{font-size:15px}
 .hero-location{font-size:16px;width:248px}
 .hero-art{width:calc(100% - 172px);bottom:0}
 .contacts{font-size:16px}
 .achievements{grid-template-columns:240px minmax(0,1fr)}
 .period-title{left:16px;width:208px;font-size:30px;line-height:34px}
 .period-years{left:12px}
 .period-tab{font-size:17px}
 .resume-button{font-size:15px;padding-inline:8px}
 .result-card{min-height:469px}
 .result-description{margin-inline:12px;font-size:16px;line-height:24px}
 .result-metric{left:12px;right:12px}
 .metric{font-size:36px;line-height:40px}
 .cases .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px) and (max-width:1279px){
 .hero{height:720px}
 .intro h1{max-width:560px}
}

/* Figma 34:2304 / 34:2533 / 38:2605: fixed offer and mobile top sheet. */
.floating-offer{position:fixed;inset:0 0 auto;z-index:50;height:64px;background:#eaf2ff;color:#05f;transform:translateY(-100%);visibility:hidden;transition:transform .25s ease,visibility .25s;font-weight:500}
.floating-offer.is-visible{transform:translateY(0);visibility:visible}
.banner-desktop{height:64px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.banner-copy{height:64px;position:relative;flex:1;min-width:0;overflow:hidden}
.banner-default,.banner-hover{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;gap:12px;white-space:nowrap;transition:transform 400ms var(--banner-quick),opacity 400ms var(--banner-quick)}
.banner-default strong,.banner-mobile strong{background:#05f;color:white;border-radius:16px;padding:8px;font-size:18px;line-height:28px;font-weight:500}
.banner-hover{gap:24px;transform:translateY(64px);opacity:0}
.banner-cta{display:flex;align-items:center;justify-content:center;background:#05f;color:white;border-radius:16px;padding:8px 16px;font-weight:400;font-size:18px;line-height:24px;white-space:nowrap}
.banner-cta:hover{background:#0045d1}
.floating-offer:focus-within .banner-default{transform:translateY(-64px);opacity:0}
.floating-offer:focus-within .banner-hover{transform:translateY(0);opacity:1}
@media(hover:hover){.floating-offer:hover .banner-default{transform:translateY(-64px);opacity:0}.floating-offer:hover .banner-hover{transform:translateY(0);opacity:1}}
.banner-timer{position:relative;display:flex;align-items:center;gap:4px;flex:none;font-variant-numeric:tabular-nums;color:#3e96fb;font-size:18px;line-height:24px;font-weight:500;isolation:isolate}
.banner-timer span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:white}
.banner-timer span:first-of-type{margin-right:8px}
.timer-bridge{position:absolute;top:8px;width:19px;height:24px;z-index:-1}.bridge-one{left:84px}.bridge-two{left:128px}
.banner-mobile{display:none}
.has-floating-offer{scroll-padding-top:80px}
.offer-sheet{position:fixed;inset:0 0 auto;margin:0;width:100%;max-width:none;max-height:100dvh;padding:0 0 16px;border:0;background:transparent;color:#05f;overflow:auto;overscroll-behavior:contain}
.offer-sheet::backdrop{background:rgba(0,7,20,.48)}
.sheet-content{display:flex;flex-direction:column;align-items:center;gap:24px;padding:14px 24px 32px;border-radius:0 0 16px 16px;background:#eaf2ff}
.sheet-content p{font-size:17px;line-height:26px;font-weight:500;text-align:center}
.sheet-actions{display:flex;flex-direction:column;gap:12px;width:100%}
.sheet-actions .banner-cta{padding:12px 24px;min-height:48px}
.sheet-close{display:grid;place-items:center;width:44px;height:44px;margin:14px auto 0;background:#eaf2ff;border-radius:16px}
.offer-sheet-open{overflow:hidden}
@media(min-width:768px) and (max-width:1023px){.banner-desktop{padding-inline:24px;gap:16px}.banner-hover{gap:12px}.banner-condition{font-size:16px;white-space:normal;max-width:300px}.banner-hover .banner-cta{font-size:16px;padding-inline:12px}}
@media(hover:none) and (min-width:768px){.banner-default{display:none}.banner-hover{transform:none;opacity:1}}
@media(max-width:767px){.banner-desktop{display:none}.banner-mobile{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:64px;background:transparent;color:#05f;font-size:17px;line-height:26px;font-weight:500;padding:10px 16px}.banner-mobile strong{font-size:17px;line-height:26px}}
@media(prefers-reduced-motion:reduce){.floating-offer,.banner-default,.banner-hover{transition:none}}

/* Sampled Quick spring approximation; duration supplied in the Figma screenshot. */
:root{--banner-quick:linear(0.000000, 0.016331, 0.060490, 0.125662, 0.205696, 0.295171, 0.389424, 0.484549, 0.577375, 0.665418, 0.746832, 0.820339, 0.885159, 0.940938, 0.987677, 1.025662, 1.055399, 1.077556, 1.092910, 1.102303, 1.106599, 1.106654, 1.103295, 1.097291, 1.089347, 1.080093, 1.070075, 1.059758, 1.049527, 1.039687, 1.030473, 1.022053, 1.014539, 1.007992, 1.002429, 0.997835, 0.994166, 0.991357, 0.989330, 0.987996, 0.987263, 0.987036, 0.987224, 0.987740, 0.988504, 0.989444, 0.990495, 0.991603, 0.992722, 0.993815, 0.994851, 0.995810, 0.996675, 0.997439, 0.998096, 0.998647, 0.999095, 0.999446, 0.999707, 0.999889, 1.000000)}

/* Hover palette from Figma 34:2306, synchronized with the content transition. */
.timer-bridge-hover{opacity:0}
@media(min-width:768px){
 .floating-offer{background:var(--offer-bg,#eaf2ff);color:var(--offer-text,#05f);transition:transform .25s ease,visibility .25s,background-color 400ms var(--banner-quick),color 400ms var(--banner-quick)}
 .banner-hover .banner-cta{background:var(--offer-button-bg,#05f);color:var(--offer-button-text,white);transition:background-color 400ms var(--banner-quick),color 400ms var(--banner-quick)}
 .banner-desktop .banner-timer span{background:var(--offer-timer-bg,white);transition:background-color 400ms var(--banner-quick)}
 .banner-desktop .timer-bridge-hover{opacity:var(--offer-hover-opacity,0);transition:opacity 400ms var(--banner-quick)}
 .floating-offer:focus-within{--offer-bg:#05f;--offer-text:white;--offer-button-bg:#eaf2ff;--offer-button-text:#05f;--offer-timer-bg:#eaf2ff;--offer-hover-opacity:1}
}
@media(min-width:768px) and (hover:hover){
 .floating-offer:hover{--offer-bg:#05f;--offer-text:white;--offer-button-bg:#eaf2ff;--offer-button-text:#05f;--offer-timer-bg:#eaf2ff;--offer-hover-opacity:1}
}
@media(min-width:768px) and (hover:none){
 .floating-offer{--offer-bg:#05f;--offer-text:white;--offer-button-bg:#eaf2ff;--offer-button-text:#05f;--offer-timer-bg:#eaf2ff;--offer-hover-opacity:1}
}
@media(prefers-reduced-motion:reduce){.floating-offer,.banner-hover .banner-cta,.banner-desktop .banner-timer span,.banner-desktop .timer-bridge-hover{transition:none}}

/* Reserve the fixed banner only when the full page fits without scrolling. */
.offer-reserves-space .page{margin-top:64px}

/* Longer period stories keep a separate illustration/metric area below the copy. */
.result-card.has-content{height:0;padding-bottom:0}
.has-content .result-description{max-width:none;margin-bottom:0;max-height:calc(100% - 220px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.has-content .apple-art{top:auto;bottom:-60px;margin-top:0}
.has-content .tomato-art{top:auto;bottom:-20px;margin-top:0}
.has-content .bread-art,.has-content .watermelon-art{margin-top:0}
.has-content .metric{font-size:36px;line-height:40px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:767px){
 .has-content .metric{font-size:28px;line-height:32px}
 .result-card.has-content{height:auto;padding-bottom:300px}
 .has-content .result-description{max-height:none;overflow:visible;overscroll-behavior:auto;margin-bottom:24px}
}


/* Keep fixed controls inside the visible area reported by mobile webviews. */
@media(max-width:767px){
 :root{--offer-safe-top:max(0px,calc(env(safe-area-inset-top,0px) - var(--offer-viewport-top,0px)))}
 .floating-offer{top:var(--offer-viewport-top,0px);height:calc(64px + var(--offer-safe-top));padding-top:var(--offer-safe-top)}
 .banner-mobile{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .offer-sheet{top:var(--offer-viewport-top,0px);max-height:var(--offer-viewport-height,100dvh);padding-top:var(--offer-safe-top)}
 .has-floating-offer{scroll-padding-top:calc(80px + var(--offer-safe-top) + var(--offer-viewport-top,0px))}
 .offer-reserves-space .page{margin-top:calc(64px + var(--offer-safe-top))}
}