/* Triple S v17 — a consistent studio identity, responsive composition and motion. */
:root{--ink:#101b38;--blue:#3156f4;--muted:#62708b;--line:#dfe5ef;--pale:#f1f4fb;--gutter:clamp(22px,5vw,76px);--ease:cubic-bezier(.22,1,.36,1)}
body{background:#fff;color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.container{width:calc(100% - var(--gutter)*2);max-width:1200px;margin-inline:auto}
.section{padding-block:88px}p{color:var(--muted)}h2{font-size:clamp(30px,3.2vw,44px);line-height:1.2;letter-spacing:-.045em}h2>span{color:#697792}
.eyebrow{font-size:12px;letter-spacing:.14em;margin-bottom:19px}.section-heading{margin-bottom:36px}.section-heading.split{grid-template-columns:1.1fr .8fr;gap:12%}
.section-heading.split>p,.heading-aside>p{font-size:15px;line-height:1.85}.section-note{font-size:12px;line-height:1.6}.micro-label{font-size:12px}.btn{border-radius:9px;min-height:49px;font-size:13px;padding:13px 20px;transition:transform .3s var(--ease),background .25s,box-shadow .25s;position:relative}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px #13245418}.btn .icon{transition:transform .25s}.btn:hover .icon,.text-link:hover .icon,.text-button:hover .icon{transform:translate(2px,-2px)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #728aff;outline-offset:5px}.text-button,.text-link{font-size:13px}.announcement{background:#101b38;font-size:11px}.announcement>.container{min-height:33px}.site-header{background:#ffffffed;backdrop-filter:blur(18px);border-bottom:1px solid #e6eaf2;transition:box-shadow .3s}.site-header.is-scrolled{box-shadow:0 8px 25px #101b380a}.header-inner{min-height:86px}.desktop-nav a,.desktop-nav button{font-size:13px}.desktop-nav{gap:26px}.header-cta{font-size:12px}.brand-name{font-size:27px;letter-spacing:-.05em}.brand-sub{font-size:8px}.reading-progress{height:2px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.reading-progress span{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;will-change:transform}
/* A dark opening lets the work itself bring the color. */
.hero{position:relative;isolation:isolate;background:#101b38;padding-top:62px;overflow:hidden;color:#fff}.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 10%,#375de433,transparent 57%),linear-gradient(125deg,transparent 40%,#26376045);opacity:.9}.hero::after{content:"";position:absolute;width:680px;height:680px;border:1px solid #ffffff07;border-radius:50%;right:-250px;top:-290px;pointer-events:none;z-index:-1}.hero-grid{grid-template-columns:1.04fr 1fr;gap:7%;align-items:center;padding-bottom:57px}.hero-copy{padding:0;min-width:0}.hero-copy .eyebrow{color:#bdcaff;font-size:11px;letter-spacing:.12em}.hero-copy .small-line{background:#809aff}.hero h1{font-size:clamp(40px,4.4vw,62px);line-height:1.11;letter-spacing:-.055em;margin:22px 0 23px;color:white}.hero h1>span{color:#a4b8ff;position:relative}.hero-lead{color:#c0c9dc;font-size:15px;line-height:1.85;max-width:440px;margin-bottom:28px}.hero-actions{gap:12px;flex-wrap:wrap}.hero-actions .btn{font-size:12px;padding:14px 17px}.hero-actions .btn-primary{background:#fff;color:#172957;border-color:#fff}.hero-actions .btn-primary:hover{background:#dce5ff}.hero-actions .btn-outline{color:#fff;border-color:#ffffff3a;background:transparent}.hero-actions .btn-outline:hover{background:#ffffff0d;border-color:#ffffff70}.hero-note{margin-top:29px}.hero-note p{font-size:11px;color:#8f9db9}.hero-note strong{color:#a7b4cc;font-weight:500}.note-line{background:#8396bc}.hero-foot{border-color:#ffffff19;min-height:77px}.hero-foot>span:first-child{color:#95a4c5;font-size:10px;letter-spacing:.12em}.hero-foot p{color:#d4dbee;font-size:12px}.hero-foot .foot-plus{color:#6e84bd}
.hero-canvas{display:block;position:relative;background:linear-gradient(135deg,#e8edf6,#d4dcea);border:1px solid #ffffff3a;border-radius:21px;aspect-ratio:1.06;max-height:510px;box-shadow:0 35px 70px #030b2840;isolation:isolate;margin:0;width:100%;overflow:visible;transform:rotate(1.5deg);text-align:left}.hero-canvas::before,.hero-canvas::after{display:none}.canvas-label{left:27px;right:27px;top:25px;font-size:9px;letter-spacing:.1em;color:#566887;display:flex;justify-content:space-between}.canvas-label b{color:#8793aa;font-size:9px}.showcase-window{position:absolute;left:-5%;top:19%;width:100%;border:5px solid white;background:white;border-radius:10px;overflow:hidden;box-shadow:0 18px 35px #1526472b;transform:rotate(-4deg);transition:transform .65s var(--ease)}.showcase-window img{display:block;width:100%;aspect-ratio:1333/850;object-fit:cover;height:auto}.showcase-window .window-bar{height:24px;background:#fff;padding:0 10px}.showcase-window .window-bar small{font-size:8px;color:#6d778b}.showcase-window .window-bar i{width:4px;height:4px}.showcase-phone{position:absolute;right:-3%;top:33%;width:25%;background:#131c2c;padding:5px;border-radius:21px;box-shadow:0 13px 24px #06112940;transform:rotate(5deg);transition:transform .65s var(--ease)}.showcase-phone>img{display:block;width:100%;height:auto;border-radius:16px}.showcase-phone>span{position:absolute;top:7px;left:34%;width:32%;height:7px;background:#131c2c;border-radius:0 0 8px 8px;z-index:2}.showcase-caption{position:absolute;bottom:48px;left:27px;right:30px;display:flex;align-items:center;justify-content:space-between;color:var(--ink)}.showcase-caption strong{display:block;font-size:29px;font-weight:800;letter-spacing:-.045em;line-height:1.35}.showcase-caption div>span{font-size:8px;letter-spacing:.11em;color:#6b7890}.showcase-arrow{width:42px;height:42px;display:grid;place-items:center;font-size:25px;border:1px solid #b0bdd2;border-radius:50%;transition:background .3s,transform .3s}.showcase-note{position:absolute;left:27px;bottom:23px;font-size:10px;color:#707f96}.hero-canvas:hover .showcase-window{transform:translateY(-7px) rotate(-2deg)}.hero-canvas:hover .showcase-phone{transform:translateY(-10px) rotate(1deg)}.hero-canvas:hover .showcase-arrow{background:white;transform:rotate(45deg)}
/* The same device presentation is used for all four projects. */
.work-section{background:#f8faff}.collection-count{display:flex;align-items:center;gap:15px;font-size:41px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink);margin-bottom:16px}.collection-count>span{font-size:11px;line-height:1.4;letter-spacing:0;font-weight:500;color:#71809c}.project-index{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #dbe2ee;border-bottom:1px solid #dbe2ee;margin:0 0 34px}.project-index>a{font-size:11px;display:flex;align-items:center;gap:10px;padding:18px 13px;border-right:1px solid #dbe2ee;transition:color .25s,background .25s;line-height:1.6}.project-index>a:first-child{padding-left:0}.project-index>a:last-child{border-right:0}.project-index>a:hover{color:var(--blue);background:#eff3ff}.project-index>a>span:first-child{font-size:9px;color:#95a2ba}.index-new{font-size:8px;letter-spacing:.02em;border-radius:4px;background:#e4ebff;color:#3657ba;padding:3px 5px;margin-left:auto}.case-list{gap:35px}.case-row{border:1px solid #dfe5ee;border-radius:20px;background:white;box-shadow:0 8px 26px #18274204;grid-template-columns:.85fr 1.3fr;overflow:hidden;isolation:isolate}.case-copy{padding:37px;background:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.case-top{margin-bottom:24px;gap:11px}.case-number{border:1px solid #c8d0df;background:transparent;color:#667591;font-size:10px;width:29px;height:29px;border-radius:50%}.case-top .micro-label{font-size:10px;line-height:1.6;color:#62718a}.case-copy h3{font-size:31px;line-height:1.2;letter-spacing:-.045em;max-width:330px;margin:0 0 17px}.case-copy>p{font-size:14px;line-height:1.85;max-width:380px;margin-bottom:24px}.project-tags{gap:6px;margin-bottom:25px}.project-tags li{font-size:9px;background:#f7f8fb;border:1px solid #e5e9f0;color:#61708a;border-radius:4px;padding:6px 8px}.case-copy .btn{font-size:12px;min-height:47px;padding:13px 19px;gap:22px;background:#15213c}.case-copy>.text-button{font-size:12px;margin-top:18px;line-height:1.6}.case-visual{position:relative;padding:27px 30px;min-height:460px;overflow:hidden;background:#e9eee5}.case-visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,#ffffff80,transparent 66%);z-index:0}.case-visual>*{position:relative}.case-peach{grid-template-columns:1.3fr .85fr}.case-peach .case-copy{order:2}.case-peach .case-visual{background:#f0e1d2}.case-rose .case-visual{background:#ede0e6}.case-copper{grid-template-columns:1.3fr .85fr}.case-copper .case-copy{order:2}.case-copper .case-visual{background:#e7d9cb}.visual-meta{font-size:9px;letter-spacing:.1em;color:#657067}.case-copper .visual-meta{color:#826c56}.desktop-device{filter:drop-shadow(0 20px 18px #19243c1a);transition:transform .6s var(--ease);transform:perspective(1200px) rotateY(-4deg)}.case-peach .desktop-device,.case-copper .desktop-device{transform:perspective(1200px) rotateY(4deg)}.phone-device{transition:transform .6s var(--ease),filter .6s;filter:drop-shadow(0 10px 10px #20203025)}.case-row:hover .desktop-device{transform:perspective(1200px) rotateY(0) translateY(-5px)}.case-row:hover .phone-device{transform:rotate(2deg) translateY(-8px)}.preview-caption{font-size:10px;position:relative;margin-top:19px;min-height:28px}.work-bottom{padding-top:32px}.work-bottom p{font-size:14px}.work-bottom .text-link{font-size:13px}
/* White and blue alternate in measured, equal section intervals. */
.service-grid{gap:17px}.service-card{background:#fff;border-radius:14px;border:1px solid var(--line);padding:27px 23px;transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}.service-card:hover{border-color:#9bb0ff;box-shadow:0 12px 35px #1a388411}.service-top>.icon{color:var(--blue)}.service-card h3{font-size:22px;letter-spacing:-.035em}.service-card>strong{font-size:12px;line-height:1.7}.service-card>p{font-size:14px;line-height:1.8;min-height:103px}.service-card li{font-size:12px;line-height:1.7}.service-top{margin-bottom:27px}
.shopify-section{background:#101b38;position:relative;overflow:hidden}.shopify-section .eyebrow{color:#9aaeff}.shopify-section h2>span{color:#a5b7e2}.shopify-section .heading-aside>p{color:#aab7d0}.theme-grid{gap:24px}.theme-card{border:1px solid #ffffff1c;border-radius:17px;overflow:hidden;background:#182542;transition:transform .5s var(--ease),border-color .3s}.theme-card:hover{border-color:#809afd}.theme-cover{overflow:hidden}.theme-cover>img{transition:transform .8s var(--ease)}.theme-card:hover .theme-cover>img{transform:scale(1.025)}.theme-details{padding:27px}.theme-details h3{font-size:31px}.theme-details>p{font-size:14px;line-height:1.8;color:#bdc8dd}.theme-details .micro-label{font-size:10px;color:#8f9dbc}.password-copy{font-size:12px;min-height:40px;gap:8px}.password-copy>span{font-size:11px}.cover-label{font-size:9px}.video-band{border-radius:12px;background:#243457;border:1px solid #ffffff14}.video-band strong{font-size:16px}.video-band .micro-label{font-size:10px}.app-card{border-radius:13px;overflow:hidden}.app-details{padding:22px}.app-details h4{font-size:20px;letter-spacing:-.03em}.app-details p{font-size:13px;line-height:1.8}.app-details .text-link,.app-details .text-button{font-size:12px}.app-status{font-size:8px}
.studio-grid{gap:9%;align-items:center}.studio-intro>p:not(.eyebrow){font-size:15px;line-height:1.9}.studio-signature{margin-top:29px;padding-top:25px;border-top:1px solid var(--line)}.studio-signature img{border-radius:50%;width:57px;height:57px}.studio-signature span{font-size:12px;line-height:1.7}.method{padding:31px;border-radius:15px;background:#f6f8fc;border:1px solid var(--line)}.method>.micro-label{font-size:11px;letter-spacing:.09em}.method li{padding-block:20px}.method li h3{font-size:17px}.method li p{font-size:13px;line-height:1.8}.method li>span{font-size:11px}.offers-section{background:#f3f6fc;border-block:1px solid #e4eaf5}.offers-grid{gap:16px}.offer-teaser{border-radius:13px;background:#fff;border:1px solid #dce3f1;padding:25px 23px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}.offer-teaser::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.offer-teaser:hover::before{transform:scaleX(1)}.offer-teaser:hover{box-shadow:0 10px 28px #203d7312;transform:translateY(-6px);border-color:#aabbf4}.offer-teaser>span:first-child{font-size:11px}.offer-teaser h3{font-size:17px}.offer-teaser strong{font-size:36px}.offer-link{font-size:12px;min-height:25px}.offers-note{font-size:12px}.offers-section .section-heading>div>p:not(.eyebrow){font-size:15px}
.reviews-layout>div>p:not(.eyebrow){font-size:15px;line-height:1.9}.reviews-image{border-radius:15px;border:1px solid var(--line);box-shadow:0 18px 50px #1127560a;transition:transform .5s var(--ease)}.reviews-image:hover{transform:translateY(-4px)}.reviews-image>span{font-size:12px}.resources-section{background:#f6f8fc}.resource-card{border:1px solid var(--line);border-radius:15px;background:white;overflow:hidden;padding:20px;transition:box-shadow .4s}.resource-card:hover{box-shadow:0 10px 30px #172c6610}.resource-card h3{font-size:22px}.resource-card p{font-size:13px;line-height:1.8}.resource-card .micro-label{font-size:9px;line-height:1.6}.resource-card .text-button{font-size:12px}.resource-card>img{border-radius:8px}.tutorials{border-radius:12px}.tutorials summary{font-size:14px;padding:20px 23px}.tutorial-list>a{font-size:13px}.documentation-link{font-size:13px}.documentation-link>span{font-size:12px}.faq-list summary{font-size:15px;padding-block:23px;line-height:1.6}.faq-list p{font-size:14px;line-height:1.9}.faq-list>details{transition:background .3s}.faq-list details[open]{background:#f8faff}.faq-list details[open]>p{animation:answer-in .35s var(--ease)}
.contact-section{background:#edf2ff;position:relative;isolation:isolate;overflow:hidden}.contact-section::before{content:"";position:absolute;z-index:-1;right:-160px;top:-130px;width:650px;height:650px;background:radial-gradient(circle,#ccd9fc8c,transparent 67%);pointer-events:none}.contact-grid{gap:9%;grid-template-columns:.9fr 1fr}.contact-copy h2{font-size:clamp(32px,3.4vw,45px)}.contact-copy>p:not(.eyebrow){font-size:15px;line-height:1.85;max-width:400px}.contact-form-wrap{padding:31px;border-radius:17px;border-color:#d6dff5;box-shadow:0 15px 50px #23387308}.contact-form-wrap label,.contact-form-wrap legend{font-size:13px}.contact-form-wrap input:not([type=radio]),.contact-form-wrap select,.contact-form-wrap textarea{font-size:14px;border-radius:7px;min-height:46px}.contact-form-wrap input:focus,.contact-form-wrap textarea:focus,.contact-form-wrap select:focus{outline:2px solid #98adff;outline-offset:2px}.contact-form-wrap .btn{font-size:13px;min-height:49px}.service-choices label>span{font-size:11px;min-height:46px}.direct-contacts strong{font-size:14px}.direct-contacts small{font-size:10px}.chat-button{font-size:13px}.form-note{font-size:11px;line-height:1.7}.form-heading>span{font-size:11px}.form-heading>small{font-size:10px}.message-ready>p{font-size:14px}.message-tools .text-button{font-size:12px}
.site-footer{background:#101b38;color:white;padding-top:43px}.site-footer .brand-dot{color:#8aa3ff}.site-footer .brand-sub{color:#9eaed1}.footer-top{border-color:#ffffff1c;padding-bottom:28px}.footer-top>p{color:#a8b6d0;font-size:12px}.back-top{border-color:#ffffff35;color:#bdccf0}.back-top:hover{background:#293a63}.footer-links nav,.social-links{font-size:12px;color:#b3c1dc}.footer-links a:hover{color:#fff}.footer-bottom{border-color:#ffffff1c;font-size:10px;color:#8b9bbd}.floating-whatsapp{background:#1b9e66;border-color:#fff7;width:51px;height:51px;right:24px;bottom:23px;box-shadow:0 8px 25px #12513f26}.floating-whatsapp>.icon{width:25px;height:25px}.floating-whatsapp>span{font-size:11px;background:#153e34}
.preview-dialog{border-radius:17px}.preview-body{background:#eaf0f7}.dialog-head h2{font-size:27px}.dialog-head .eyebrow{font-size:11px}.dialog-intro{font-size:14px}.price-card>p{font-size:13px}.price-card li{font-size:12px}.price-card>.btn{font-size:12px}.price-card .micro-label{font-size:11px}.plans-note>p{font-size:13px}.plans-note>.text-button{font-size:12px}.view-switch>button{font-size:12px;min-height:38px}.preview-toolbar>.text-link{font-size:12px}.icon-button{min-width:42px;min-height:42px}.toast{font-size:12px}
/* Reveals vary by section; CSS never hides content without JavaScript. */
.reveal.is-observed{transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--delay,0ms);transform:translateY(25px);opacity:0}.reveal[data-motion=left].is-observed{transform:translateX(-24px)}.reveal[data-motion=right].is-observed{transform:translateX(24px)}.reveal[data-motion=focus].is-observed{transform:translateY(20px) scale(.97)}.reveal[data-motion=case].is-observed{transform:translateY(35px)}.reveal.is-observed.is-visible{transform:none;opacity:1}.case-row.is-observed .case-visual .device-scene{transform:translateY(15px);opacity:0;transition:transform 1s var(--ease) .17s,opacity .8s ease .17s}.case-row.is-visible .case-visual .device-scene{transform:none;opacity:1}
@media(prefers-reduced-motion:no-preference){.hero-copy>*{animation:hero-in .85s var(--ease) both}.hero-copy>.eyebrow{animation-delay:.05s}.hero-copy>h1{animation-delay:.13s}.hero-lead{animation-delay:.22s}.hero-actions{animation-delay:.3s}.hero-note{animation-delay:.38s}.hero-canvas{animation:canvas-in 1.1s var(--ease) both}.hero-canvas .showcase-phone{animation:phone-float 7s ease-in-out infinite 1.2s}.hero-canvas:hover .showcase-phone{animation-play-state:paused}}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes canvas-in{from{opacity:0;transform:translateY(30px) rotate(4deg)}to{opacity:1;transform:rotate(1.5deg)}}@keyframes phone-float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-8px) rotate(4deg)}}@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero{padding-top:70px}.hero-grid{padding-bottom:64px}.hero h1{font-size:64px}}
@media(max-width:1100px){.desktop-nav{gap:16px}.desktop-nav a,.desktop-nav button{font-size:11px}.header-cta{font-size:11px;padding:12px 14px}.hero-grid{gap:6%}.hero h1{font-size:46px}.hero-canvas{aspect-ratio:.98}.hero-actions .btn{font-size:11px;padding:12px 14px}.case-copy{padding:29px}.case-copy h3{font-size:28px}.case-copy>p{font-size:13px}.case-visual{min-height:448px;padding:24px}.service-card{padding:24px 20px}.service-card h3{font-size:20px}.service-card>p{min-height:127px;font-size:13px}.service-card li{font-size:11px}.project-index>a{font-size:10px;gap:7px}.index-new{display:none}.contact-grid{gap:6%}.contact-form-wrap{padding:25px}.app-details{padding:19px}.app-details h4{font-size:18px}}
@media(max-width:880px){.header-inner{min-height:77px}.header-cta{font-size:12px}.section{padding-block:72px}.hero{padding-top:46px}.hero-grid{gap:6%;padding-bottom:46px}.hero h1{font-size:40px}.hero-lead{font-size:14px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.07em}.hero-actions{gap:9px}.hero-actions .btn{font-size:11px;padding:12px;gap:9px}.hero-canvas{aspect-ratio:.83;margin-top:12px}.showcase-window{top:23%;width:103%;left:-7%}.showcase-phone{top:40%;width:28%}.canvas-label{left:19px;right:19px;top:20px;font-size:7px}.canvas-label b{font-size:7px}.showcase-caption{left:19px;right:19px;bottom:46px}.showcase-caption strong{font-size:25px}.showcase-caption div>span{font-size:7px;max-width:140px;display:block}.showcase-note{left:19px;font-size:9px;bottom:20px}.showcase-arrow{width:33px;height:33px;font-size:22px}.hero-foot>span:first-child{font-size:9px}.hero-foot p{font-size:11px}.section-heading.split{gap:6%;grid-template-columns:1.1fr 1fr}.section-heading.split>p,.heading-aside>p{font-size:14px}.case-row,.case-peach,.case-copper{grid-template-columns:.9fr 1.1fr}.case-peach .case-copy,.case-copper .case-copy{order:0}.case-copy{padding:25px}.case-copy h3{font-size:25px}.case-visual{padding:22px 18px;min-height:460px}.case-top .micro-label{font-size:9px}.case-top{margin-bottom:19px}.project-tags li{font-size:8px}.case-copy .btn{font-size:11px;padding:12px;gap:14px}.case-copy>.text-button{font-size:11px}.visual-meta{font-size:7px}.service-card>p{min-height:0;font-size:14px}.service-card li{font-size:12px}.service-card{padding:27px}.service-card h3{font-size:23px}.service-card>strong{font-size:13px}.studio-grid{gap:5%}.method{padding:25px}.method li h3{font-size:15px}.method li p{font-size:12px}.offer-teaser{padding:21px 17px}.offer-teaser h3{font-size:15px}.offer-teaser strong{font-size:31px}.offer-link{font-size:11px}.app-details p{font-size:12px}.app-details h4{font-size:16px}.contact-copy h2{font-size:33px}.contact-copy>p:not(.eyebrow){font-size:14px}.direct-contacts strong{font-size:12px}.chat-button{font-size:12px}.resource-card p{font-size:14px}}
@media(max-width:640px){:root{--gutter:22px}.section{padding-block:58px}h2{font-size:31px;line-height:1.23}.eyebrow{font-size:10px;letter-spacing:.1em}.section-heading{margin-bottom:27px}.section-heading.split{grid-template-columns:1fr;gap:18px}.announcement{font-size:10px}.announcement>.container{min-height:29px}.header-inner{min-height:72px;gap:10px}.brand-name{font-size:25px}.brand-sub{font-size:7px}.header-cta{font-size:10px;min-height:39px;padding:10px 11px;gap:10px}.menu-toggle{width:38px;height:38px}.hero{padding-top:38px}.hero-grid{grid-template-columns:1fr;gap:0;padding-bottom:35px}.hero-copy .eyebrow{font-size:10px;margin-bottom:18px}.hero h1{font-size:clamp(35px,10vw,51px);line-height:1.14;margin:18px 0 21px}.hero-lead{font-size:14px;line-height:1.85;max-width:450px;margin-bottom:24px}.hero-actions{gap:10px}.hero-actions .btn{font-size:11px;padding:12px 13px;min-height:46px;gap:10px}.hero-canvas{margin:37px auto 0;width:93%;max-width:440px;aspect-ratio:1.03;max-height:none;border-radius:17px;justify-self:center}.canvas-label{top:21px;left:21px;right:21px;font-size:7px}.canvas-label b{font-size:7px}.showcase-window{left:-5%;top:21%;width:101%;border-width:4px;border-radius:8px}.showcase-window .window-bar{height:19px}.showcase-window .window-bar small{font-size:6px}.showcase-phone{top:34%;width:26%;padding:4px;border-radius:17px;right:-4%}.showcase-phone>img{border-radius:13px}.showcase-phone>span{top:5px;height:5px}.showcase-caption{left:21px;right:21px;bottom:38px}.showcase-caption strong{font-size:25px}.showcase-caption div>span{font-size:6px;max-width:none}.showcase-arrow{width:32px;height:32px;font-size:21px}.showcase-note{left:21px;bottom:18px;font-size:8px}.hero-foot{gap:10px;min-height:92px;padding-block:18px;grid-template-columns:repeat(3,1fr)}.hero-foot>span:first-child{font-size:8px;margin-bottom:4px}.hero-foot p{font-size:10px;line-height:1.6}.collection-count{font-size:34px;margin-bottom:13px;gap:12px}.collection-count>span{font-size:10px}.heading-aside>p{font-size:14px}.section-note{font-size:11px}.project-index{grid-template-columns:1fr 1fr;margin-bottom:26px}.project-index>a{font-size:10px;padding:13px 9px;gap:7px}.project-index>a:first-child{padding-left:9px}.project-index>a:nth-child(2){border-right:0}.project-index>a:nth-child(-n+2){border-bottom:1px solid #dbe2ee}.case-list{gap:25px}.case-row,.case-peach,.case-copper{grid-template-columns:1fr;border-radius:15px}.case-copy{order:2!important;padding:26px}.case-copy h3{font-size:28px;max-width:none;margin-bottom:15px}.case-copy>p{font-size:14px;line-height:1.85;max-width:none;margin-bottom:19px}.case-top{margin-bottom:19px}.case-top .micro-label{font-size:10px}.case-number{font-size:9px;width:26px;height:26px}.project-tags{margin-bottom:22px;gap:6px}.project-tags li{font-size:9px;line-height:1.5;padding:6px 8px}.case-copy .btn{font-size:12px;min-height:47px;padding:13px 17px}.case-copy>.text-button{font-size:12px;margin-top:17px}.case-visual{min-height:0;padding:21px 21px 15px}.visual-meta{font-size:7px;letter-spacing:.065em;margin-bottom:12px}.device-scene{aspect-ratio:1.42;margin-block:8px}.preview-caption{font-size:9px;margin-top:12px;min-height:29px}.work-bottom{padding-top:27px;gap:15px}.work-bottom p{font-size:14px}.work-bottom .text-link{font-size:12px}.service-grid{gap:13px}.service-card{padding:22px 17px}.service-card h3{font-size:20px}.service-card>strong{font-size:11px;line-height:1.7}.service-card>p{font-size:13px;line-height:1.8;margin-bottom:17px}.service-card li{font-size:11px;line-height:1.7}.service-top{margin-bottom:20px}.theme-details{padding:23px}.theme-details h3{font-size:29px}.theme-details>p{font-size:14px}.theme-details .micro-label{font-size:9px}.cover-label{font-size:8px}.password-copy{font-size:12px;min-height:42px}.video-band strong{font-size:13px}.video-band .micro-label{font-size:9px}.video-band{padding:21px}.video-band>span:last-child{font-size:0}.apps-heading>span{font-size:12px}.app-details{padding:18px}.app-details h4{font-size:18px}.app-details p{font-size:13px;line-height:1.85}.app-details .text-link,.app-details .text-button{font-size:12px}.app-status{font-size:7px}.studio-intro>p:not(.eyebrow){font-size:14px}.method{padding:25px}.method>.micro-label{font-size:10px}.method li h3{font-size:16px}.method li p{font-size:13px}.studio-signature span{font-size:11px}.offers-grid{gap:12px}.offer-teaser{padding:22px 18px}.offer-teaser h3{font-size:16px;min-height:38px}.offer-teaser>span:first-child{font-size:10px}.offer-teaser strong{font-size:32px}.offer-link{font-size:11px}.offers-note{font-size:11px;line-height:1.8}.offers-section .section-heading>div>p:not(.eyebrow){font-size:14px}.reviews-layout>div>p:not(.eyebrow){font-size:14px}.resource-card{padding:17px}.resource-card h3{font-size:23px}.resource-card p{font-size:14px}.resource-card .micro-label{font-size:9px}.resource-card .text-button{font-size:12px;line-height:1.7}.tutorials summary{font-size:13px;padding:18px}.tutorial-list>a{font-size:12px}.documentation-link{font-size:12px;line-height:1.8}.documentation-link>span{font-size:11px}.faq-list summary{font-size:14px;padding-block:21px;line-height:1.7}.faq-list p{font-size:13px;line-height:1.85}.contact-grid{grid-template-columns:1fr;gap:30px}.contact-copy h2{font-size:33px}.contact-copy>p:not(.eyebrow){font-size:14px}.direct-contacts strong{font-size:14px}.direct-contacts small{font-size:10px}.chat-button{font-size:13px}.contact-form-wrap{padding:24px 20px}.contact-form-wrap input:not([type=radio]),.contact-form-wrap select,.contact-form-wrap textarea{font-size:16px}.contact-form-wrap input::placeholder,.contact-form-wrap textarea::placeholder{font-size:13px}.contact-form-wrap label,.contact-form-wrap legend{font-size:13px}.contact-form-wrap .service-choices label>span{font-size:10px;line-height:1.7}.contact-form-wrap .btn{font-size:12px}.form-heading>span{font-size:10px}.form-heading>small{font-size:9px}.form-note{font-size:10px}.form-row{grid-template-columns:1fr}.footer-top>p{font-size:12px}.footer-links nav,.social-links{font-size:11px;gap:15px}.footer-bottom{font-size:10px;line-height:1.7}.floating-whatsapp{right:17px;bottom:17px;width:48px;height:48px}.view-switch>button{font-size:11px;padding:8px 10px}.preview-toolbar>.text-link{font-size:11px}.dialog-head h2{font-size:24px}.dialog-head .eyebrow{font-size:10px}.price-card li{font-size:12px}.plans-note>p{font-size:12px}.message-tools .text-button{font-size:11px}}
@media(max-width:389px){:root{--gutter:18px}.brand-name{font-size:22px}.header-cta{font-size:9px;padding:10px 9px;gap:7px}.header-inner{gap:8px}.hero-copy .eyebrow{font-size:9px}.hero-actions .btn{font-size:10px;padding:12px 10px;gap:7px}.hero h1{font-size:35px}.case-copy{padding:22px}.case-copy h3{font-size:26px}.case-visual{padding-inline:17px}.service-grid{grid-template-columns:1fr}.service-card{padding:25px}.service-card h3{font-size:23px}.service-card>p{font-size:14px}.service-card li{font-size:12px}.project-index>a{font-size:9px}.offer-teaser{padding:19px 14px}.offer-teaser h3{font-size:15px}.offer-teaser strong{font-size:28px}.showcase-caption{bottom:33px}.showcase-caption strong{font-size:22px}.showcase-note{bottom:15px;font-size:7px}.showcase-caption div>span{font-size:5.5px}.canvas-label,.canvas-label b{font-size:6px}.showcase-phone{border-radius:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal.is-observed{opacity:1!important;transform:none!important}.case-row.is-observed .case-visual .device-scene{opacity:1;transform:none}.hero-canvas{transform:rotate(1.5deg)}}
@media print{.hero{background:white;color:#101b38}.hero h1{color:#101b38}.hero-lead{color:#5f6b81}.site-header,.floating-whatsapp,.reading-progress{display:none}.reveal.is-observed{opacity:1;transform:none}.section{padding-block:30px}.case-row{break-inside:avoid}}
/* Keep the project caption clear of the two previews at every width. */
.showcase-window{width:96%;top:18%}.showcase-window>img{aspect-ratio:1.95;object-position:top}.showcase-phone{top:28%;width:24%}.showcase-arrow{position:relative}.hero-canvas{aspect-ratio:1.02}
@media(max-width:880px) and (min-width:641px){.hero-canvas{aspect-ratio:.83}.showcase-window{top:24%;width:101%}.showcase-phone{top:39%;width:28%}}
@media(max-width:640px){.hero-canvas{aspect-ratio:1.03}.showcase-window{top:19%;width:98%}.showcase-window>img{aspect-ratio:2.1}.showcase-phone{top:29%;width:24%}.showcase-arrow{display:none}.showcase-caption{bottom:38px}.showcase-caption div>span{font-size:7px}}
.showcase-arrow{display:none}.offer-teaser.reveal.is-visible:hover{transform:translateY(-6px)}
@media(max-width:640px){.reveal[data-motion=left].is-observed{transform:translateX(-16px)}.reveal[data-motion=right].is-observed{transform:translateX(16px)}.reveal.is-observed.is-visible{transform:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-actions .btn{font-size:10px;gap:7px;padding:12px 9px;justify-content:center}.hero-actions .btn .icon{width:14px;height:14px;flex-basis:14px}.showcase-window{width:94%;top:17%}.showcase-window>img{aspect-ratio:2.15}.showcase-caption{bottom:31px}.showcase-caption div>span{font-size:7px;line-height:1.5}.showcase-note{bottom:12px}.showcase-phone{top:27%}.resource-card{display:block}.resource-card>img{width:100%;height:auto;aspect-ratio:1.78;object-fit:cover}.resource-card>div{padding:20px 4px 4px}}
@media(max-width:359px){.hero-actions{grid-template-columns:1fr}.hero-actions .btn{font-size:11px;justify-content:space-between;padding:12px 15px}.hero-canvas{aspect-ratio:.98}}
/* V18 — un studio de création web, des exemples à chaque écran. */
.hero{background:#101b38;padding-top:64px}.hero-grid{grid-template-columns:.92fr 1.08fr;gap:5%;padding-bottom:64px}.hero h1{font-size:clamp(40px,4.35vw,64px);line-height:1.08}.hero-copy .eyebrow{letter-spacing:.13em}.hero-lead{max-width:470px;font-size:15px}.web-studio-visual{min-width:0;background:#eaf0fb;border:1px solid #ffffff45;border-radius:18px;box-shadow:0 35px 70px #040c2360;overflow:hidden;transform:rotate(1deg)}.studio-toolbar{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:17px 19px;color:#334563;font-size:9px;letter-spacing:.09em}.studio-toolbar>span:first-child{display:flex;gap:5px}.studio-toolbar i{width:7px;height:7px;background:#afbfdf;border-radius:50%;display:block}.studio-toolbar i:first-child{background:#3156f4}.studio-stage{height:340px;position:relative;background:radial-gradient(ellipse at 70% 40%,#fff 0,transparent 65%),linear-gradient(140deg,#d7e3ff,#e7eaff);overflow:hidden}.studio-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#526fa809 1px,transparent 1px),linear-gradient(90deg,#526fa809 1px,transparent 1px);background-size:24px 24px}.studio-browser{position:absolute;left:6%;top:50px;width:80%;border:5px solid #1a2941;border-radius:10px;overflow:hidden;box-shadow:0 20px 30px #26365330;transform:perspective(1000px) rotateY(-5deg);transition:transform .5s}.studio-browser:hover{transform:translateY(-4px)}.studio-address{background:#1a2941;color:#c5cee0;font-size:8px;padding:7px;display:flex;justify-content:space-between}.studio-browser img{width:100%;height:auto;display:block}.studio-mobile{position:absolute;right:4%;top:97px;width:24%;border:5px solid #15243e;border-radius:19px;overflow:hidden;box-shadow:0 16px 28px #14223a44;transform:rotate(5deg);transition:transform .5s}.studio-mobile:hover{transform:rotate(0deg) translateY(-5px)}.studio-mobile img{width:100%;display:block}.studio-chip{position:absolute;top:15px;left:6%;background:#fff;color:#34476b;font-size:9px;padding:7px 12px;border-radius:5px;box-shadow:0 3px 12px #2636530a}.chip-mobile{top:auto;bottom:13px;left:9%;background:#3156f4;color:#fff}.studio-project-strip{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.studio-project-strip a{min-width:0;background:white;border-radius:7px;overflow:hidden;color:#405271;transition:transform .3s}.studio-project-strip a:hover{transform:translateY(-4px)}.studio-project-strip img{width:100%;height:65px;object-fit:cover;object-position:top;display:block}.studio-project-strip span{display:block;font-size:8px;padding:8px;white-space:nowrap}.studio-status{display:flex;justify-content:space-between;gap:8px;padding:0 16px 16px;font-size:8px;color:#62718b}.project-index{grid-template-columns:repeat(5,1fr)}.case-julia .case-visual{background:#dce9e5}.case-julia .visual-meta{color:#42685e}
@media(max-width:1100px){.studio-stage{height:290px}.hero-grid{gap:4%}.hero h1{font-size:46px}.studio-toolbar{font-size:8px}.studio-status{font-size:7px}}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:38px}.hero-copy{max-width:620px}.hero-lead{max-width:570px}.web-studio-visual{width:100%;max-width:580px;justify-self:center;transform:none}.studio-stage{height:340px}.hero h1{font-size:54px}.project-index{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.hero{padding-top:38px}.hero-grid{padding-bottom:38px;gap:30px}.hero h1{font-size:clamp(35px,10vw,48px);margin-block:20px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.09em}.hero-lead{font-size:14px}.studio-stage{height:245px}.studio-browser{top:50px;width:83%;left:4%}.studio-mobile{top:88px;width:26%;right:3%;border-width:4px;border-radius:15px}.studio-toolbar{padding:13px 12px;font-size:7px}.studio-project-strip{padding:11px;gap:6px}.studio-project-strip img{height:45px}.studio-project-strip span{font-size:6px;padding:7px 4px}.studio-status{padding:0 11px 12px;font-size:6px}.studio-chip{font-size:8px}.project-index{grid-template-columns:repeat(2,1fr)}.project-index>a{padding:14px 8px}.project-index>a:first-child{padding-left:8px}}
@media(prefers-reduced-motion:reduce){.studio-browser,.studio-mobile,.studio-project-strip a{transition:none}}