.welcome-contact-intro{display:flex;align-items:center;gap:22px}.welcome-contact-intro>p{font-size:12px;line-height:1.55;margin:0}
.glass-messengers{display:flex;align-items:center;gap:12px}
.glass-messengers a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;border:0;background:none;padding:0;color:inherit;font-size:12px}
.glass-messengers img{display:block;width:60.8px;height:60.8px;object-fit:contain;transition:transform .3s ease;filter:drop-shadow(0 6px 8px #18243318)}
.glass-messengers a:hover img{transform:translateY(-5px) rotate(-4deg)}
.glass-messengers a:focus-visible{outline:2px solid #ef8354;outline-offset:5px;border-radius:12px}
.contact-links.glass-messengers{justify-content:flex-start;gap:24px}.contact-links.glass-messengers a{border:0;padding:0;background:none}.contact-links.glass-messengers img{width:89.6px;height:89.6px}
@media(max-width:850px){.welcome-contact-intro{gap:12px}.welcome-contact-intro .glass-messengers img{width:43.2px;height:43.2px}}
@media(max-width:560px){[data-direction=cool] .welcome-bottom{flex-wrap:wrap;align-items:center;gap:10px}.welcome-contact-intro{width:100%;justify-content:space-between}.welcome-contact-intro>p{font-size:10px}.welcome-contact-intro .glass-messengers img{width:38.4px;height:38.4px}.welcome-contact-intro .glass-messengers a{font-size:10px}.contact-links.glass-messengers img{width:75.2px;height:75.2px}}
@media(prefers-reduced-motion:reduce){.glass-messengers img{transition:none}.glass-messengers a:hover img{transform:none}}
.motion-off .glass-messengers img{transition:none}.motion-off .glass-messengers a:hover img{transform:none}
/* Normalize the visible artwork bounds, not the unequal PNG canvases. */
.glass-messengers .messenger-art{position:relative;display:block;width:44px;height:44px;overflow:hidden;transition:transform .3s ease}
.glass-messengers .messenger-art img{position:absolute;max-width:none;height:auto;filter:none;transform:none!important;transition:none}
.glass-messengers .messenger-art.telegram img{width:156.36%;left:-29.30%;top:-31.30%}
.glass-messengers .messenger-art.whatsapp img{width:128.35%;left:-14.23%;top:-14.38%}
.glass-messengers a:hover .messenger-art{transform:translateY(-3px)}
.contact-direct{margin-top:32px;padding-top:24px;border-top:1px solid #ffffff26;max-width:430px}
.contact-direct .contact-email{margin:0;font-size:clamp(22px,2.1vw,30px)}
.contact-direct-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.contact-direct-row .contact-phone{margin:0;white-space:nowrap}
.contact-direct-row .contact-links{margin:0;gap:12px}
.contact-direct-row .messenger-art{width:42px;height:42px}
@media(max-width:850px){.welcome-contact-intro .messenger-art{width:34px;height:34px}}
@media(max-width:560px){.welcome-contact-intro .messenger-art{width:30px;height:30px}.contact-direct-row{gap:12px}.contact-direct-row .contact-links{gap:10px}.contact-direct-row .messenger-art{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.glass-messengers .messenger-art{transition:none}.glass-messengers a:hover .messenger-art{transform:none}}
.motion-off .glass-messengers .messenger-art{transition:none;transform:none}
/* Hero messengers follow the slogan and catalogue by one second. */
@keyframes messenger-grow{from{opacity:0;scale:0}to{opacity:1;scale:1}}
[data-direction=cool] .welcome-contact-intro .glass-messengers{animation:none}
[data-direction=cool] .welcome-contact-intro .glass-messengers>a{transform-origin:center;animation:messenger-grow 850ms 2000ms cubic-bezier(.22,1,.36,1) both}
[data-direction=cool] .welcome-contact-intro .glass-messengers:focus-within{animation:none}
@media(prefers-reduced-motion:reduce){[data-direction=cool] .welcome-contact-intro .glass-messengers{animation:none}}
.motion-off [data-direction=cool] .welcome-contact-intro .glass-messengers,body.motion-off[data-direction=cool] .welcome-contact-intro .glass-messengers{animation:none}

[data-direction=cool] .welcome-contact-intro .glass-messengers>a:focus{animation:none}
@media(prefers-reduced-motion:reduce){[data-direction=cool] .welcome-contact-intro .glass-messengers>a{animation:none}}
.motion-off [data-direction=cool] .welcome-contact-intro .glass-messengers>a,body.motion-off[data-direction=cool] .welcome-contact-intro .glass-messengers>a{animation:none}
.catalog-messenger-row{max-width:370px;margin-top:28px;padding-top:20px;border-top:1px solid #ffffff26}.catalog-messenger-row .contact-phone{color:inherit;text-decoration:none;font-size:16px}

/* Phone hero uses content flow so text growth cannot collide with the card. */
@media(max-width:600px){
 body[data-direction=cool] .welcome-scene{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:90px 6% 30px;gap:24px}
 body[data-direction=cool] .laptop-welcome .welcome-aside{position:relative;inset:auto;order:0;margin:0}
 body[data-direction=cool] .laptop-welcome .welcome-art{position:relative;inset:auto;order:1;width:114%;height:280px;margin:-18px -7% -20px;flex-shrink:0}
 body[data-direction=cool] .welcome-brand-title{position:relative;inset:auto;order:2;width:100%;margin:0}
 body[data-direction=cool] .laptop-welcome .laptop-slogan{position:relative;inset:auto;order:3;max-width:none;margin:8px 0 0;font-size:27px}
 body[data-direction=cool] .laptop-project{position:relative;inset:auto;order:4;width:100%;box-sizing:border-box;margin:12px 0;flex-shrink:0}
 body[data-direction=cool] .welcome-bottom{position:relative;inset:auto;order:5;width:100%;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:20px}
 body[data-direction=cool] .welcome-contact-intro{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
 body[data-direction=cool] .welcome-contact-intro>p{font-size:11px;flex:1;min-width:0}
 body[data-direction=cool] .welcome-contact-intro .glass-messengers{flex-shrink:0}
 body[data-direction=cool] .welcome-bottom>.welcome-scroll{align-self:flex-end;max-width:none}
}

/* Primary pricing entry point on the homepage. */
body[data-direction=cool] .starting .calculator-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:#ef8354;color:#242838;border:0;border-radius:30px;padding:17px 25px;font-size:18px;font-weight:650;line-height:1.3;text-decoration:none;box-shadow:0 5px 14px #ef835426;transition:background .2s,transform .2s}
body[data-direction=cool] .starting .calculator-link:hover{background:#f1956c;transform:translateY(-2px)}
body[data-direction=cool] .starting .calculator-link:focus-visible{outline:2px solid #2d3142;outline-offset:4px}
@media(max-width:600px){body[data-direction=cool] .starting .calculator-link{width:100%;box-sizing:border-box;font-size:17px;padding:16px 20px}}
@media(prefers-reduced-motion:reduce){body[data-direction=cool] .starting .calculator-link{transition:none;transform:none}}

body[data-direction=cool] .range-control input[type=range]{accent-color:#ef8354}

/* Full-width paper card with an integrated coral edge. */
body[data-direction=cool] .starting{position:relative;isolation:isolate;background:#eeeae4;border:1px solid #d5d2cc;border-radius:22px;padding-right:115px;box-shadow:0 12px 28px #2d31420c;overflow:visible}
.starting-edge{position:absolute;inset:-1px -1px -1px auto;width:66px;display:flex;align-items:center;justify-content:center;background:#ef8354;border-radius:0 20px 20px 0;color:#2d3142}
.starting-edge::after{content:"";position:absolute;left:calc(100% - 1px);top:12%;width:17px;height:76%;background:#ef8354;clip-path:polygon(0 0,100% 50%,0 100%)}
.starting-edge>span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:15px;font-weight:550;letter-spacing:.025em;white-space:nowrap}
@media(max-width:850px){body[data-direction=cool] .starting{padding-right:92px}.starting-edge{width:48px}.starting-edge::after{width:12px}}
@media(max-width:600px){body[data-direction=cool] .starting{padding-right:62px}.starting-edge{width:34px;border-radius:0 20px 20px 0}.starting-edge>span{font-size:12px}.starting-edge::after{width:9px}}

/* Process cards: numbered paper panels with paired coloured edges. */
body[data-direction=cool] .process-list{display:grid;gap:14px;margin-top:30px}
body[data-direction=cool] .process-list li{--step-accent:#ef8354;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:20px;border:0;border-radius:12px;padding:23px 28px;overflow:hidden;background:#eeeae4;box-shadow:0 6px 12px #2d314212}
body[data-direction=cool] .process-list li:nth-child(2){--step-accent:#bfc0c0}
body[data-direction=cool] .process-list li:nth-child(3){--step-accent:#9fb5a8}
body[data-direction=cool] .process-list li:nth-child(4){--step-accent:#4f5d75}
body[data-direction=cool] .process-list li::before,body[data-direction=cool] .process-list li::after{content:"";position:absolute;top:0;bottom:0;width:9px;background:var(--step-accent)}
body[data-direction=cool] .process-list li::before{left:0}
body[data-direction=cool] .process-list li::after{right:0}
body[data-direction=cool] .process-list li>span{font-size:30px;line-height:1.1;font-weight:550;letter-spacing:-.04em;padding:0;color:#2d3142;align-self:stretch;display:flex;align-items:center;border-right:1px solid #c5c5bf}
body[data-direction=cool] .process-list h3{font-size:19px;line-height:1.3}
body[data-direction=cool] .process-list p{font-size:14px;line-height:1.55;margin-top:8px}
@media(max-width:600px){body[data-direction=cool] .process-list li{grid-template-columns:36px minmax(0,1fr);gap:13px;padding:20px 20px}body[data-direction=cool] .process-list li>span{font-size:25px}body[data-direction=cool] .process-list h3{font-size:17px}body[data-direction=cool] .process-list li::before,body[data-direction=cool] .process-list li::after{width:6px}}

/* Align the office card with the complete process column on desktop. */
@media(min-width:851px){
 body[data-direction=cool] .process-image{align-self:stretch;max-width:none;width:100%;min-height:0;position:relative;padding-bottom:65px;background:#eeeae4}
 body[data-direction=cool] .process-image>img{position:absolute;inset:0 0 65px;width:100%;height:calc(100% - 65px);object-fit:cover;object-position:50% 43%;aspect-ratio:auto}
 body[data-direction=cool] .process-image>p{position:absolute;inset:auto 0 0;margin:0;min-height:65px;box-sizing:border-box;display:flex;align-items:center;padding:18px 24px;font-size:18px;line-height:1.4}
}

/* A three-step introduction, matching the process cards. */
body[data-direction=cool] .why-site{padding:34px;background:#d5e0d8;border-radius:24px}
body[data-direction=cool] .why-intro{margin-bottom:22px;font-size:13px}
body[data-direction=cool] .first-impression{counter-reset:first-step;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:0;padding:0}
body[data-direction=cool] .first-impression>p{counter-increment:first-step;position:relative;margin:0;padding:64px 24px 28px 28px;border:0;border-left:7px solid #a5b9ac;border-radius:12px;background:#eeeae4;box-shadow:0 6px 14px #2d31420b;font-size:clamp(25px,2.5vw,38px);line-height:1.15;letter-spacing:-.045em}
body[data-direction=cool] .first-impression>p:nth-child(2){border-left-color:#bfc0c0}
body[data-direction=cool] .first-impression>p:last-child{border-left-color:#ef8354}
body[data-direction=cool] .first-impression>p::before{content:"0" counter(first-step);position:absolute;left:28px;top:22px;font-size:15px;font-weight:550;letter-spacing:0;color:#69736c}
body[data-direction=cool] .first-impression>p:not(:last-child)::after{content:"→";position:absolute;right:20px;top:18px;font-size:23px;color:#7c8b80}
body[data-direction=cool] .why-note{display:flex;align-items:flex-start;gap:18px;max-width:880px;margin:25px 0 0}
body[data-direction=cool] .why-note p{max-width:none;font-size:15px;line-height:1.65}
body[data-direction=cool] .why-note .orange-rule{margin-top:11px}
@media(max-width:850px){body[data-direction=cool] .first-impression{grid-template-columns:1fr;gap:12px}body[data-direction=cool] .first-impression>p{padding:24px 45px 24px 65px;font-size:27px}body[data-direction=cool] .first-impression>p::before{left:20px;top:29px}body[data-direction=cool] .first-impression>p:not(:last-child)::after{content:"↓";top:25px;right:18px}body[data-direction=cool] .first-impression br{display:none}}
@media(max-width:600px){body[data-direction=cool] .why-site{padding:24px 18px}body[data-direction=cool] .first-impression>p{font-size:24px;padding-left:52px;padding-right:28px}body[data-direction=cool] .first-impression>p::before{left:15px;font-size:12px}body[data-direction=cool] .first-impression>p:not(:last-child)::after{right:10px;font-size:18px}body[data-direction=cool] .why-note{gap:12px}body[data-direction=cool] .why-note p{font-size:14px}}

body[data-direction=cool] .first-impression>p:first-child{padding-left:28px;border-left:7px solid #a5b9ac}@media(max-width:850px){body[data-direction=cool] .first-impression>p:first-child{padding-left:65px}}@media(max-width:600px){body[data-direction=cool] .first-impression>p:first-child{padding-left:52px}}