/* Shared presentation: project stories, history, previews and motion. */
.eyebrow { display: block; color: #087cae; font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; margin-bottom: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: #087cae; }
.slider-shell { min-width: 0; }
.slider-shell .swiper-wrapper { align-items: stretch; transition-timing-function: cubic-bezier(.22,.61,.36,1); }
.slider-shell .swiper-slide { height: auto; box-sizing: border-box; }
.slider-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.slider-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: auto !important; }
.slider-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 4px !important; background: #0d607e; border: 0; padding: 0; opacity: .25; transition: width .35s, opacity .35s; }
.slider-pagination .swiper-pagination-bullet-active { width: 28px; border-radius: 20px; opacity: 1; }
.services .service-item .icon i { color: #075c7a; }
.skills-marquee { position: relative; overflow: hidden; width: 100%; padding-block: 20px; }
.skills-marquee::before, .skills-marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(32px,8vw,100px); pointer-events: none; }
.skills-marquee::before { left: 0; background: linear-gradient(90deg,var(--background-color),transparent); }
.skills-marquee::after { right: 0; background: linear-gradient(270deg,var(--background-color),transparent); }
.skills-marquee-track { display: flex; width: max-content; animation: skills-marquee-slide 48s linear infinite; }
.skills-marquee:hover .skills-marquee-track { animation-play-state: paused; }
.skills-set { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; list-style: none; padding: 8px 12px; margin: 0; }
.skills-set li { flex: 0 0 auto; border: 1px solid #d9e5eb; border-radius: 999px; padding: 10px 17px; background: #fff; color: #173447; font: 500 13px var(--nav-font); white-space: nowrap; box-shadow: 0 5px 18px rgba(16,46,62,.06); }
.skills-marquee-controls { display: flex; justify-content: flex-end; margin: 4px 12px 0; }
.skills-marquee-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #476a7c; padding: 6px; font-size: 11px; }
.skills-marquee-toggle:hover { color: #075c7a; }
.skills-marquee-toggle:focus-visible { outline: 3px solid #149ddd; outline-offset: 2px; border-radius: 6px; }
@keyframes skills-marquee-slide { to { transform: translateX(-50%); } }
.skills-marquee.is-paused .skills-marquee-track { animation-play-state: paused; }
.slider-buttons { display: flex; flex-shrink: 0; gap: 8px; }
.slider-buttons button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #cddde5; border-radius: 50%; color: #123347; background: #fff; transition: background .2s, color .2s; }
.slider-buttons button:hover { background: #0d607e; color: #fff; }
.slider-buttons button:disabled { opacity: .3; cursor: default; }
:is(.slider-buttons button,.text-link,.whatsapp-float,.story-replay,.about-instagram,.project-visit,.booking-cta):focus-visible { outline: 3px solid #149ddd; outline-offset: 5px; }
.resume-intro { display: flex; justify-content: space-between; align-items: start; gap: 30px; margin-bottom: 38px; }
.resume-intro p { max-width: 620px; color: #536675; }
.resume-intro a { flex-shrink: 0; }
.history-slide .history-date { height: 62px; position: relative; border-bottom: 2px solid #d7e5eb; margin-bottom: 24px; }
.history-date time { font: 600 15px var(--nav-font); color: #0c678e; }
.history-date::before { content: ""; position: absolute; height: 2px; left: 0; right: -24px; bottom: -2px; background: #d7e5eb; }
.history-slide:last-child .history-date::before { right: 0; }
.history-date span { position: absolute; bottom: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #149ddd; box-shadow: 0 0 0 5px #e6f4fb; }
.history-card { border: 1px solid #e0eaf0; border-radius: 18px; background: linear-gradient(150deg,#fff,#f4fafd); padding: 26px; height: calc(100% - 86px); display: flex; flex-direction: column; }
.history-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 18px; line-height: 1.35; }
.history-card p { color: #536675; font-size: 14px; line-height: 1.75; }
.history-card .text-link,.history-note { margin-top: auto; padding-top: 16px; font-size: 13px; }
.history-note { color: #536675; }
.education-panel { margin-top: 40px; border-top: 1px solid #dce7ed; border-bottom: 1px solid #dce7ed; }
.education-panel summary { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; font-weight: 700; padding: 13px 20px; margin: 18px 0; color: #fff; background: #0c678e; border-radius: 999px; box-shadow: 0 8px 22px #0c678e35; transition: transform .25s,background .25s,box-shadow .25s; }
.education-panel summary::-webkit-details-marker { display: none; }
.education-panel summary:hover { transform: translateY(-2px); background: #084f70; box-shadow: 0 12px 26px #0c678e48; }
.education-panel summary i { transition: transform .35s; }
.education-panel[open] summary i { transform: rotate(45deg); }
.education-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding: 12px 0 28px; }
.education-panel::details-content { block-size: 0; overflow: clip; transition: block-size .55s ease,content-visibility .55s allow-discrete; }
.education-panel[open]::details-content { block-size: auto; }
.education-panel[open] .resume-item { animation: education-in .5s both; animation-delay: calc(var(--education-step, 0) * 90ms); }
.education-panel.education-closing .resume-item { animation: education-out .35s both; animation-delay: calc((4 - var(--education-step, 0)) * 55ms); }
.education-grid .resume-item:nth-child(1) { --education-step: 0; }
.education-grid .resume-item:nth-child(2) { --education-step: 1; }
.education-grid .resume-item:nth-child(3) { --education-step: 2; }
.education-grid .resume-item:nth-child(4) { --education-step: 3; }
.education-grid .resume-item:nth-child(5) { --education-step: 4; }
@keyframes education-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes education-out { to { opacity: 0; transform: translateY(-8px); } }
.portfolio .portfolio-content .portfolio-info { opacity: 1; background: linear-gradient(180deg,transparent 35%,rgba(4,11,20,.87)); }
.portfolio .portfolio-content .portfolio-info h4 { position: absolute; left: 16px; bottom: 25px; background: transparent; padding: 0; font-size: 17px; font-weight: 700; max-width: 75%; }
.portfolio .portfolio-content .portfolio-info p { font-size: 11px; bottom: 6px; left: 16px; text-align: left; margin: 0; font-weight: 400; }
.portfolio .portfolio-content .portfolio-info :is(.preview-link,.details-link) { top: 15px; left: auto; right: 14px; font-size: 20px; line-height: 1; background: rgba(4,11,20,.7); padding: 10px; border-radius: 50%; }
.portfolio .portfolio-content .portfolio-info .preview-link { right: 61px; }
.template-card { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border: 1px solid #dfe9ee; border-radius: 22px; background: #f5f9fb; }
.template-preview { display: block; position: relative; min-height: 290px; background: #e7eef2; overflow: hidden; }
.template-preview img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: transform .8s; }
.template-preview:hover img { transform: scale(1.04); }
.template-preview span { position: absolute; bottom: 18px; left: 18px; background: #fff; color: #123347; padding: 7px 12px; border-radius: 30px; font-size: 12px; }
.template-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 32px; }
.template-copy h3 { font-size: 26px; font-weight: 700; }
.template-copy p { color: #536675; font-size: 14px; }
.upcoming-section { background: #081822; color: #bdccd5; }
.upcoming-section h2 { color: #fff; }
.upcoming-section .eyebrow { color: #61c7ec; }
.upcoming-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.upcoming-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; border: 1px solid #29404f; min-height: 270px; display: grid; align-items: center; background: #132a39; }
.upcoming-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1px) grayscale(.12); opacity: .44; transform: scale(1.12); z-index: -1; }
.upcoming-content { padding: 32px; }
.upcoming-stamp { display: inline-block; border: 2px solid #9de2f9; color: #9de2f9; padding: 8px 14px; font: 700 12px var(--nav-font); letter-spacing: .13em; text-transform: uppercase; transform: rotate(-7deg); margin: 0 0 30px; box-shadow: 0 0 0 3px #132a39,0 0 0 4px #5b90a2; }
.upcoming-content h3 { color: #fff; font-size: 20px; line-height: 1.45; }
.upcoming-content p { font-size: 13px; margin: 12px 0 0; }
.details-heading { max-width: 700px; margin-bottom: 36px; }
.details-heading h2 { font-size: clamp(28px,3vw,42px); font-weight: 700; letter-spacing: -.035em; }
.details-heading p { color: #536675; }
.project-showcase { background: #f3f8fb; border: 1px solid #dce7ed; border-radius: 24px; overflow: hidden; }
.project-showcase .slider-controls { padding: 0 25px 24px; }
.project-slide { display: grid; grid-template-columns: 1.15fr 1fr; }
.project-visual { background: #e7eff4; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.project-visual img { width: 100%; height: 420px; object-fit: contain; border-radius: 12px; }
.project-image-note { margin-top: 14px; color: #566c7b; font-size: 11px; }
.project-copy { padding: 35px; background: #fff; display: flex; flex-direction: column; align-items: start; }
.project-copy h2 { font-size: clamp(25px,2.5vw,34px); font-weight: 700; letter-spacing: -.03em; }
.project-copy h3 { font-size: 15px; font-weight: 700; margin-top: 12px; }
.project-copy p { font-size: 14px; line-height: 1.8; color: #536675; }
.project-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 22px 0 12px; padding: 18px 0; border-block: 1px solid #e4edf2; width: 100%; }
.project-meta dt { font-size: 10px; text-transform: uppercase; color: #6c7e8b; letter-spacing: .1em; margin-bottom: 5px; }
.project-meta dd { margin: 0; font-size: 13px; font-weight: 500; }
.project-visit,.booking-cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; background: #096a95; color: #fff; border-radius: 50px; padding: 12px 20px; font-weight: 600; font-size: 14px; }
.project-visit { margin-top: auto; }
.project-visit:hover,.booking-cta:hover { color: #fff; background: #064c6c; }
.details-back { margin-top: 28px; }
.booking-section { background: #edf5f7; }
.booking-intro { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.booking-intro h2 { font-size: clamp(30px,3.5vw,48px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.booking-intro p { color: #536675; margin-top: 20px; }
.booking-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(25px,5vw,70px); align-items: center; }
.chat-demo { border: 1px solid #d6e2e7; border-radius: 26px; background: #fff; box-shadow: 0 25px 60px -35px #396378; padding: 25px; }
.chat-header { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #edf2f5; padding-bottom: 20px; }
.chat-header strong { font-size: 13px; }
.chat-header small { display: block; color: #7a8b95; font-size: 11px; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: #e1f4ef; color: #227c67; display: grid; place-items: center; flex-shrink: 0; }
.chat-messages { display: flex; flex-direction: column; align-items: start; gap: 15px; padding: 25px 0; }
.chat-bubble { background: #eef2f5; border-radius: 18px 18px 18px 4px; padding: 13px 17px; max-width: 90%; font-size: 16px; transform-origin: bottom left; }
.chat-bubble:nth-child(2) { margin-left: 25px; }
.chat-bubble small { display: block; font-size: 9px; text-align: right; color: #7a8b95; margin-top: 5px; }
.typing-bubble { display: flex; gap: 4px; padding: 15px; border-radius: 18px; background: #e1f4ef; align-self: end; }
.typing-bubble span { width: 6px; height: 6px; background: #497f70; border-radius: 50%; }
.chat-caption { font-size: 12px; color: #6a7d88; text-align: center; margin-bottom: 0; }
.pitch-step + .pitch-step { margin-top: 26px; }
.pitch-step > span { color: #44819a; font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .15em; display: block; margin-bottom: 9px; }
.pitch-step h3 { font-size: clamp(23px,2.5vw,31px); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.pitch-step p { font-size: 17px; color: #536675; line-height: 1.6; }
.booking-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 35px; align-items: center; background: #0c2838; color: #fff; padding: 35px; border-radius: 22px; margin-top: 50px; }
.booking-benefits .eyebrow { color: #87d4e9; }
.booking-benefits h3 { color: #fff; font-size: 26px; line-height: 1.4; }
.booking-benefits h3 strong { color: #9ee5d4; }
.booking-benefits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; font-size: 14px; }
.booking-benefits li { display: flex; gap: 12px; }
.booking-benefits li i { color: #9ee5d4; }
.booking-cta { width: fit-content; background: #9ee5d4; color: #123b37; }
.story-replay { border: 0; background: transparent; display: block; margin: 22px auto 0; font-size: 12px; color: #476a7c; }
.story-ready .chat-bubble { opacity: 0; }
.story-ready .mask-reveal { clip-path: inset(0 100% 0 0); }
.story-playing .chat-bubble { animation: bubble-in .7s cubic-bezier(.18,.89,.32,1.2) both; animation-delay: calc(var(--step) * 1.05s); }
.story-playing .mask-reveal { animation: mask-open 1.2s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(3.5s + var(--step) * 1.5s); }
.typing-bubble span { animation: typing .8s ease-in-out infinite; }
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes mask-open { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.portrait-frame { position: relative; perspective: 800px; width: 100%; max-width: 360px; margin: 0 auto 25px; }
.portrait-card { border-radius: 24px; position: relative; overflow: hidden; background: #e4edf1; box-shadow: 0 20px 44px -8px #0f172a38; }
.portrait-card img { width: 100%; height: auto; display: block; }
.portrait-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.about .content ul .about-instagram { display: inline-grid; place-items: center; width: 38px; height: 38px; background: #e8f4fa; border-radius: 50%; }
.about .content ul .about-instagram i { margin: 0; font-size: 19px; }
.whatsapp-float { position: fixed; right: 22px; bottom: 76px; z-index: 996; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 50px; background: #087d48; color: #fff; box-shadow: 0 8px 26px #0b4a3433; font-size: 13px; font-weight: 600; }
.index-page .whatsapp-float { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.index-page.intro-complete .whatsapp-float { visibility: visible; opacity: 1; pointer-events: auto; }
.whatsapp-float i { font-size: 26px; }
.whatsapp-float img { width: 27px; height: 27px; filter: brightness(0) invert(1); }
.whatsapp-float:hover { color: #fff; background: #056238; transform: translateY(-3px); }
.contact .php-email-form .contact-whatsapp-fallback { display: inline-block; margin: 8px 0 0 6px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:991px) { .project-slide { grid-template-columns: 1fr; } .project-visual img { height: 330px; } .upcoming-grid { gap: 12px; } .upcoming-content { padding: 24px 18px; } .template-card { grid-template-columns: 1fr; } .template-preview { min-height: 250px; } .resume-intro { flex-direction: column; gap: 10px; } }
@media(max-width:767px) { .booking-story,.booking-benefits,.education-grid { grid-template-columns: 1fr; } .upcoming-grid { grid-template-columns: 1fr; } .upcoming-card { min-height: 230px; } .upcoming-content { padding: 30px; } .project-copy { padding: 25px; } .project-visual { padding: 15px; } .project-visual img { height: 240px; } .slider-controls { gap: 12px; } .project-showcase .slider-controls { padding-inline: 16px; } .slider-buttons { gap: 5px; } .slider-buttons button { width: 36px; height: 36px; } .whatsapp-float { right: 16px; bottom: 75px; padding: 12px; } .whatsapp-float span { display: none; } .booking-benefits { padding: 26px; } .history-card { padding: 23px; } }
@media(max-width:767px) { .skills-marquee { margin-inline: -12px; width: calc(100% + 24px); } .skills-set { gap: 9px; } .skills-set li { padding: 9px 14px; font-size: 12px; } }
/* Store pitch, section illustrations and stronger calls to action. */
.section-title-art { display: block; width: auto; height: 94px; max-width: min(220px,70vw); object-fit: contain; margin: 0 auto 20px; }
.resume-intro .text-link,.template-copy .text-link { padding: 13px 21px; border-radius: 999px; color: #fff; background: #087cae; box-shadow: 0 9px 22px #087cae35; transition: transform .25s,box-shadow .25s,background .25s; }
.resume-intro .text-link:hover,.template-copy .text-link:hover { color: #fff; background: #075c7a; transform: translateY(-3px); box-shadow: 0 14px 28px #087cae48; }
.booking-cta { padding: 15px 25px; font-size: 15px; font-weight: 700; box-shadow: 0 10px 26px #0c283833; transition: transform .25s,box-shadow .25s,background .25s; }
.booking-cta:hover { transform: translateY(-3px); box-shadow: 0 15px 30px #0c283844; }
.ideas-callout { display: flex; align-items: center; gap: 30px; margin-top: 50px; padding: 30px; border-radius: 22px; background: #eff7fa; }
.ideas-callout img { width: 130px; height: 120px; object-fit: contain; flex: 0 0 auto; }
.ideas-callout h3 { font-size: 23px; font-weight: 700; }
.ideas-callout p { max-width: 760px; margin-bottom: 0; color: #536675; }
.store-section { background: linear-gradient(180deg,#f7fafb,#eaf3f5); }
.store-story { display: grid; gap: 24px; }
.store-feature { display: grid; grid-template-columns: minmax(180px,.7fr) 1.3fr; align-items: center; gap: clamp(24px,5vw,65px); padding: clamp(24px,5vw,50px); border: 1px solid #dce8eb; border-radius: 24px; background: #fff; box-shadow: 0 18px 44px #153b4c0d; }
.store-feature > img { width: 100%; height: 220px; object-fit: contain; }
.store-feature h3,.store-support h3 { font-size: clamp(22px,2.8vw,30px); font-weight: 700; }
.store-feature p,.store-support p { color: #536675; line-height: 1.75; }
.store-growth { grid-template-columns: 1.3fr minmax(180px,.7fr); background: #f3f9f7; }
.store-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.store-options article { padding: 30px; border: 1px solid #dce8eb; border-radius: 22px; background: #fff; }
.store-options h3 { font-size: 19px; font-weight: 700; margin-top: 15px; }
.store-options p { color: #536675; line-height: 1.7; }
.store-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #0c678e; background: #e7f3f7; }
.store-icon i { font-size: 25px; }
.store-icon img { width: 30px; height: 30px; }
.provider-logo { display: block; width: auto; height: 32px; max-width: 180px; object-fit: contain; margin-top: 18px; }
.store-security { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.store-security figure { margin: 0; padding: 22px; border: 1px solid #dce8eb; border-radius: 20px; background: #fff; }
.store-security img { width: 100%; height: 230px; object-fit: contain; }
.store-security figcaption { margin-top: 14px; color: #536675; font-size: 14px; line-height: 1.65; }
.store-support { display: grid; grid-template-columns: minmax(180px,.7fr) 1.3fr; align-items: center; gap: 36px; margin-top: 24px; padding: 32px; border-radius: 22px; background: #fff; }
.store-support > img { width: 100%; max-height: 230px; object-fit: contain; }
.store-cta { margin-top: 24px; padding: 38px; border-radius: 24px; color: #fff; text-align: center; background: #0c2838; }
.store-cta h3 { color: #fff; font-size: 27px; font-weight: 700; }
.store-cta p { color: #c2d3dc; }
@media(max-width:767px) { .ideas-callout { flex-direction: column; text-align: center; } .ideas-callout img { height: 90px; } .store-feature,.store-growth,.store-support { grid-template-columns: 1fr; } .store-feature > img { height: 170px; } .store-growth > div { order: 2; } .store-options,.store-security { grid-template-columns: 1fr; } .store-support > img { max-height: 180px; } }
.illustrated-title { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 14px; }
.illustrated-title img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; }
.about .section-title,.contact .section-title { text-align: left; }
.about .illustrated-title,.contact .illustrated-title { justify-content: flex-start; }
.about .section-title p,.contact .section-title p { text-align: left; }
.popular-services-label { margin: 48px auto 0; color: #087cae; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.service-feature-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; max-width: 900px; margin: 48px auto 0; }
.popular-services-label + .service-feature-links { margin-top: 16px; }
.feature-link { display: inline-flex; align-items: center; gap: 14px; min-width: 230px; padding: 16px 22px; border: 1px solid #d7e7ed; border-radius: 16px; background: #fff; color: #123347; font-weight: 700; box-shadow: 0 10px 26px #12334712; transition: transform .25s,box-shadow .25s,color .25s,background .25s; }
.feature-link > i:first-child { color: #087cae; font-size: 22px; }
.feature-link > i:last-child { margin-left: auto; color: #087cae; }
.feature-link:hover { transform: translateY(-4px); color: #fff; background: #0c678e; box-shadow: 0 16px 30px #0c678e30; }
.feature-link:hover > i { color: #fff; }
.feature-page { min-height: 100vh; background: #f7fafb; }
.feature-page-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px clamp(18px,5vw,72px); border-bottom: 1px solid #e2ebef; background: #fffE; backdrop-filter: blur(14px); }
.feature-back { display: inline-flex; align-items: center; gap: 9px; color: #087cae; font-weight: 700; }
.feature-brand { display: flex; flex-direction: column; align-items: end; color: #123347; font-weight: 700; line-height: 1.25; }
.feature-brand span { color: #6c7e8b; font-size: 11px; font-weight: 500; }
.feature-page-main { padding: 30px clamp(16px,4vw,56px) 70px; }
.feature-page-main > .section { max-width: 1180px; margin: 0 auto; padding-block: 44px; }
.feature-page-main .booking-intro { margin-bottom: 38px; }
.feature-page-main .store-cta { margin-bottom: 20px; }
.whatsapp-float { left: 15px; right: auto; bottom: 15px; z-index: 100001; width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; background: transparent; border: 0; box-shadow: none; }
.whatsapp-float img { width: 54px; height: 54px; filter: none; }
.whatsapp-float:hover { background: transparent; transform: none; box-shadow: none; }
@media(max-width:767px) { .illustrated-title { gap: 10px; } .illustrated-title img { width: 48px; height: 48px; } .feature-page-header { padding-inline: 16px; } .feature-brand span { display: none; } .feature-page-main { padding-inline: 12px; } .whatsapp-float { width: 50px; height: 50px; padding: 0; } .whatsapp-float img { width: 50px; height: 50px; } }
@media(prefers-reduced-motion:reduce) { .story-ready .chat-bubble { opacity: 1; } .story-ready .mask-reveal { clip-path: none; } .story-playing :is(.chat-bubble,.mask-reveal,.typing-bubble span) { animation: none; } .slider-shell .swiper-wrapper { transition-duration: 0ms !important; } .portrait-card { transform: none !important; } .skills-marquee-track { animation: none; transform: none; } .skills-marquee { overflow-x: auto; } .skills-marquee::before,.skills-marquee::after { display: none; } }