/* Oficio — studio identity, 27 September 2026. */
.commercial{--ink:#0b2348;--muted:#283d58;--accent:#2455ed;--surface:#edf2ff;--line:#b9c8de;background:#fff;color:var(--ink);font-size:18px}
.commercial .shell{width:min(1360px,calc(100% - 96px))}.commercial p{color:var(--muted)}.commercial a,.commercial button{touch-action:manipulation}.commercial :focus-visible{outline:3px solid #2455ed;outline-offset:5px}.commercial section[id],.commercial h2{scroll-margin-top:28px}.commercial .site-header{position:relative;background:#0b2348;color:white;border:0}.home-nav{padding-block:26px;gap:38px;min-height:104px}.oficio-logo{display:block;width:160px;height:auto}.home-nav .oficio-logo{content:url('assets/oficio-logo-white.svg');width:167px}.home-nav nav{font-size:17px;color:white;gap:30px}.home-nav nav a{padding-block:8px}.home-nav nav a:hover{color:#bad0ff}.commercial .button{font-size:17px}.commercial .primary{border-radius:6px;min-height:56px;padding:15px 25px;font-size:17px;font-weight:700}.home-nav>.primary{background:white;color:#0b2348;border-color:white;min-height:50px}.home-nav>.primary:hover{background:#d9e6ff;border-color:#d9e6ff}.commercial .button-outline{border:1px solid #2455ed;border-radius:6px;color:#2455ed;background:white;padding:15px 24px;min-height:54px;font-weight:700}.commercial .text-action{font-size:18px;line-height:1.5;min-height:44px}.commercial .primary .icon{width:23px;height:23px}
/* Opening composition: one dark field, a large claim, real navigable screens. */
.studio-hero{background:#0b2348;color:white;overflow:hidden;padding:26px 0 0}.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;column-gap:55px;position:relative}.hero-copy{padding:25px 0 65px;position:relative;z-index:2}.hero-topline{font-size:18px;font-weight:600;margin-bottom:27px;color:#fff!important}.studio-hero h1{font-size:clamp(62px,5.8vw,88px);font-weight:600;line-height:1.02;letter-spacing:-.065em;text-wrap:initial;margin:0}.hero-description{margin-top:30px;max-width:40ch}.hero-description>p{font-size:21px;line-height:1.55;color:#fff}.hero-description .primary{margin-top:29px;background:#fff;color:#0b2348;border-color:#fff}.hero-description .primary:hover{background:#d9e6ff;border-color:#d9e6ff}.hero-explore{display:block;width:fit-content;font-size:17px;margin-top:21px;text-decoration:underline;text-underline-offset:6px;color:#fff}.studio-hero :focus-visible,.site-header :focus-visible{outline-color:#9bbeff}.hero-canvas{position:relative;min-width:0;min-height:600px;margin-right:-75px;isolation:isolate}.hero-canvas:before{content:'';position:absolute;inset:15% -50% -15% 9%;border-radius:50% 0 0 0;background:#2455ed;transform:rotate(-9deg);z-index:-1}.hero-canvas>a{position:absolute;display:block;background:white;color:#0b2348;box-shadow:0 18px 45px #020e2545;border:1px solid #aebfe2;overflow:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.hero-canvas>a>span{display:flex;justify-content:space-between;padding:13px 15px;font-size:15px;font-weight:700;line-height:1.2;background:#fff}.hero-canvas img{display:block;width:100%;height:auto}.hero-screen{width:100%;right:-2%;top:65px;transform:rotate(-6deg);border-radius:8px}.hero-screen:hover{transform:rotate(-3deg) translateY(-8px)}.hero-phone{width:27%;left:-7%;top:267px;border:6px solid #fff!important;border-radius:23px;z-index:3;transform:rotate(-8deg)}.hero-phone:hover{transform:rotate(-4deg) translateY(-6px)}.hero-software{width:77%;right:-5%;top:397px;transform:rotate(4deg);border-radius:7px;z-index:2}.hero-software:hover{transform:rotate(1deg) translateY(-7px)}.hero-baseline{grid-column:1/-1;display:flex;justify-content:space-between;gap:30px;padding:26px 0;border-top:1px solid #4d6689;font-size:16px;z-index:4;background:#0b2348}.hero-canvas>a{animation:screen-entry .9s cubic-bezier(.2,.7,.2,1) both}.hero-canvas>.hero-phone{animation-delay:.13s}.hero-canvas>.hero-software{animation-delay:.24s}@keyframes screen-entry{from{opacity:0;translate:35px 45px}to{opacity:1;translate:0 0}}
.commercial main h2{font-size:clamp(44px,4.8vw,70px);font-weight:600;line-height:1.06;letter-spacing:-.06em}.commercial .section-intro{font-size:21px;line-height:1.6;margin-top:25px;max-width:65ch}.service-intro{padding-block:95px}.service-paths{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:45px}.service-paths>a{display:block;padding-top:30px;border-top:3px solid #2455ed}.service-paths h3{font-size:33px;letter-spacing:-.035em}.service-paths p{font-size:19px;line-height:1.65;margin-top:19px;max-width:45ch}.service-paths>a>span{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:700;color:#2455ed;margin-top:25px}.service-paths>a>span>span{font-size:33px;transition:transform .2s}.service-paths>a:hover>span>span{transform:translate(4px,-4px)}
/* The portfolio has three broad, distinct project compositions. */
.portfolio-service{padding-block:95px;background:#edf2ff}.web-offers{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}.web-offers p{font-size:17px;padding:10px 18px;border:1px solid #9baecc;border-radius:5px;white-space:nowrap}.web-offers strong{font-weight:600}.concept-note{font-size:18px;color:#102b52!important;max-width:78ch;line-height:1.6;margin:25px 0 45px}.web-projects{display:grid;gap:36px;margin-bottom:36px}.web-project{display:grid;grid-template-columns:1.75fr 1fr;grid-template-rows:auto auto 1fr;column-gap:42px;padding:45px;min-width:0;background:#fff1e5;border-radius:8px;color:#562c22;overflow:hidden}.project-heading{grid-column:2;align-self:end}.project-heading h3{font-size:54px;font-weight:600;letter-spacing:-.045em;line-height:1.1}.project-heading span{display:block;font-size:18px;margin-top:12px}.device-pair{grid-column:1;grid-row:1/4;position:relative;padding:0 35px 25px 0;min-width:0;align-self:center}.device-pair>a{display:block;border-radius:5px;overflow:hidden;box-shadow:0 10px 22px #0b234822;transition:transform .5s}.device-pair>a:hover{transform:translateY(-6px)}.device-pair img{display:block;width:100%;height:auto}.device-pair .mobile-shot{position:absolute;right:0;bottom:0;width:22%;border:4px solid #152b43;border-radius:12px;box-shadow:0 7px 18px #0b234829}.web-project>p{grid-column:2;font-size:19px;line-height:1.6;color:inherit;margin-top:24px;max-width:36ch}.web-project>.text-action{grid-column:2;align-self:start;justify-self:start;font-size:18px;color:inherit;text-decoration:underline;text-underline-offset:6px;margin-top:20px}#project-forma .project-heading h3{font-family:Georgia,serif;font-style:italic;font-size:65px}#project-cauce{background:#dbe7e8;color:#173137;grid-template-columns:1fr 1.75fr}#project-cauce .device-pair{grid-column:2}#project-cauce .project-heading,#project-cauce>p,#project-cauce>.text-action{grid-column:1}#project-sur{background:#d8e9dd;color:#164e3b}#project-sur .project-heading h3{font-weight:800}
/* Software stays concrete and legible. */
.solutions{padding-block:95px 65px}.sector-section{margin-top:65px}.sector-heading{font-size:20px;font-weight:700;padding-bottom:18px;border-bottom:1px solid #b9c8de;color:#0b2348!important}.commercial .lab-feature{grid-template-columns:1fr 1.3fr;gap:50px;padding-block:32px;align-items:center}.commercial .lab-feature h3{font-size:38px;line-height:1.13;font-weight:650}.commercial .lab-feature-copy{min-width:0}.commercial .lab-feature-copy>p{font-size:19px;line-height:1.65}.commercial .feature-points li{font-size:18px;line-height:1.65;margin-bottom:16px}.commercial .lab-feature-copy>.small-note{font-size:16px}.commercial .lab-feature-copy>.text-action{font-size:18px}.cph-gallery{min-width:0;background:#edf2ff;padding:23px;border-radius:8px}.commercial .capture-selector{gap:8px}.commercial .capture-selector button{font-size:16px;min-height:46px;flex:1;padding:10px 12px;background:#fff;border:1px solid #aebfd8;color:#102b52}.commercial .capture-selector button[aria-pressed=true]{background:#2455ed;color:white;border-color:#2455ed}.commercial .capture-open>span{font-size:16px;padding:14px 17px}.commercial .cph-gallery figcaption{font-size:17px}.commercial .small-note{font-size:16px;color:#283d58;line-height:1.6}.commercial .sector-note{font-size:17px;line-height:1.65;background:#f1f5fc;padding:22px;border-left:3px solid #2455ed}.commercial .lab-proposals{gap:30px;margin-top:40px}.commercial .lab-proposals article{padding:32px;background:#edf2ff;border:0;border-radius:8px}.commercial .lab-proposals h3{font-size:31px}.commercial .lab-proposals p,.commercial .feature-detail{font-size:18px}.commercial .lab-proposals .proposal-type{font-size:16px;color:#283d58}.commercial .result-route li{font-size:16px}.commercial .stock-preview>div:first-child,.commercial .stock-preview>p{font-size:17px}.commercial .stock-track{display:none}.commercial .sector-layout{padding-top:45px;border-top:1px solid var(--line);margin-top:45px}.commercial .sector-copy h3{font-size:35px}.commercial .sector-copy p,.commercial .solution-row p{font-size:19px}.commercial .solution-row h4{font-size:29px}
.creation{padding-block:85px;border-top:1px solid var(--line)}.method-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;align-items:center;margin-top:45px}.build-diagram{background:#edf2ff;border-radius:8px;padding:28px}.build-diagram>p,.build-diagram .diagram-caption{font-size:17px}.build-diagram .diagram-source,.build-diagram .diagram-result{font-size:20px;padding:18px;width:80%;min-width:0;border-radius:5px}.build-diagram .diagram-lines{height:48px}.build-diagram .diagram-agents{gap:10px}.build-diagram .diagram-agents>div{font-size:16px;padding:15px 6px;gap:7px;min-height:65px;border-radius:5px}.build-diagram .diagram-agents .icon{width:20px;height:20px}.creation-steps{display:flex;flex-direction:column;gap:32px;margin:0}.creation-steps li{position:relative;padding-left:44px}.creation-steps .step-number{position:absolute;left:0;top:2px;font-size:21px;color:#2455ed}.creation-steps h3{font-size:26px;margin-bottom:10px}.creation-steps p{font-size:18px;line-height:1.65}.commercial .scope-note{font-size:18px;line-height:1.6;margin-top:30px}.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding-block:15px 90px}.faq details{border-bottom:1px solid #b9c8de}.faq summary{cursor:pointer;font-size:20px;font-weight:650;padding:24px 5px;line-height:1.5}.faq details p{font-size:18px;line-height:1.7;padding:0 5px 24px;max-width:65ch}.faq details[open] summary{color:#2455ed}
.studio-contact{background:#2455ed;color:white;padding-block:90px}.studio-contact .inquiry-layout{grid-template-columns:1fr 1fr;gap:75px}.studio-contact p,.studio-contact .small-note{color:white}.studio-contact .section-intro{font-size:22px}.studio-contact #inquiry-form{background:white;color:#0b2348;padding:35px;border-radius:8px}.studio-contact #inquiry-form .small-note{color:#283d58;font-size:16px}.studio-contact .inquiry-field label,.inquiry-preview label{font-size:18px;line-height:1.5;font-weight:600}.inquiry-field input,.inquiry-field select,.inquiry-field textarea,#inquiry-message{display:block;width:100%;min-width:0;background:#fff;color:#102b52;border:1px solid #6f85a3;font-size:18px;padding:14px;border-radius:4px;line-height:1.5}.inquiry-field textarea::placeholder{color:#3d526e}.inquiry-preview label{display:block;font-size:17px;margin-top:18px}#inquiry-message{font:inherit;font-size:18px;resize:vertical;white-space:pre-wrap;margin:15px 0 22px}#copy-inquiry{margin-top:12px}#inquiry-status{font-size:17px;color:#175732;margin-top:18px}.commercial [role=status]:empty{margin:0}.home-footer{padding-block:42px;gap:30px}.home-footer .oficio-logo{width:150px}.commercial .home-footer p{font-size:17px}.home-footer>.text-action{font-size:18px}.commercial dialog{overscroll-behavior:contain}.commercial .capture-heading p,.commercial .capture-dialog>p,.commercial .lab-queue span,.commercial .lab-history,.commercial .stock-item label{font-size:16px}.commercial .lab-result-detail>p,.commercial .lab-result-detail label,.commercial .stock-item p,.commercial .stock-replenish>p{font-size:18px}.commercial .lab-result-detail textarea,.commercial .stock-item input{font-size:18px}
@media(max-width:1100px){.commercial .shell{width:calc(100% - 64px)}.home-nav{gap:24px}.home-nav nav{gap:18px;font-size:16px}.home-nav .oficio-logo{width:145px}.hero-grid{column-gap:25px}.studio-hero h1{font-size:64px}.hero-copy{padding-bottom:55px}.hero-description>p{font-size:20px}.hero-canvas{margin-right:-35px;min-height:655px}.hero-screen{top:90px}.hero-phone{top:250px;width:30%}.hero-software{top:405px;width:88%}.web-project{padding:30px;column-gap:30px;grid-template-columns:1.5fr 1fr}#project-cauce{grid-template-columns:1fr 1.5fr}.web-project>p{font-size:18px}.commercial .lab-feature{gap:30px;grid-template-columns:1fr 1fr}.commercial .lab-feature h3{font-size:34px}.method-layout{gap:30px}.studio-contact .inquiry-layout{gap:40px}.build-diagram .diagram-agents>div{flex-direction:column}.commercial main h2{font-size:52px}}
@media(max-width:760px){.commercial .shell{width:calc(100% - 40px)}.home-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-block:20px;min-height:0}.home-nav .oficio-logo{width:132px}.home-nav nav{order:3;display:flex;width:100%;margin:0;justify-content:space-between;gap:12px;border-top:1px solid #4d6689;border-bottom:0;padding:12px 0 0;font-size:15px}.home-nav nav a{padding:5px 0}.home-nav>.primary{font-size:16px;padding:11px 17px;min-height:46px}.commercial .primary{font-size:17px;min-height:54px;padding:14px 20px}.studio-hero{padding-top:10px}.hero-grid{display:block}.hero-copy{padding:15px 0 34px}.hero-topline{font-size:16px;margin-bottom:22px}.studio-hero h1{font-size:clamp(44px,11.2vw,72px);letter-spacing:-.055em;line-height:1.06}.hero-description{margin-top:25px;max-width:40ch}.hero-description>p{font-size:19px}.hero-description .primary{margin-top:23px}.hero-explore{font-size:17px;margin-top:18px}.hero-canvas{height:420px;min-height:0;margin:0 -20px}.hero-canvas:before{inset:9% -30% -10% 13%;border-radius:50% 0 0 0;transform:rotate(-9deg)}.hero-screen{width:85%;right:1%;top:22px;transform:rotate(-5deg)}.hero-canvas>a>span{font-size:12px;padding:10px 12px}.hero-phone{width:25%;left:1%;top:122px;border-width:4px!important;border-radius:17px}.hero-software{width:72%;right:-4%;top:225px;transform:rotate(4deg)}.hero-baseline{display:block;padding:22px 0;font-size:16px}.hero-baseline>span{display:block}.hero-baseline>span:last-child{margin-top:8px}.commercial main h2{font-size:clamp(37px,9.5vw,55px);letter-spacing:-.05em;line-height:1.12}.service-intro{padding-block:55px}.service-paths{grid-template-columns:1fr;gap:32px;margin-top:30px}.service-paths>a{padding-top:23px}.service-paths h3{font-size:29px}.service-paths p{font-size:18px;margin-top:15px}.service-paths>a>span{font-size:17px;margin-top:20px}.commercial .section-intro{font-size:19px;margin-top:22px}.portfolio-service{padding-block:55px}.web-offers{gap:10px;margin-block:25px}.web-offers p{font-size:16px;padding:9px 12px}.concept-note{font-size:17px;margin:22px 0 30px}.web-projects{gap:25px}.web-project,#project-cauce{display:flex;flex-direction:column;padding:23px 18px;border-radius:6px;gap:0}.project-heading{align-self:stretch;order:1;margin-bottom:22px}.project-heading h3{font-size:42px}.project-heading span{font-size:17px;margin-top:8px}#project-forma .project-heading h3{font-size:52px}.device-pair{order:2;width:100%;padding-right:23px;padding-bottom:25px}.device-pair .mobile-shot{width:24%;border-width:3px;border-radius:9px}.web-project>p{order:3;font-size:18px;max-width:none;margin-top:23px}.web-project>.text-action{order:4;font-size:18px;margin-top:14px;align-self:flex-start}.solutions{padding-block:55px}.sector-section{margin-top:42px}.sector-heading{font-size:19px;padding-bottom:15px}.commercial .lab-feature{grid-template-columns:1fr;gap:28px;padding-block:27px}.commercial .lab-feature h3{font-size:32px}.commercial .lab-feature-copy>p,.commercial .feature-points li{font-size:18px}.commercial .lab-feature-copy>.small-note{font-size:16px}.commercial .lab-feature-copy>.text-action{font-size:17px}.cph-gallery{padding:16px;margin-inline:-5px}.commercial .capture-selector{display:grid;grid-template-columns:1fr 1fr;gap:7px}.commercial .capture-selector button{font-size:16px;padding:10px}.commercial .cph-gallery figcaption{font-size:17px}.commercial .sector-note{font-size:17px;padding:20px}.commercial .lab-proposals{grid-template-columns:1fr;gap:20px;margin-top:30px}.commercial .lab-proposals article{padding:25px 20px}.commercial .lab-proposals h3{font-size:29px}.commercial .lab-proposals .proposal-type{font-size:16px}.commercial .lab-proposals p{font-size:18px}.commercial .result-route li{font-size:15px}.commercial .sector-layout{grid-template-columns:1fr;gap:28px;margin-top:35px;padding-top:35px}.commercial .sector-copy h3{font-size:32px}.commercial .sector-copy p,.commercial .solution-row p{font-size:18px}.commercial .solution-row h4{font-size:27px}.creation{padding-block:55px}.method-layout{grid-template-columns:1fr;gap:35px;margin-top:30px}.build-diagram{padding:25px 13px}.build-diagram>p,.build-diagram .diagram-caption{font-size:16px}.build-diagram .diagram-source,.build-diagram .diagram-result{font-size:18px;width:85%}.build-diagram .diagram-agents{gap:6px}.build-diagram .diagram-agents>div{font-size:15px;padding:14px 3px}.creation-steps{gap:28px}.creation-steps h3{font-size:25px}.creation-steps p{font-size:18px}.commercial .scope-note{font-size:17px;margin-top:28px}.faq{grid-template-columns:1fr;gap:20px;padding-bottom:55px}.faq summary{font-size:19px;padding-block:22px}.faq details p{font-size:18px}.studio-contact{padding-block:55px}.studio-contact .inquiry-layout{grid-template-columns:1fr;gap:30px}.studio-contact .section-intro{font-size:20px}.studio-contact #inquiry-form{padding:25px 18px;margin-inline:-5px}.studio-contact .inquiry-field label,.inquiry-preview label{font-size:17px}.inquiry-field select,.inquiry-field textarea,#inquiry-message{font-size:18px}.studio-contact #inquiry-form>.primary{font-size:16px;padding:14px 16px}.home-footer{padding-block:32px;flex-wrap:wrap;gap:22px}.home-footer .oficio-logo{width:130px}.commercial .home-footer p{font-size:16px;border:0;padding:0;flex-basis:100%;order:2}.home-footer>.text-action{font-size:17px;margin:0;order:3}.commercial .small-note{font-size:16px}.commercial .capture-heading p,.commercial .capture-dialog>p{font-size:16px}}
@media(max-width:360px){.home-nav nav{font-size:14px;gap:8px}.home-nav .oficio-logo{width:120px}.hero-canvas{height:380px}.hero-software{top:215px}.commercial .primary{font-size:16px}.studio-hero h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-canvas a:hover,.device-pair>a:hover{translate:none}.hero-screen:hover{transform:rotate(-6deg)}.hero-phone:hover{transform:rotate(-8deg)}.hero-software:hover{transform:rotate(4deg)}.device-pair>a:hover{transform:none}.service-paths>a:hover>span>span{transform:none}}
/* Focused home: both offers visible, deeper content on request. */
.header-whatsapp{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:600;border:1px solid #7899cb;border-radius:6px;min-height:48px;padding:11px 16px;margin-right:auto}.header-whatsapp .icon{width:21px;height:21px}.home-nav{gap:26px}.home-nav nav{margin-left:0;gap:24px}.header-whatsapp:hover{background:#224478}.services-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.services-heading>p{font-size:20px;max-width:28ch}.service-intro{padding-block:65px 25px}.service-paths{gap:20px;margin-top:32px}.service-tab{padding:27px 30px;background:#f2f5fc;border:1px solid #a6bad7;border-radius:10px;text-align:left;color:#0b2348;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s}.service-tab>strong{display:block;font-size:27px;letter-spacing:-.035em;line-height:1.2}.service-tab>span{display:block;font-size:18px;line-height:1.5;margin-top:13px}.service-tab .service-tab-action{display:flex;justify-content:space-between;gap:20px;font-size:17px;font-weight:700;margin-top:25px}.service-tab-action>span{font-size:26px}.service-tab[aria-selected=true]{background:#2455ed;color:white;border-color:#2455ed}.service-tab:hover:not([aria-selected=true]){background:#e4ecff;border-color:#2455ed}.portfolio-service{background:white;padding-block:35px 65px}.portfolio-service .shell>h2{font-size:44px}.portfolio-service .section-intro{font-size:19px;margin-top:18px}.concept-note{font-size:16px;margin:18px 0 25px;max-width:88ch}.project-picker{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #b9c8de;margin-bottom:28px;gap:12px}.project-picker button{background:none;border:0;border-bottom:3px solid transparent;color:#283d58;font:700 22px/1.3 Manrope,Arial,sans-serif;text-align:left;padding:15px 10px 18px;cursor:pointer}.project-picker button>span{display:block;font-size:16px;font-weight:500;margin-top:8px}.project-picker button[aria-selected=true]{color:#2455ed;border-bottom-color:#2455ed}.project-picker button:hover{background:#edf2ff}.web-projects{display:block;margin-bottom:26px}.web-project{min-height:390px}.device-pair .mobile-shot{aspect-ratio:390/844;object-fit:cover;object-position:top}.hero-phone{aspect-ratio:390/844}.hero-phone img{height:100%;object-fit:cover;object-position:top}
/* Software: an interactive product showcase with the current brand. */
.solutions{padding-block:35px 65px}.solutions>h2{font-size:48px!important}.solution-disclosure{border:1px solid #b8c9df;border-radius:10px;margin-top:18px;overflow:hidden;background:#fff}.solution-disclosure>summary{display:flex;align-items:center;gap:24px;padding:25px 28px;color:#0b2348;cursor:pointer;list-style:none}.solution-disclosure>summary::-webkit-details-marker{display:none}.solution-disclosure>summary>span:first-child{font-size:26px;letter-spacing:-.025em;font-weight:700;flex:1}.solution-disclosure>summary>span:nth-child(2){font-size:17px;max-width:35ch}.solution-disclosure>summary:after{content:'＋';font-size:28px;margin-left:10px;line-height:1}.solution-disclosure[open]>summary{background:#0b2348;color:white}.solution-disclosure[open]>summary:after{content:'−'}.solution-disclosure .sector-section{margin:0;padding:26px}.solution-disclosure .sector-heading{display:none}.solution-disclosure .lab-feature{padding:16px 0;gap:35px}.solution-disclosure .lab-feature h3{font-size:35px}.solution-disclosure .cph-gallery{background:#0b2348;padding:20px;border-radius:10px}.solution-disclosure .cph-gallery p,.solution-disclosure .cph-gallery figcaption{color:white}.solution-disclosure .capture-selector{margin-bottom:14px}.solution-disclosure .capture-selector button{background:#193a66;color:#fff;border-color:#6181af;font-size:15px;min-height:44px}.solution-disclosure .capture-selector button[aria-pressed=true]{background:#fff;color:#0b2348;border-color:#fff}.solution-disclosure .capture-open{border-color:#8ca8ce}.solution-disclosure .sector-note{margin-top:18px;background:#edf2ff;border:0;border-radius:6px}.solution-disclosure .feature-points li{font-size:17px}.solution-disclosure .lab-feature-copy>p{font-size:18px}.solution-disclosure .sector-layout{margin-top:0;border:0;padding-top:8px}.solution-disclosure .lab-proposals{margin-bottom:0}.solution-disclosure .lab-proposals article{background:#edf2ff}.solution-disclosure .stock-preview{background:#fff;padding:20px;border-radius:8px}.solution-disclosure .stock-preview strong{font-size:22px}
/* Process: sequential, expandable deliverables instead of a node diagram. */
.process-redesign{background:#0b2348;color:white;padding-block:72px;border:0}.process-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:75px;align-items:start}.process-intro .process-label{color:#fff;font-size:17px;margin-bottom:25px}.commercial .process-intro h2{font-size:clamp(50px,5vw,74px)}.process-intro>p:not(.process-label){font-size:20px;line-height:1.6;color:white;margin-top:25px;max-width:30ch}.process-intro .process-human{font-size:17px!important;border-left:3px solid #86afff;padding-left:17px;margin-top:35px!important}.process-sequence>h3{font-size:21px;font-weight:600;margin-bottom:23px}.process-sequence details{border-top:1px solid #6884ab;padding:0}.process-sequence summary{display:flex;align-items:center;gap:22px;padding:23px 0;list-style:none;font-size:24px;font-weight:600;cursor:pointer;line-height:1.25}.process-sequence summary::-webkit-details-marker{display:none}.process-sequence summary:after{content:'＋';margin-left:auto;font-size:25px}.process-sequence details[open] summary:after{content:'−'}.process-number{font-size:18px;color:#b9d0ff}.process-content{padding:0 0 24px 46px}.commercial .process-content>p{font-size:18px;line-height:1.6;color:white;max-width:45ch;margin:0 0 20px}.process-artifact{padding:23px 25px;background:#fff;color:#0b2348;border-radius:8px;box-shadow:8px 8px 0 #2455ed}.process-artifact>span{display:block;font-size:16px;margin-bottom:10px}.process-artifact>strong{font-size:25px;letter-spacing:-.025em;line-height:1.3}.process-artifact ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:17px}.process-artifact li{padding-left:22px;position:relative}.process-artifact li:before{content:'✓';position:absolute;left:0;font-weight:800;color:#2455ed}.prototype-preview{display:grid;grid-template-columns:1fr 1.7fr;gap:12px;margin-top:20px;background:#edf2ff;padding:17px;border-radius:5px}.prototype-preview>div{background:#2455ed;height:28px;border-radius:3px}.prototype-preview>div:first-child{grid-row:1/3;height:auto;background:#0b2348}.prototype-preview>div:last-child{background:#b9ceff}.process-sequence .process-footnote{font-size:16px;color:#fff;margin-top:25px;line-height:1.6;max-width:64ch}.process-redesign :focus-visible{outline-color:#b9d0ff}.faq{padding-block:65px;gap:60px}.faq-items{border-top:2px solid #2455ed}.faq summary{list-style:none;display:flex;gap:20px;align-items:center;font-size:19px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'＋';margin-left:auto;flex-shrink:0;font-size:25px;color:#2455ed}.faq details[open] summary:after{content:'−'}.faq details p{padding-left:0}.studio-contact{padding-block:65px}.studio-contact #inquiry-form{box-shadow:10px 10px 0 #0b2348}
@media(max-width:1100px){.header-whatsapp{font-size:16px;padding:10px 13px}.home-nav{gap:18px;flex-wrap:wrap}.home-nav nav{margin-left:auto;font-size:16px;gap:17px}.home-nav>.primary{display:none}.process-layout{gap:35px}.solution-disclosure .lab-feature{grid-template-columns:1fr 1.25fr;gap:25px}.solution-disclosure .capture-selector{display:grid;grid-template-columns:1fr 1fr}.solution-disclosure .lab-feature h3{font-size:31px}}
@media(max-width:760px){.home-nav{gap:16px}.header-whatsapp{margin:0 0 0 auto;min-height:46px;font-size:16px}.home-nav nav{margin:0;width:100%;font-size:15px;gap:10px}.service-intro{padding-block:45px 16px}.services-heading{display:block}.services-heading>p{font-size:18px;margin-top:20px}.service-paths{grid-template-columns:1fr;gap:12px;margin-top:25px}.service-tab{padding:21px}.service-tab>strong{font-size:24px}.service-tab>span{font-size:17px;margin-top:10px}.service-tab .service-tab-action{margin-top:15px;font-size:16px}.service-tab-action>span{font-size:23px}.portfolio-service{padding-block:25px 45px}.portfolio-service .shell>h2{font-size:36px}.portfolio-service .section-intro{font-size:18px}.concept-note{font-size:16px;line-height:1.55;margin-bottom:20px}.project-picker{gap:6px;margin-bottom:20px}.project-picker button{font-size:20px;padding:12px 6px 15px}.project-picker button>span{font-size:14px;line-height:1.4}.web-project{min-height:0}.solutions{padding-block:25px 45px}.solutions>h2{font-size:38px!important}.solution-disclosure{margin-top:14px}.solution-disclosure>summary{padding:20px 17px;gap:10px;flex-wrap:wrap;position:relative}.solution-disclosure>summary>span:first-child{font-size:23px;flex-basis:100%;padding-right:25px}.solution-disclosure>summary>span:nth-child(2){font-size:16px;max-width:25ch}.solution-disclosure>summary:after{position:absolute;right:14px;top:21px;font-size:24px}.solution-disclosure .sector-section{padding:19px 15px}.solution-disclosure .lab-feature{grid-template-columns:1fr;gap:22px;padding:8px 0}.solution-disclosure .lab-feature h3{font-size:30px}.solution-disclosure .lab-feature-copy>p,.solution-disclosure .feature-points li{font-size:17px}.solution-disclosure .cph-gallery{margin:0;padding:13px}.solution-disclosure .capture-selector button{font-size:15px}.solution-disclosure .lab-feature .primary{font-size:15px;padding:14px 12px;gap:10px;width:100%}.solution-disclosure .sector-note{padding:17px;font-size:16px}.solution-disclosure .lab-proposals article{padding:22px 17px}.process-redesign{padding-block:48px}.process-layout{grid-template-columns:1fr;gap:35px}.commercial .process-intro h2{font-size:49px}.process-intro .process-label{font-size:16px;margin-bottom:20px}.process-intro>p:not(.process-label){font-size:19px;max-width:none;margin-top:20px}.process-intro .process-human{font-size:16px!important;margin-top:23px!important}.process-sequence>h3{font-size:20px}.process-sequence summary{gap:15px;font-size:22px;padding:22px 0}.process-number{font-size:16px}.process-content{padding:0 0 24px 0}.commercial .process-content>p{font-size:18px}.process-artifact{padding:22px 20px;margin-right:8px}.process-artifact>strong{font-size:24px}.process-artifact ul{font-size:17px}.process-sequence .process-footnote{font-size:16px}.faq{padding-block:45px;gap:22px}.faq summary{font-size:18px}.studio-contact{padding-block:45px}.studio-contact #inquiry-form{margin-right:3px;box-shadow:7px 7px 0 #0b2348}}
/* Full-width footer to the hero: the diagonal stops above a continuous navy band. */
.hero-baseline{position:relative}.hero-baseline:before{content:'';position:absolute;inset:-1px calc((100vw - 100%)/-2) 0;background:#0b2348;border-top:1px solid #4d6689;z-index:-1}.prototype-product{margin-top:22px;border:1px solid #b9c8de;border-radius:9px;overflow:hidden;box-shadow:0 8px 22px #102d5012}.prototype-top{background:#edf2ff;display:flex;justify-content:space-between;align-items:center;padding:10px 15px;font-size:14px;color:#344e6b;border-bottom:1px solid #b9c8de}.prototype-dots{color:#44649b;letter-spacing:3px;font-size:10px}.prototype-body{padding:20px;background:#fff}.prototype-title>span{display:block;color:#344e6b;font-size:14px;margin-bottom:5px}.prototype-title>strong{font-size:22px}.prototype-task{display:flex;gap:12px;align-items:center;border-bottom:1px solid #d5dfed;padding:17px 0}.prototype-task>div{flex:1}.prototype-task strong,.prototype-task div>span{display:block;font-size:15px;line-height:1.5}.prototype-task div>span{font-size:14px;color:#344e6b}.prototype-check{width:25px;height:25px;border-radius:50%;background:#d8efe5;color:#175442;display:grid;place-items:center;flex-shrink:0}.prototype-check.pending{background:white;border:2px solid #2455ed}.prototype-done{color:#175442;font-size:13px;font-weight:700}.prototype-body>a{display:flex;justify-content:space-between;color:#2455ed;font-size:16px;font-weight:700;padding-top:18px}.header-whatsapp .icon{width:23px;height:23px}
@media(max-width:760px){.prototype-body{padding:15px}.prototype-task{gap:9px}.prototype-done{display:none}.prototype-task strong{font-size:16px}}




/* Concept examples replace the former client ribbon. */
.example-showcase{display:grid;grid-template-columns:.95fr 2fr;gap:48px;align-items:center;padding-block:48px;border-bottom:1px solid var(--line)}
.example-intro{min-width:0}.commercial .example-eyebrow{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:14px}
.commercial main .example-intro h2{font-size:34px;line-height:1.15;letter-spacing:-.04em;max-width:16ch}
.example-intro>p:last-child{font-size:16px;line-height:1.6;margin-top:18px;max-width:36ch}
.example-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-width:0}
.example-link{display:block;min-width:0;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:14px;transition:border-color .2s}
.example-link>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.example-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px}.example-caption>span{min-width:0}
.example-kind{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-bottom:5px}.example-caption strong{display:block;font-size:16px;line-height:1.4;font-weight:700}
.example-caption .icon{width:20px;height:20px;flex-shrink:0;color:var(--accent)}
.example-link:hover,.example-link:focus-visible{border-color:var(--accent)}.example-link:hover strong{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.example-showcase{grid-template-columns:1fr;gap:28px}.commercial main .example-intro h2{max-width:25ch}.example-intro>p:last-child{max-width:65ch}.example-link>img{aspect-ratio:16/10}}
@media(max-width:760px){.example-showcase{padding-block:32px;gap:24px}.commercial main .example-intro h2{font-size:30px;max-width:20ch}.example-links{grid-template-columns:1fr;gap:16px}.example-link{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:16px;padding-bottom:16px}.example-link>img{aspect-ratio:4/3}.example-caption{padding-top:0}.example-caption strong{font-size:16px}.example-kind{font-size:13px}.example-caption .icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.example-link{transition:none}}

/* A completed website is identified separately from conceptual examples. */
.project-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.real-project{background:#f1eef9;color:var(--ink);grid-template-columns:1.7fr 1fr;padding:32px;column-gap:36px;grid-template-rows:auto auto 1fr}
.real-project .project-heading{align-self:end}.real-project .project-heading h3{font-size:58px}.real-project .project-status{font-size:14px;font-weight:700;line-height:1.5;color:var(--accent);margin-bottom:14px}
.real-gallery{grid-column:1;grid-row:1/4;min-width:0;align-self:center}.real-gallery .capture-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.real-gallery .capture-selector button{font:600 14px/1.4 Manrope,Arial,sans-serif;padding:10px 6px;min-height:44px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);cursor:pointer}
.real-gallery .capture-selector button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.real-gallery .capture-selector button:hover:not([aria-pressed=true]){border-color:var(--accent);color:var(--accent)}
.real-gallery .capture-open{background:#fff}.real-gallery .capture-open>img{width:100%;aspect-ratio:1280/833;object-fit:contain;background:#faf9f6}.real-gallery .capture-open>span{font-size:15px;padding:12px 16px;color:var(--ink)}
.real-gallery .capture-open[data-layout=mobile]{width:min(300px,100%);margin-inline:auto;border:7px solid #192238;border-radius:26px;box-shadow:0 12px 26px #19223814}
.real-gallery .capture-open[data-layout=mobile]>img{aspect-ratio:390/844;object-fit:cover;object-position:top}
.real-gallery .capture-open[data-layout=mobile]>span{justify-content:center;min-height:48px}
.real-gallery figure:has([data-layout=mobile]) figcaption{text-align:center}
.real-gallery figure{margin:0}.real-gallery figcaption{font-size:14px;color:var(--muted);line-height:1.5;margin-top:12px}
.real-project>p{font-size:18px;line-height:1.65}
.capture-dialog[data-layout=mobile]{width:min(470px,96vw)}.capture-dialog[data-layout=mobile] .capture-scroll{max-height:65dvh}.capture-dialog[data-layout=mobile] .capture-scroll>img{width:min(390px,100%);max-width:100%;max-height:none}.capture-dialog[data-layout=mobile] .capture-mobile-help{display:none}
@media(max-width:1100px){.real-project{column-gap:24px;padding:24px;grid-template-columns:1.4fr 1fr}.real-project>p{font-size:17px}.real-gallery .capture-selector{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.project-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}.real-project{padding:22px 16px;display:flex;flex-direction:column}.real-project .project-heading{align-self:stretch;order:1}.real-project .project-heading h3{font-size:48px}.real-gallery{order:2;width:100%}.real-project>p{order:3;margin-top:20px;font-size:17px}.real-gallery .capture-selector{grid-template-columns:repeat(2,minmax(0,1fr))}}