/* CREANODE / V2 editorial direction. Calm layouts, real product imagery, accessible type. */
:root{--page:#fafbf8;--paper:#ffffff;--ink:#17231c;--muted:#58655d;--green:#2d5b40;--green-dark:#1d3b2a;--sage:#e8f0e6;--rule:#dfe5dd;--width:1220px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;overflow-x:hidden;background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #397d55;outline-offset:5px}
::selection{background:#d4ebd0;color:#15241b}
svg{display:block;flex-shrink:0}
.container{width:min(var(--width),calc(100% - 96px));margin:0 auto}
.skip-link{position:fixed;left:15px;top:-100px;z-index:150;background:#f5fff2;padding:12px 18px;border:1px solid #b5d1af}
.skip-link:focus{top:12px}
.wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;font-size:20px;letter-spacing:-.071em;font-weight:800;color:var(--ink)}
.wordmark span{font-weight:500}.wordmark b{font-weight:800;color:#4d8654}
.site-header{position:relative;z-index:30;background:rgba(250,251,248,.98);border-bottom:1px solid var(--rule)}
.header-inner{min-height:91px;display:flex;align-items:center;gap:32px}
.desktop-nav{display:flex;gap:clamp(18px,2.7vw,36px);align-items:center;margin:auto}
.desktop-nav a,.header-contact{font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.desktop-nav a{color:#47584b}.desktop-nav a:hover{color:#397d55}
.header-actions{display:flex;align-items:center;gap:17px}
.language-select{display:flex;gap:6px;align-items:center}
.language-select a{font-size:10px;font-weight:700;color:#76817a;letter-spacing:.04em;padding:7px 4px}
.language-select a[aria-current="page"]{color:var(--green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.language-select a:hover{color:var(--green)}
.header-contact{display:flex;align-items:center;gap:12px;padding:12px 0 12px 16px;border-left:1px solid var(--rule);color:var(--green)}
.header-contact span{font-size:20px;font-weight:400;line-height:1}
.header-contact:hover{color:#143a25}
.menu-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:transparent;border:1px solid var(--rule);border-radius:4px;color:var(--ink)}
.menu-toggle span{width:20px;height:1.6px;background:currentColor;display:block;transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.8px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.mobile-menu[hidden]{display:none!important}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--page);border-bottom:1px solid var(--rule);padding:15px max(24px,calc((100vw - var(--width))/2)) 27px;box-shadow:0 20px 40px #13271b15}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:center;font-size:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.mobile-menu nav .mobile-contact{border:0;margin-top:17px;background:var(--green);color:white;padding:16px 18px}
.overline,.section-label{display:flex;align-items:center;gap:10px;color:#3f7150;font-weight:700;letter-spacing:.08em;font-size:11px;line-height:1.5;margin:0;text-transform:uppercase}
.overline-dot{width:7px;height:7px;border-radius:50%;background:#609768;display:inline-block}
.hero-section{background:var(--page)}
.hero-section>.container>.overline{padding-top:100px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:clamp(50px,7vw,125px);padding:40px 0 105px;align-items:end}
.hero-main h1{font-size:clamp(54px,5.55vw,83px);line-height:1.12;letter-spacing:-.065em;font-weight:620;margin:0;white-space:nowrap}
.hero-main em{color:var(--green);font-weight:600;font-style:normal}
.hero-side{padding:0 0 10px}
.hero-side>p{font-size:17px;line-height:1.85;color:#536158;max-width:375px;margin:0 0 32px}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:23px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 19px;min-height:54px;font-size:13px;font-weight:670;transition:background .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button-solid{color:white;background:var(--green);border:1px solid var(--green);border-radius:3px}
.button-solid:hover{background:#204c32}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:650;color:var(--green);border-bottom:1px solid #a8c0aa;padding-bottom:8px}
.text-link:hover{border-bottom-color:var(--green)}
.hero-foot{border-top:1px solid var(--rule);padding:24px 0 27px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.hero-note{color:#8c958f;font-size:10px;letter-spacing:.09em;font-weight:600}
.hero-skills{display:flex;gap:26px}
.hero-skills span{font-size:11px;color:#5d6c60}
.section{padding:115px 0}
.section-head{display:grid;grid-template-columns:1.12fr .88fr;align-items:end;gap:70px;margin-bottom:45px}
.section-head h2,.services-aside h2,.method-head h2,.about-intro h2,.contact-layout h2{font-size:clamp(35px,3.65vw,53px);font-weight:620;letter-spacing:-.055em;line-height:1.18;margin:21px 0 0}
.section-head h2{max-width:590px}
.section-description{max-width:390px;margin:0 0 3px;line-height:1.85;color:var(--muted);font-size:15px}
.work-section{background:#fff;border-top:1px solid #e9eee8}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.work-card{min-width:0}
.work-image{height:392px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;border-radius:5px}
.work-card-1 .work-image{background:#e8f0e8}
.work-card-2 .work-image{background:#eeeee8}
.project-club-visual{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:flex-end}
.project-club-visual::after{content:"";position:absolute;inset:auto 0 0;pointer-events:none;height:50px;background:linear-gradient(to bottom,transparent,#e8f0e8)}
.project-phone{position:absolute;width:190px;height:360px;border:7px solid #263129;border-radius:26px 26px 0 0;box-shadow:0 14px 35px #1b392126;overflow:hidden;background:#111;bottom:-2px}
.project-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.project-phone.phone-back{left:calc(50% - 13px);transform:translateX(0) translateY(40px) scale(.9);filter:brightness(.93)}
.project-phone.phone-front{left:calc(50% - 140px);z-index:2;transform:translateY(0)}
.project-web-visual{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:40px 24px}
.project-browser{overflow:hidden;width:min(100%,470px);border:1px solid #d0d4cd;border-radius:9px;background:white;box-shadow:0 22px 37px #3c55451d}
.browser-bar{display:flex;gap:5px;align-items:center;padding:13px 15px;background:#fafbf9;border-bottom:1px solid #e2e5de}
.browser-bar span{width:6px;height:6px;border-radius:50%;background:#c6d0c7}
.browser-bar span:nth-child(2){background:#d3d9d0}
.browser-bar span:nth-child(3){background:#e0e5dd}
.project-browser img{width:100%;height:auto}
.work-text{padding:27px 0 0}
.work-type{font-size:11px;color:var(--green);font-weight:690;letter-spacing:.03em;margin:0 0 13px}
.work-text h3{font-size:clamp(23px,2.2vw,31px);font-weight:620;line-height:1.2;letter-spacing:-.04em;max-width:420px;margin:0 0 14px}
.work-text>p:not(.work-type){font-size:14px;line-height:1.8;color:var(--muted);max-width:435px;margin:0 0 17px}
.work-name{font-size:12px;font-weight:680;color:#344b39;display:inline-block;padding-top:13px;border-top:1px solid var(--rule);width:100%}
.work-disclaimer{font-size:11px;color:#78857a;margin:29px 0 0}
.services-section{border-top:1px solid #e9eee8;background:var(--page)}
.services-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(60px,9vw,145px)}
.services-aside{padding-top:6px}
.services-aside>p:not(.section-label){max-width:370px;margin:24px 0 0;color:var(--muted);font-size:15px;line-height:1.85}
.services-list{border-top:1px solid var(--rule)}
.service-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) 22px;gap:20px;padding:26px 0 29px;border-bottom:1px solid var(--rule);align-items:start}
.service-row h3{font-size:18px;line-height:1.35;letter-spacing:-.028em;font-weight:630;margin:0}
.service-row p{color:var(--muted);font-size:13px;line-height:1.75;margin:0}
.service-row svg{color:#829b85}
.method-section{background:#f1f4ee;border-top:1px solid #ebeee7}
.method-head{display:grid;grid-template-columns:1fr 1.5fr;gap:22px;align-items:start}
.method-head>.section-label{grid-column:1/-1}
.method-head h2{max-width:470px;margin-top:0}
.method-head>p:not(.section-label){max-width:330px;align-self:end;color:var(--muted);line-height:1.85;font-size:15px;margin:0 0 7px}
.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin-top:70px}
.method-step{border-top:1px solid #cad8ca;padding-top:26px}
.step-mark{display:inline-block;width:9px;height:9px;border:2px solid #4e7a56;border-radius:50%;margin-bottom:22px}
.method-step h3{font-size:21px;font-weight:640;letter-spacing:-.04em;margin:0 0 14px}
.method-step p{font-size:14px;line-height:1.85;color:var(--muted);margin:0;max-width:305px}
.about-section{background:#fff}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,9vw,140px)}
.about-intro h2{max-width:520px}
.about-body{padding-top:30px}
.about-body>p{font-size:16px;color:var(--muted);line-height:1.95;margin:0 0 36px;max-width:510px}
.about-body blockquote{color:#214e32;font-size:clamp(24px,2.7vw,34px);font-weight:580;line-height:1.3;letter-spacing:-.045em;margin:0 0 35px;padding-left:23px;border-left:2px solid #7cae81}
.about-caption{color:#708072;font-size:12px}
.contact-section{background:#e9f1e7;padding:88px 0;border-top:1px solid #d6e4d4}
.contact-layout{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(45px,8vw,110px);align-items:center}
.contact-layout h2{font-size:clamp(38px,4.2vw,59px);max-width:650px;margin-top:20px;color:#193626}
.contact-copy p{font-size:15px;color:#465c4c;line-height:1.85;margin:0 0 28px;max-width:420px}
.contact-copy .button{width:max-content;min-width:228px}
.contact-email{display:block;margin-top:18px;font-size:13px;color:#31563a;max-width:max-content;border-bottom:1px solid #afc2ad;padding-bottom:5px}
.site-footer{background:var(--page);border-top:1px solid var(--rule)}
.footer-top{display:flex;justify-content:space-between;gap:50px;padding:65px 0 57px}
.footer-top>div>p{margin:15px 0 0;color:#79887d;font-size:13px}
.footer-nav{display:flex;flex-wrap:wrap;align-items:flex-start;gap:15px 29px;max-width:560px}
.footer-nav a{font-size:13px;color:#4a5b4e;font-weight:560}
.footer-nav a:hover{color:var(--green)}
.footer-bottom{border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;padding:23px 0 27px;font-size:11px;color:#76827a}
.footer-bottom>a:hover{color:var(--green)}
.footer-lang{display:flex;align-items:center;gap:11px}
.footer-lang a{font-weight:650;font-size:11px;color:#7d8980}
.footer-lang a[aria-current=page]{color:var(--green)}
@media(max-width:1160px){
 .container{width:calc(100% - 70px)}.header-inner{gap:22px}.desktop-nav{gap:18px}
 .header-contact{display:none}.hero-grid{gap:46px}
 .hero-main h1{font-size:clamp(45px,5.65vw,69px)}
 .service-row{grid-template-columns:1fr 1fr 18px;gap:14px}
}
@media(max-width:800px){
 .container{width:calc(100% - 48px)}.header-inner{min-height:75px}
 .desktop-nav{display:none}.header-actions{margin-left:auto}.menu-toggle{display:flex}
 .hero-section>.container>.overline{padding-top:75px}
 .hero-grid{grid-template-columns:1fr;gap:28px;padding:34px 0 65px}
 .hero-main h1{font-size:clamp(48px,8.5vw,73px)}
 .hero-side{padding:0}.hero-side>p{max-width:620px}.hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
 .hero-foot{align-items:flex-start;gap:13px;flex-direction:column}.hero-skills{gap:15px;flex-wrap:wrap}
 .section{padding:90px 0}
 .section-head{grid-template-columns:1fr;gap:18px}.section-description{max-width:620px}
 .work-grid{gap:18px}.work-image{height:345px}
 .project-phone{width:155px;height:310px}.project-phone.phone-front{left:calc(50% - 112px)}
 .services-layout{grid-template-columns:1fr;gap:40px}.services-aside>p:not(.section-label){max-width:650px}
 .service-row{grid-template-columns:1fr 1.2fr 22px}
 .method-head{grid-template-columns:1fr;gap:15px}.method-head>.section-label{grid-column:1}
 .method-grid{gap:25px;margin-top:45px}
 .about-layout{gap:30px}.about-body{padding-top:18px}
 .contact-layout{gap:35px}
 .footer-top{gap:30px}
}
@media(max-width:600px){
 .container{width:calc(100% - 38px)}
 .header-inner{min-height:70px}.wordmark{font-size:19px}
 .header-actions{gap:9px}.language-select{gap:1px}.language-select a{padding:6px 4px;font-size:10px}
 .hero-section>.container>.overline{padding-top:71px}
 .hero-grid{gap:30px;padding:29px 0 57px}
 .hero-main h1{font-size:clamp(34px,8.9vw,53px);white-space:normal;letter-spacing:-.06em;line-height:1.18}
 .hero-side>p{font-size:15px;line-height:1.85}
 .hero-actions{align-items:flex-start;flex-direction:column;gap:24px}
 .hero-foot{padding:20px 0 23px}.hero-skills{gap:12px}.hero-skills span{font-size:10px}
 .section{padding:76px 0}
 .section-head{margin-bottom:32px}.section-head h2,.services-aside h2,.method-head h2,.about-intro h2{font-size:clamp(32px,8.5vw,43px)}
 .section-description{font-size:14px}
 .work-grid{grid-template-columns:1fr;gap:45px}
 .work-image{height:335px}
 .project-phone{width:166px;height:323px}
 .project-phone.phone-front{left:calc(50% - 128px)}
 .work-text{padding-top:21px}.work-text h3{font-size:26px}
 .work-disclaimer{line-height:1.6}
 .service-row{grid-template-columns:1fr 22px;gap:11px}
 .service-row h3{grid-column:1;font-size:19px}
 .service-row p{grid-row:2;grid-column:1;max-width:500px}
 .service-row svg{grid-row:1;grid-column:2}
 .method-grid{grid-template-columns:1fr;gap:26px;margin-top:42px}
 .method-step{padding-top:20px}.step-mark{margin-bottom:15px}.method-step h3{font-size:21px}
 .about-layout{grid-template-columns:1fr;gap:12px}.about-body{padding:10px 0}
 .about-body>p{font-size:15px}
 .contact-section{padding:73px 0}.contact-layout{grid-template-columns:1fr;gap:23px}.contact-layout h2{font-size:clamp(37px,9.3vw,50px)}
 .footer-top{flex-direction:column;gap:36px;padding:49px 0}
 .footer-nav{gap:18px 27px}
 .footer-bottom{flex-wrap:wrap;row-gap:17px}
}
@media(max-width:380px){
 .hero-main h1{font-size:32px}.hero-skills{gap:8px}
 .project-phone.phone-front{left:calc(50% - 117px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}
}

/* Compact globe language control. One picker shared by all pages and breakpoints. */
.language-dropdown{position:relative;flex:none}
.language-trigger{display:flex;align-items:center;justify-content:center;gap:5px;min-width:46px;height:42px;padding:7px 8px;color:#3f5948;background:transparent;border:1px solid transparent;border-radius:6px;transition:background .2s,border-color .2s}
.language-trigger:hover,.language-trigger[aria-expanded="true"]{background:#eff4ed;border-color:#dbe7d9}
.language-trigger svg:last-child{width:12px;color:#738578;transition:transform .2s}
.language-trigger[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.language-options[hidden]{display:none!important}
.language-options{position:absolute;z-index:50;right:0;top:calc(100% + 10px);min-width:188px;overflow:hidden;background:white;border:1px solid #dfe6dc;border-radius:8px;box-shadow:0 16px 45px rgba(25,51,30,.11);padding:7px}
.language-options a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:11px 13px;border-radius:5px;color:#2c3d31;font-size:13px;font-weight:540;line-height:1.35;white-space:nowrap}
.language-options a svg{color:var(--green)}
.language-options a[aria-current="page"]{background:#edf5ea;font-weight:680;color:#205432}
.language-options a:hover{background:#f2f6f0}
.language-options:before{content:"";position:absolute;inset:0 0 auto 0;height:0}
.work-end{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:37px;padding-top:25px;border-top:1px solid var(--rule)}
.work-end .work-disclaimer{margin:0;line-height:1.6;max-width:520px}
.work-more{display:inline-flex;align-items:center;gap:18px;justify-content:space-between;color:#fff;background:#2d5b40;font-size:13px;font-weight:680;padding:16px 20px;border:1px solid #2d5b40;border-radius:3px;transition:background .2s,transform .2s;white-space:nowrap}
.work-more:hover{background:#204b32;transform:translateY(-2px)}

/* Project page: quiet editorial layout, real artwork, meaningful content. */
.portfolio-main{background:#fff}
.portfolio-hero{background:var(--page);border-bottom:1px solid var(--rule);padding:53px 0 96px}
.portfolio-back{display:inline-flex;align-items:center;gap:11px;color:#607363;font-size:12px;font-weight:640;padding:6px 0;margin-bottom:82px}
.portfolio-back:hover{color:var(--green)}
.portfolio-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);align-items:end;gap:clamp(40px,6vw,100px);padding-top:25px}
.portfolio-hero-grid h1{font-size:clamp(45px,5.25vw,76px);font-weight:630;line-height:1.12;letter-spacing:-.066em;margin:0;max-width:820px;text-wrap:balance}
.portfolio-hero-grid>p{font-size:16px;line-height:1.89;color:var(--muted);max-width:425px;margin:0 0 5px}
.portfolio-list{padding:45px 0 105px}
.portfolio-item{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:clamp(45px,7.5vw,115px);padding:70px 0 85px;border-bottom:1px solid var(--rule);scroll-margin-top:90px}
.portfolio-item:nth-child(even){grid-template-columns:.88fr 1.12fr}
.portfolio-item:nth-child(even) .portfolio-item-visual{grid-column:2;grid-row:1}
.portfolio-item:nth-child(even) .portfolio-item-content{grid-column:1;grid-row:1}
.portfolio-item-visual{position:relative;display:flex;align-items:center;justify-content:center;height:500px;min-width:0;border-radius:5px;overflow:hidden;background:#e8f0e8}
.portfolio-item-2 .portfolio-item-visual{background:#efede8}
.portfolio-item-3 .portfolio-item-visual{background:#f0f2ee}
.portfolio-item-visual .project-club-visual{height:100%;width:100%}
.portfolio-item-visual .project-phone{width:235px;height:475px;border-width:8px;border-radius:32px 32px 0 0}
.portfolio-item-visual .phone-front{left:calc(50% - 167px)}
.portfolio-item-visual .phone-back{left:calc(50% - 17px);transform:translateX(0) translateY(43px) scale(.9)}
.portfolio-item-2 .project-club-visual::after{background:linear-gradient(to bottom,transparent,#efede8)}
.portfolio-item-3 .project-browser{width:min(100%,580px)}
.portfolio-item-3 .project-web-visual{padding:32px}
.portfolio-item-content{padding:6px 0}
.project-kicker{margin:0 0 20px;color:var(--green);font-size:12px;letter-spacing:.07em;font-weight:740}
.portfolio-item-content h2{font-size:clamp(32px,3.15vw,45px);font-weight:630;line-height:1.17;letter-spacing:-.053em;margin:0 0 25px;max-width:570px}
.portfolio-item-content>p:not(.project-kicker){font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 27px;max-width:510px}
.portfolio-tags{display:flex;gap:9px;flex-wrap:wrap}
.portfolio-tags span{display:inline-flex;border:1px solid #dfe7dc;padding:9px 13px;background:#f8faf6;color:#536d58;border-radius:50px;font-size:11px;font-weight:630}
.portfolio-note{margin:30px 0 0;font-size:12px;line-height:1.6;color:#6f7e72}
.portfolio-main .contact-section{margin-top:0}
@media(max-width:1050px){
 .portfolio-item{grid-template-columns:1fr 1fr;gap:45px}
 .portfolio-item:nth-child(even){grid-template-columns:1fr 1fr}
 .portfolio-item-visual{height:415px}
 .portfolio-item-visual .project-phone{width:190px;height:405px}
 .portfolio-item-visual .phone-front{left:calc(50% - 140px)}
 .portfolio-item-visual .phone-back{left:calc(50% - 9px)}
}
@media(max-width:800px){
 .portfolio-hero{padding:38px 0 76px}
 .portfolio-back{margin-bottom:62px}
 .portfolio-hero-grid{grid-template-columns:1fr;gap:23px}
 .portfolio-hero-grid h1{font-size:clamp(44px,7vw,65px)}
 .portfolio-hero-grid>p{max-width:670px}
 .portfolio-item,.portfolio-item:nth-child(even){grid-template-columns:1fr;gap:35px;padding:50px 0 60px}
 .portfolio-item:nth-child(even) .portfolio-item-visual,.portfolio-item:nth-child(even) .portfolio-item-content{grid-column:1;grid-row:auto}
 .portfolio-item:nth-child(even) .portfolio-item-visual{grid-row:1}
 .portfolio-item-content h2{max-width:680px}
 .portfolio-item-visual{height:430px}
 .portfolio-item-visual .project-phone{height:428px;width:207px}
 .portfolio-item-visual .phone-front{left:calc(50% - 148px)}
 .portfolio-list{padding:30px 0 80px}
}
@media(max-width:600px){
 .language-trigger{width:39px;min-width:39px;height:40px;padding:6px;gap:2px}
 .language-trigger svg:first-child{width:19px}
 .language-trigger svg:last-child{width:10px}
 .language-options{top:calc(100% + 8px);right:0;min-width:175px}
 .work-end{flex-direction:column;align-items:stretch;gap:20px;margin-top:30px}
 .work-more{width:100%}
 .portfolio-hero{padding:26px 0 60px}
 .portfolio-back{margin-bottom:52px}
 .portfolio-hero-grid h1{font-size:clamp(38px,9.2vw,53px)}
 .portfolio-hero-grid>p{font-size:15px;line-height:1.8}
 .portfolio-item{gap:24px;padding:37px 0 54px}
 .portfolio-item-visual{height:355px}
 .portfolio-item-visual .project-phone{width:160px;height:347px;border-width:6px;border-radius:23px 23px 0 0}
 .portfolio-item-visual .phone-front{left:calc(50% - 118px)}
 .portfolio-item-visual .phone-back{left:calc(50% - 5px)}
 .portfolio-item-content h2{font-size:clamp(29px,7.6vw,38px);margin-bottom:17px}
 .portfolio-item-content>p:not(.project-kicker){font-size:14px;line-height:1.85}
 .project-kicker{margin-bottom:12px}
 .portfolio-item-3 .project-web-visual{padding:12px}
 .portfolio-list{padding:12px 0 65px}
}

/* Case studies: distinct editorial mockups, using original product screenshots. */
.work-card-2 .work-image,
.portfolio-item-2 .portfolio-item-visual{background:#eee8df}
.portfolio-item-3 .portfolio-item-visual{background:#f3eaf3}

/* Barber Dalton: two phones side by side, in an asymmetric warm-toned composition. */
.mockup-barber{position:relative;display:block;width:100%;height:100%;isolation:isolate}
.mockup-barber::after{content:"";position:absolute;inset:auto 0 0;height:23px;z-index:5;pointer-events:none;background:linear-gradient(transparent,#eee8df)}
.mockup-phone{position:absolute;bottom:-16px;display:block;width:180px;height:397px;border:7px solid #292523;border-radius:28px 28px 0 0;overflow:hidden;background:#201e1c;box-shadow:0 25px 42px rgba(51,40,31,.20);transform-origin:50% 100%}
.mockup-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.mockup-barber .barber-phone-home{left:calc(50% - 209px);transform:rotate(-7deg);z-index:3}
.mockup-barber .barber-phone-calendar{left:calc(50% + 17px);transform:translateY(-26px) rotate(6deg);z-index:2}
.portfolio-item-2 .mockup-phone{width:205px;height:444px;border-width:8px;border-radius:32px 32px 0 0;bottom:-22px}
.portfolio-item-2 .barber-phone-home{left:calc(50% - 226px)}
.portfolio-item-2 .barber-phone-calendar{left:calc(50% + 19px);transform:translateY(-32px) rotate(6deg)}

/* Dance and Fun: a single prominent device, unlike the dual-phone projects. */
.mockup-dance{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:flex-end;overflow:hidden}

.mockup-dance::after{content:"";position:absolute;inset:auto 0 0;height:18px;z-index:4;background:linear-gradient(transparent,#f3eaf3)}
.mockup-dance-phone{position:relative;z-index:2;display:block;width:230px;height:500px;border:9px solid #24202b;border-radius:35px 35px 0 0;box-shadow:0 24px 50px rgba(68,37,77,.20);transform:rotate(-3deg) translateY(15px);overflow:hidden;background:#1c1329}
.mockup-dance-phone img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
@media(max-width:1050px){
  .portfolio-item-2 .mockup-phone{width:168px;height:370px}
  .portfolio-item-2 .barber-phone-home{left:calc(50% - 186px)}
  .portfolio-item-2 .barber-phone-calendar{left:calc(50% + 11px)}
  .portfolio-item-3 .mockup-dance-phone{width:198px;height:433px}
}
@media(max-width:800px){
  .portfolio-item-2 .mockup-phone{width:183px;height:399px}
  .portfolio-item-2 .barber-phone-home{left:calc(50% - 210px)}
  .portfolio-item-2 .barber-phone-calendar{left:calc(50% + 18px)}
  .portfolio-item-3 .mockup-dance-phone{width:206px;height:451px}
}
@media(max-width:600px){
  .work-card-2 .mockup-phone{width:149px;height:328px;border-width:6px;border-radius:23px 23px 0 0}
  .work-card-2 .barber-phone-home{left:calc(50% - 157px)}
  .work-card-2 .barber-phone-calendar{left:calc(50% + 7px);transform:translateY(-20px) rotate(6deg)}
  .portfolio-item-2 .mockup-phone{width:145px;height:324px;border-width:6px;border-radius:24px 24px 0 0;bottom:-15px}
  .portfolio-item-2 .barber-phone-home{left:calc(50% - 134px);transform:rotate(-5deg)}
  .portfolio-item-2 .barber-phone-calendar{left:calc(50% - 12px);transform:translateY(-18px) rotate(5deg)}
  .portfolio-item-3 .mockup-dance-phone{width:170px;height:372px;border-width:7px;border-radius:25px 25px 0 0;transform:rotate(-3deg) translateY(18px)}
  
}

/* CREANODE / About — editorial story and verified people, three locales. */
.about-main{background:#fff}
.about-main .section-label{letter-spacing:.065em}
.about-page-hero{padding:52px 0 0;background:var(--page);border-bottom:1px solid var(--rule)}
.about-page-hero .portfolio-back{margin-bottom:74px}
.about-page-hero .overline{margin-bottom:25px}
.about-page-hero h1{font-size:clamp(44px,5.1vw,71px);font-weight:620;letter-spacing:-.064em;line-height:1.13;max-width:1030px;margin:0;text-wrap:balance}
.about-hero-bottom{margin:43px 0 75px;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(45px,8vw,130px);align-items:start;max-width:1140px}
.about-hero-bottom p{margin:0}
.about-hero-intro{font-size:clamp(18px,1.8vw,24px);line-height:1.58;letter-spacing:-.02em;font-weight:490;color:#35483a}
.about-hero-detail{font-size:15px;color:var(--muted);line-height:1.88;padding-top:3px}
.about-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dce4da;padding:27px 0 34px}
.about-facts>div{display:flex;flex-direction:column;gap:9px;padding-right:20px}
.about-facts>div+div{border-left:1px solid #dce4da;padding-left:32px}
.about-facts span{color:#7a887e;font-size:11px;letter-spacing:.02em}
.about-facts strong{font-weight:625;font-size:17px;color:#28422f;letter-spacing:-.025em}
.about-page-section{padding:116px 0}
.about-main h2{font-size:clamp(34px,3.65vw,53px);line-height:1.19;letter-spacing:-.052em;font-weight:620;margin:20px 0 0;max-width:640px}
.about-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(65px,9vw,142px)}
.about-split-intro{padding-top:4px}
.about-prose p{font-size:15px;color:var(--muted);line-height:1.96;margin:0 0 23px}
.about-prose p:last-child{margin-bottom:0}
.about-idea{position:relative;margin:72px 0 0;padding:42px clamp(28px,6.5vw,95px);background:#eaf2e8;border-radius:3px;display:flex;align-items:center;gap:40px}
.about-quote-decoration{display:block;color:#66936a;font-family:Georgia,"Times New Roman",serif;line-height:.65;font-size:122px;align-self:center}
.about-idea p{max-width:850px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(23px,2.6vw,35px);letter-spacing:-.03em;line-height:1.39;color:#21442b;margin:0}
.about-team-section{background:#f6f8f3;border-top:1px solid #e7ece5;border-bottom:1px solid #e7ece5}
.about-team-intro{margin-bottom:47px}
.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.about-person{display:flex;align-items:center;gap:24px;border:1px solid #dce6d9;border-radius:5px;padding:30px;background:#fff;min-height:152px}
.person-mark{flex:none;height:77px;width:77px;display:grid;place-items:center;border-radius:50%;background:#eaf1e7;border:1px solid #d9e5d6;color:#416a49;font-size:23px;letter-spacing:-.05em;font-weight:620}
.person-details h3{font-size:21px;line-height:1.25;letter-spacing:-.038em;margin:0 0 8px;font-weight:640}
.person-details p{font-size:13px;line-height:1.55;color:#63816a;margin:0}
.about-team-note{max-width:860px;font-size:14px;line-height:1.9;color:#6a786b;margin:31px 0 0}
.about-section-heading{display:grid;grid-template-columns:1.05fr .95fr;column-gap:clamp(50px,8vw,130px);align-items:end}
.about-section-heading .section-label{grid-column:1/-1}
.about-section-heading h2{max-width:660px}
.about-section-heading>p:last-child:not(.section-label){max-width:430px;font-size:15px;line-height:1.85;margin:0 0 4px;color:var(--muted)}
.about-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:23px;margin-top:70px}
.about-step{border-top:1px solid #d6e0d4;padding-top:23px}
.about-step-mark{display:block;margin-bottom:30px;width:11px;height:11px;border:2px solid #679776;border-radius:50%;position:relative}
.about-step h3{font-size:19px;line-height:1.28;letter-spacing:-.035em;font-weight:650;margin:0 0 14px}
.about-step p{font-size:13px;line-height:1.83;color:#627064;margin:0}
.about-values-section{background:#f1f5ef;border-top:1px solid #e6ece4;border-bottom:1px solid #e6ece4}
.about-values-section .about-section-heading{display:block}
.about-values-section .about-section-heading h2{max-width:790px}
.about-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:60px}
.about-value{border-top:1px solid #cad8c9;padding-top:27px}
.about-value h3{font-size:21px;font-weight:635;letter-spacing:-.037em;margin:0 0 14px}
.about-value p{font-size:14px;line-height:1.83;color:#536758;margin:0;max-width:340px}
.about-work-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(50px,8.3vw,125px);align-items:center}
.about-work-grid h2{max-width:540px}
.about-work-grid>div:first-child>p:not(.section-label){font-size:15px;line-height:1.87;color:var(--muted);margin:26px 0;max-width:500px}
.about-work-list{list-style:none;margin:0 0 33px;padding:0;border-top:1px solid var(--rule);max-width:530px}
.about-work-list li{border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px;padding:14px 2px;font-size:13px;font-weight:550;color:#395040}
.about-list-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#81ad83}
.about-projects-link{width:max-content}
.about-work-photo{height:480px;position:relative;overflow:hidden;background:linear-gradient(135deg,#ebf1e9,#e2eae1);border-radius:5px}
.about-work-device{position:absolute;width:180px;height:375px;bottom:-21px;border:7px solid #253329;border-radius:29px 29px 0 0;background:#17221b;box-shadow:0 26px 46px rgba(23,43,26,.18);overflow:hidden}
.about-work-device img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.about-work-device-first{left:12%;bottom:-35px;transform:rotate(-9deg);z-index:2}
.about-work-device-second{left:39%;transform:translateY(21px) rotate(3deg);z-index:3}
.about-work-device-third{left:65%;transform:translateY(9px) rotate(10deg);z-index:2}
.about-identity-section{background:#fafbf8;border-top:1px solid #e8ede7}
.about-identity-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:60px}
.about-identity-head>p{font-size:13px;line-height:1.8;color:#718074;max-width:310px;margin:0 0 2px}
.about-legal{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;margin:49px 0 0;border-top:1px solid var(--rule)}
.about-legal>div{display:grid;grid-template-columns:minmax(130px,.68fr) minmax(0,1.32fr);gap:20px;border-bottom:1px solid var(--rule);padding:20px 0}
.about-legal dt{font-size:12px;color:#78867b}
.about-legal dd{font-size:13px;font-weight:590;color:#354b3a;margin:0;overflow-wrap:anywhere;line-height:1.55}
.about-legal a{color:#2f6642;text-underline-offset:3px}
.about-legal a:hover{text-decoration:underline}
.about-main .contact-section{margin:0}
.about-read-more{display:flex;align-items:center;gap:12px;width:max-content;margin-top:29px;border-bottom:1px solid #9cbca1;padding:0 0 9px;color:var(--green);font-size:13px;font-weight:650}
.about-read-more:hover{border-bottom-color:#235235}
@media(max-width:1040px){
  .about-process-grid{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .about-work-photo{height:400px}
  .about-work-device{width:155px;height:333px}
  .about-work-device-first{left:8%}
  .about-work-device-second{left:36%}
  .about-work-device-third{left:64%}
  .about-legal{gap:0 36px}
  .about-legal>div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:800px){
  .about-page-hero{padding-top:38px}
  .about-page-hero .portfolio-back{margin-bottom:60px}
  .about-page-hero h1{font-size:clamp(42px,7vw,63px)}
  .about-hero-bottom{gap:30px;margin:35px 0 53px}
  .about-page-section{padding:85px 0}
  .about-split{grid-template-columns:1fr;gap:27px}
  .about-split h2{max-width:690px}
  .about-team-intro{margin-bottom:38px}
  .about-section-heading{grid-template-columns:1fr;gap:15px}
  .about-section-heading .section-label{grid-column:1}
  .about-section-heading>p:last-child:not(.section-label){max-width:580px}
  .about-work-grid{grid-template-columns:1fr;gap:42px}
  .about-work-grid>div:first-child{max-width:690px}
  .about-work-photo{height:400px}
  .about-work-device{width:180px;height:378px}
  .about-work-device-first{left:16%}
  .about-work-device-second{left:42%}
  .about-work-device-third{left:68%}
  .people-grid{gap:15px}
  .about-person{padding:20px;gap:16px}
  .person-mark{width:60px;height:60px;font-size:19px}
  .person-details h3{font-size:18px}
  .about-identity-head{grid-template-columns:1fr;gap:17px}
}
@media(max-width:600px){
  .about-page-hero{padding-top:27px}
  .about-page-hero .portfolio-back{margin-bottom:48px}
  .about-page-hero h1{font-size:clamp(35px,9.2vw,49px)}
  .about-page-hero .overline{margin-bottom:18px}
  .about-hero-bottom{grid-template-columns:1fr;gap:18px;margin:29px 0 37px}
  .about-hero-intro{font-size:18px}
  .about-hero-detail{font-size:14px;line-height:1.83}
  .about-facts{grid-template-columns:1fr;gap:0;padding:6px 0 16px}
  .about-facts>div,.about-facts>div+div{padding:14px 0;border:0;border-bottom:1px solid #dce4da;gap:5px}
  .about-facts>div:last-child{border-bottom:0}
  .about-facts strong{font-size:16px}
  .about-page-section{padding:67px 0}
  .about-main h2{font-size:clamp(32px,8.4vw,44px);line-height:1.18;margin-top:17px}
  .about-prose p{font-size:14px;line-height:1.9;margin-bottom:18px}
  .about-idea{margin-top:43px;padding:27px 25px;gap:11px;align-items:flex-start}
  .about-quote-decoration{font-size:65px;margin-top:3px}
  .about-idea p{font-size:clamp(21px,6.4vw,28px);line-height:1.42}
  .about-team-intro{margin-bottom:29px}
  .people-grid{grid-template-columns:1fr;gap:12px}
  .about-person{min-height:108px;padding:18px}
  .about-team-note{font-size:13px;margin-top:23px}
  .about-section-heading{gap:11px}
  .about-section-heading>p:last-child:not(.section-label){font-size:14px}
  .about-process-grid{grid-template-columns:1fr;gap:25px;margin-top:37px}
  .about-step{padding-top:18px}
  .about-step-mark{margin-bottom:14px}
  .about-step h3{font-size:19px;margin-bottom:8px}
  .about-step p{font-size:14px}
  .about-values-grid{grid-template-columns:1fr;gap:25px;margin-top:39px}
  .about-value{padding-top:20px}
  .about-value h3{font-size:19px;margin-bottom:9px}
  .about-work-grid{gap:29px}
  .about-work-photo{height:340px}
  .about-work-device{width:132px;height:289px;border-width:6px;border-radius:22px 22px 0 0}
  .about-work-device-first{left:6%;bottom:-24px}
  .about-work-device-second{left:35%}
  .about-work-device-third{left:63%}
  .about-work-grid>div:first-child>p:not(.section-label){font-size:14px}
  .about-work-list li{font-size:12px}
  .about-legal{grid-template-columns:1fr;margin-top:30px}
  .about-legal>div{grid-template-columns:135px 1fr;gap:12px;padding:16px 0}
  .about-legal dt,.about-legal dd{font-size:12px}
}
@media(max-width:380px){
  .about-legal>div{grid-template-columns:1fr}
  .about-work-device{width:117px;height:260px}
  .about-work-device-first{left:4%}
  .about-work-device-second{left:34%}
  .about-work-device-third{left:61%}
}

/* Services / Usługi — clear editorial offer page, no invented projects or metrics. */
.services-page{background:#fff;color:var(--ink)}
.services-page .section-label{letter-spacing:.066em}
.services-page-hero{background:var(--page);padding:50px 0 0;border-bottom:1px solid var(--rule)}
.services-page-hero .portfolio-back{margin-bottom:74px}
.services-page-hero .overline{margin-bottom:25px}
.services-page-hero h1{font-size:clamp(44px,5.1vw,72px);font-weight:620;letter-spacing:-.063em;line-height:1.13;margin:0;max-width:1050px;text-wrap:balance}
.services-hero-bottom{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(46px,8vw,135px);align-items:start;margin:47px 0 83px}
.services-hero-intro{font-size:clamp(19px,1.9vw,25px);font-weight:490;letter-spacing:-.023em;line-height:1.62;color:#374a3c;margin:0;max-width:670px}
.services-hero-detail{font-size:15px;line-height:1.88;color:var(--muted);margin:0;max-width:460px}
.services-index{background:#fff;padding:100px 0 88px}
.services-index-head{display:grid;grid-template-columns:1fr .76fr;gap:18px clamp(50px,8vw,140px);align-items:end}
.services-index-head .section-label{grid-column:1/-1}
.services-index-head h2,.services-industries h2,.services-process h2{font-size:clamp(36px,3.85vw,55px);font-weight:620;letter-spacing:-.055em;line-height:1.19;margin:0;max-width:660px}
.services-index-head>p:not(.section-label){margin:0 0 4px;font-size:15px;line-height:1.84;color:var(--muted);max-width:460px}
.services-index-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:49px;border-top:1px solid var(--rule)}
.services-index-links>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;border-bottom:1px solid var(--rule);font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.4;color:#2a4431;transition:color .2s}
.services-index-links>a:hover{color:#397d55}
.services-index-links>a>svg{color:#75a07d;flex:none}
.offerings-section{border-top:1px solid var(--rule);background:#f9faf7;padding:4px 0 75px}
.offering{display:grid;grid-template-columns:.93fr 1.07fr;gap:clamp(55px,10vw,145px);align-items:start;border-bottom:1px solid #dce4d9;padding:73px 0 80px;scroll-margin-top:28px}
.offering-left{padding-top:3px}
.offering-mark{width:10px;height:10px;border-radius:50%;border:2px solid #5f956c;display:block;margin-bottom:27px}
.offering h3{font-size:clamp(29px,3vw,43px);line-height:1.18;font-weight:625;letter-spacing:-.051em;margin:0 0 24px;max-width:520px}
.offering-lead{font-size:17px;color:#47634d;font-weight:480;line-height:1.7;letter-spacing:-.014em;margin:0;max-width:490px}
.offering-description{font-size:15px;color:var(--muted);line-height:1.89;margin:0 0 27px;max-width:560px}
.offering-includes{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid #dce5d9;max-width:560px}
.offering-includes li{display:flex;gap:11px;align-items:start;padding:13px 0;border-bottom:1px solid #dce5d9;color:#344a39;font-size:13px;font-weight:575;line-height:1.6}
.offering-includes li::before{content:"";width:5px;height:5px;margin-top:8px;border-radius:50%;background:#7aad80;flex:none}
.offering-example{font-size:12px;line-height:1.8;color:#76877a;margin:0;max-width:530px}
.services-industries{background:#fff;padding:118px 0}
.services-industries-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(50px,8vw,125px);align-items:end}
.services-industries-head .section-label{margin-bottom:21px}
.services-industries-head>p{font-size:15px;line-height:1.87;color:var(--muted);margin:0 0 3px;max-width:490px}
.services-domains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:61px 0 35px}
.services-domain{padding:25px 0 11px;border-top:1px solid #d6e0d4}
.domain-marker{width:8px;height:8px;background:#639a6c;border-radius:50%;margin-bottom:24px}
.services-domain h3{font-size:22px;font-weight:640;letter-spacing:-.039em;line-height:1.28;margin:0 0 17px;max-width:295px}
.services-domain p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:340px}
.services-inline-link{display:inline-flex;gap:15px;align-items:center;color:#2d5b40;padding:0 0 9px;border-bottom:1px solid #a6bea9;font-size:13px;font-weight:670}
.services-inline-link:hover{border-bottom-color:#35694a}
.services-process{background:#eff4ed;border-top:1px solid #e1ebdf;padding:112px 0 105px}
.services-process-head{display:grid;grid-template-columns:.42fr 1fr;align-items:start;gap:clamp(50px,7vw,95px)}
.services-process-head .section-label{padding-top:11px}
.services-process-head h2{max-width:760px}
.services-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:65px 0 36px}
.services-step{border-top:1px solid #cddccc;padding:25px 0 0}
.services-step-dot{display:block;height:10px;width:10px;margin-bottom:29px;border-radius:50%;border:2px solid #668e6b}
.services-step h3{font-size:19px;font-weight:640;line-height:1.32;letter-spacing:-.033em;margin:0 0 15px}
.services-step p{font-size:13px;line-height:1.87;color:#536857;margin:0}
.services-page .contact-section{margin-top:0}
.services-read-more{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:675;color:var(--green);border-bottom:1px solid #9cbca1;padding:0 0 9px;margin-top:26px;max-width:max-content}
.services-read-more:hover{border-bottom-color:#245534}
@media(max-width:1050px){
  .services-index-links{gap:0 22px}
  .offering{gap:55px}
  .services-process-grid{grid-template-columns:repeat(2,1fr);gap:35px}
}
@media(max-width:800px){
  .services-page-hero{padding-top:35px}
  .services-page-hero .portfolio-back{margin-bottom:61px}
  .services-page-hero h1{font-size:clamp(43px,7vw,62px)}
  .services-hero-bottom{gap:30px;margin:34px 0 60px}
  .services-index{padding:82px 0 70px}
  .services-index-head{grid-template-columns:1fr;gap:20px}
  .services-index-head .section-label{grid-column:1}
  .services-index-head>p:not(.section-label){max-width:650px}
  .services-index-links{grid-template-columns:repeat(2,1fr)}
  .offering{grid-template-columns:1fr;gap:21px;padding:58px 0 64px}
  .offering-mark{margin-bottom:18px}
  .offering h3{max-width:700px;margin-bottom:15px}
  .offering-lead{max-width:680px}
  .offering-description{max-width:690px}
  .offering-includes{max-width:700px}
  .services-industries{padding:92px 0}
  .services-industries-head{grid-template-columns:1fr;gap:22px}
  .services-industries-head>p{max-width:690px}
  .services-domains{gap:18px}
  .services-process{padding:92px 0}
  .services-process-head{grid-template-columns:1fr;gap:17px}
  .services-process-head .section-label{padding-top:0}
}
@media(max-width:600px){
  .services-page-hero{padding-top:25px}
  .services-page-hero .portfolio-back{margin-bottom:49px}
  .services-page-hero .overline{margin-bottom:20px}
  .services-page-hero h1{font-size:clamp(35px,9vw,49px)}
  .services-hero-bottom{grid-template-columns:1fr;gap:20px;margin:29px 0 42px}
  .services-hero-intro{font-size:18px}
  .services-hero-detail{font-size:14px}
  .services-index{padding:67px 0 58px}
  .services-index-head h2,.services-industries h2,.services-process h2{font-size:clamp(31px,8.5vw,43px)}
  .services-index-head>p:not(.section-label){font-size:14px}
  .services-index-links{grid-template-columns:1fr;gap:0;margin-top:28px}
  .services-index-links>a{padding:15px 0;font-size:14px}
  .offerings-section{padding:0 0 45px}
  .offering{padding:46px 0 48px;gap:22px}
  .offering h3{font-size:clamp(29px,8vw,37px)}
  .offering-lead{font-size:16px}
  .offering-description{font-size:14px;line-height:1.82;margin-bottom:19px}
  .offering-includes li{font-size:13px}
  .services-industries{padding:74px 0}
  .services-domains{grid-template-columns:1fr;gap:14px;margin:32px 0 31px}
  .services-domain{padding:20px 0 14px}
  .domain-marker{margin-bottom:14px}
  .services-domain h3{font-size:20px;margin-bottom:9px}
  .services-domain p{font-size:14px}
  .services-process{padding:70px 0}
  .services-process-grid{grid-template-columns:1fr;gap:25px;margin:40px 0 30px}
  .services-step{padding-top:18px}
  .services-step-dot{margin-bottom:15px}
  .services-step h3{font-size:18px;margin-bottom:9px}
  .services-step p{font-size:14px}
}

/* Country of each showcased project, sourced from actual deployments. */
.project-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:9px 13px}
.project-country{display:inline-flex;align-items:center;gap:8px;color:#718278;letter-spacing:0;font-size:12px;font-weight:550;text-transform:none}
.project-country::before{content:"";display:block;width:4px;height:4px;border-radius:50%;background:#a0b5a0}
/* International work on the real company presentation page. */
.about-international-section{background:#fff;border-bottom:1px solid #e7ede6}
.about-international-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,8vw,135px);align-items:start}
.about-international-layout h2{max-width:600px}
.about-international-body{padding-top:10px}
.about-international-body>p:first-child{font-size:16px;line-height:1.91;color:var(--muted);margin:0 0 27px}
.about-international-countries{display:flex;gap:11px;flex-wrap:wrap}
.about-international-countries>span{display:inline-flex;align-items:center;border:1px solid #dce8d9;background:#f7faf6;color:#315b3c;border-radius:50px;font-size:12px;font-weight:640;padding:10px 17px}
.about-international-note{font-size:12px;color:#758678;line-height:1.6;margin:23px 0 0}
@media(max-width:800px){
  .about-international-layout{grid-template-columns:1fr;gap:24px}
  .about-international-body{padding-top:0}
}
@media(max-width:600px){
  .about-international-body>p:first-child{font-size:14px;line-height:1.9}
}

/* Contact & Project brief — restrained, accessible forms, isolated from legacy website. */
.engagement-page{background:#fafbf8;color:var(--ink)}
.engagement-hero{padding:45px 0 80px;background:#fafbf8;border-bottom:1px solid var(--rule)}
.engagement-hero .portfolio-back{margin-bottom:65px}
.engagement-hero .overline{margin-bottom:21px}
.engagement-hero h1{font-size:clamp(45px,5.2vw,74px);letter-spacing:-.065em;line-height:1.12;font-weight:620;max-width:970px;margin:0}
.engagement-intro{font-size:clamp(16px,1.7vw,20px);line-height:1.78;color:#536459;max-width:750px;margin:29px 0 0}
.engagement-body{background:#fff;padding:85px 0 118px}
.contact-columns,.request-columns{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(55px,8vw,125px);align-items:start}
.contact-details,.request-aside{padding-top:12px}
.contact-detail{border-top:1px solid var(--rule);padding:23px 0;display:flex;flex-direction:column;gap:10px}
.contact-details>.section-label{margin-bottom:29px}
.contact-detail>span{font-size:12px;color:#76877b}
.contact-detail>a,.contact-detail>strong{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:610;line-height:1.4;letter-spacing:-.025em;overflow-wrap:anywhere}
.contact-detail>a:hover{color:#2d6a45}
.contact-international{font-size:13px;line-height:1.82;color:#667869;margin:20px 0 0;max-width:350px}
.contact-project-link{background:#edf3e9;border:1px solid #e1eadf;border-radius:5px;padding:31px 28px;margin-top:45px}
.contact-project-link .section-label{margin-bottom:18px}
.contact-project-link h2,.request-aside h2{font-size:clamp(25px,2.6vw,36px);font-weight:620;line-height:1.22;letter-spacing:-.048em;margin:0 0 17px}
.contact-project-link>p:not(.section-label),.request-aside>p:not(.section-label){font-size:14px;line-height:1.85;color:#59705f;margin:0 0 27px}
.contact-project-link .button{font-size:12px;min-height:50px;padding:14px 16px}
.form-shell{border:1px solid #e0e7df;background:#fff;border-radius:7px;padding:clamp(25px,3vw,46px);box-shadow:0 16px 36px rgba(32,67,40,.035);min-width:0}
.form-heading{padding-bottom:28px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.form-heading h2{font-size:clamp(28px,2.9vw,39px);font-weight:620;letter-spacing:-.053em;margin:0 0 10px;line-height:1.2}
.form-heading p{font-size:13px;line-height:1.75;color:#748076;margin:0}
.lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px 19px}
.lead-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.lead-field-wide{grid-column:1/-1}
.lead-field label{color:#334638;font-size:12px;font-weight:650;line-height:1.45}
.req-marker{color:#3d794c;font-size:13px;font-weight:700}
.lead-field input,.lead-field select,.lead-field textarea{font:inherit;background:#fcfdfb;color:#24382a;border:1px solid #d7e0d6;border-radius:4px;font-size:14px;padding:13px 14px;line-height:1.5;min-height:49px;max-width:100%;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}
.lead-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23637868' stroke-width='1.7' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.lead-field textarea{resize:vertical;min-height:148px;line-height:1.66}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:#96a097;opacity:1}
.lead-field input:focus,.lead-field select:focus,.lead-field textarea:focus{border-color:#4d8960;box-shadow:0 0 0 3px #dae9db}
.lead-field input:hover,.lead-field select:hover,.lead-field textarea:hover{border-color:#afc7b3}
.privacy-note{border-top:1px solid var(--rule);margin:32px 0 17px;padding-top:23px;font-size:12px;line-height:1.8;color:#677b6b}
.privacy-choice{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:12px;line-height:1.65;color:#43584a}
.privacy-choice input{height:18px;width:18px;flex:none;accent-color:#315c41;margin:1px 0 0;cursor:pointer}
.lead-submit-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:31px}
.lead-submit{cursor:pointer;min-width:205px}
.lead-submit:disabled{cursor:wait;opacity:.7;transform:none}
.lead-required-note{font-size:11px;color:#8a998e}
.form-error{background:#fff4ef;border-left:3px solid #bf5438;color:#803b2a;font-size:13px;line-height:1.65;padding:13px 16px;margin:22px 0 0}
.lead-success{padding:38px 13px 21px;outline:none}
.lead-success[hidden],.form-error[hidden]{display:none!important}
.lead-success-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#e5f3e4;color:#2d6a39;font-size:24px;margin-bottom:23px}
.lead-success h3{font-size:29px;line-height:1.25;letter-spacing:-.045em;font-weight:625;margin:0 0 15px}
.lead-success p{font-size:14px;line-height:1.85;color:#617365;margin:0 0 24px}
.lead-success span{display:block;font-size:12px;color:#7b8b7f;margin:0 0 7px}
.lead-success strong{
  display:block;
  width:fit-content;
  max-width:100%;
  font-size:19px;
  font-weight:690;
  color:#306443;
  letter-spacing:.04em;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.trap-field{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.request-aside h2{font-size:clamp(29px,3.1vw,41px);margin-top:20px;max-width:370px}
.request-aside>p:not(.section-label){max-width:390px}
.request-aside-foot{padding:25px 0 0;margin:48px 0 31px;border-top:1px solid var(--rule)}
.request-aside-foot>.section-label{margin-bottom:14px}
.request-aside-foot>p:last-child{font-size:14px;line-height:1.84;color:#6b7a6e;max-width:390px;margin:0}
.request-page .form-shell{border-color:#dbe7d9}
.request-page .engagement-hero{background:#eff4ed}
.request-page .engagement-body{background:#fcfdfa}
@media(max-width:1000px){
 .contact-columns,.request-columns{gap:40px;grid-template-columns:.7fr 1.3fr}
 .form-shell{padding:27px}
 .lead-fields{gap:20px 14px}
}
@media(max-width:800px){
 .engagement-hero{padding:37px 0 68px}
 .engagement-hero .portfolio-back{margin-bottom:55px}
 .engagement-hero h1{font-size:clamp(44px,7.5vw,61px)}
 .engagement-intro{font-size:16px}
 .engagement-body{padding:68px 0 85px}
 .contact-columns,.request-columns{grid-template-columns:1fr;gap:35px}
 .contact-details{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .contact-details>.section-label{grid-column:1/-1}
 .contact-international{grid-column:1/-1}
 .contact-project-link{grid-column:1/-1;margin-top:15px}
 .request-aside h2,.request-aside>p:not(.section-label){max-width:650px}
 .request-aside-foot{margin:22px 0 22px}
 .form-shell{padding:32px}
}
@media(max-width:600px){
 .engagement-hero{padding:26px 0 56px}
 .engagement-hero .portfolio-back{margin-bottom:47px}
 .engagement-hero h1{font-size:clamp(36px,9.3vw,48px)}
 .engagement-hero .overline{margin-bottom:16px}
 .engagement-intro{font-size:15px;line-height:1.8;margin-top:19px}
 .engagement-body{padding:42px 0 71px}
 .contact-details{display:block;padding-top:0}
 .contact-details>.section-label{margin-bottom:23px}
 .contact-detail{padding:19px 0}
 .contact-project-link{padding:25px 21px;margin-top:30px}
 .contact-project-link h2{font-size:28px}
 .form-shell{padding:23px 19px}
 .form-heading{padding-bottom:21px;margin-bottom:24px}
 .form-heading h2{font-size:29px}
 .lead-fields{grid-template-columns:1fr;gap:18px}
 .lead-field-wide{grid-column:1}
 .lead-field input,.lead-field select,.lead-field textarea{font-size:16px}
 .privacy-note{margin-top:27px}
 .lead-submit-row{flex-direction:column;align-items:stretch;gap:10px}
 .lead-submit{width:100%}
 .request-aside{padding-top:0}
 .request-aside h2{font-size:32px}
}

/* Clear entry point for requests: advice, scope discussion and quote. */
.header-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex:none;
  background:#2d5b40;
  color:#fff;
  padding:13px 18px;
  border:1px solid #2d5b40;
  border-radius:4px;
  font-size:12px;
  font-weight:680;
  letter-spacing:-.005em;
  transition:background .2s,transform .2s;
}
.header-contact:hover{background:#204b32;color:white;transform:translateY(-1px)}
.header-contact span{font-size:19px;line-height:1}
.mobile-quote-banner{display:none}
.hero-actions .button-solid{
  min-height:57px;
  padding:17px 21px;
  gap:26px;
  font-size:14px;
  box-shadow:0 6px 17px rgba(36,77,47,.1);
}
.hero-cta-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:17px 0 0;
  color:#667b6b;
  font-size:12px;
  line-height:1.65;
  max-width:390px;
}
.hero-cta-note::before{content:"";width:6px;height:6px;margin-top:7px;background:#83ac86;border-radius:50%;flex:none}
@media(min-width:801px) and (max-width:1160px){
  .header-contact{display:inline-flex}
  .header-inner{gap:18px}
  .desktop-nav{gap:15px}
  .header-actions{gap:8px}
}
@media(min-width:801px) and (max-width:940px){
  .header-inner{gap:13px}
  .header-contact{padding:11px 12px;font-size:11px;gap:6px}
  .desktop-nav{gap:11px}
  .desktop-nav a{font-size:11px}
}
@media(max-width:800px){
  .header-contact{display:none}
  .mobile-quote-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    min-height:47px;
    padding:12px 24px;
    background:#2d5b40;
    color:#fff;
    font-size:13px;
    font-weight:650;
    line-height:1.45;
  }
  .mobile-quote-banner svg{flex:none}
  .mobile-quote-banner:hover{background:#204b32}
}
@media(max-width:600px){
  .hero-actions .button-solid{width:100%;min-height:54px;gap:14px;font-size:13px}
  .hero-cta-note{font-size:12px;margin-top:17px}
  .mobile-quote-banner{font-size:12px;min-height:46px}
}

/* November redesign — one coherent action group, no detached links or bullet. */
.hero-side .hero-cta-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:0;
  width:100%;
  max-width:460px;
}
.hero-side .hero-cta-stack .hero-primary-cta{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  min-height:52px;
  padding:14px 18px 14px 20px;
  gap:20px;
  justify-content:space-between;
  font-size:13px;
  font-weight:660;
  letter-spacing:-.012em;
  white-space:normal;
  box-shadow:0 5px 14px rgba(36,77,47,.065);
}
.hero-side .hero-cta-stack .hero-primary-cta svg{flex:none}
.hero-side .hero-cta-stack .hero-cta-note{
  display:block;
  color:#738076;
  font-size:12px;
  font-weight:450;
  line-height:1.6;
  max-width:380px;
  margin:12px 0 0;
}
.hero-side .hero-cta-stack .hero-cta-note::before{content:none;display:none}
.hero-side .hero-cta-stack .hero-secondary-link{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:10px;
  margin:22px 0 0;
  padding-bottom:6px;
  font-size:12px;
  font-weight:640;
  border-bottom:1px solid #a8c0aa;
}
.hero-side .hero-cta-stack .hero-secondary-link svg{width:15px;height:15px}
.hero-side>p:first-child{margin-bottom:25px}

/* Full, proportional phones. Source screenshots all match a modern ~390x844
   screen; no stretching, no bottom cropping, no artificially tall frames. */
.portfolio-item-visual .project-club-visual::after,
.work-image .project-club-visual::after,
.portfolio-item-visual .mockup-barber::after,
.work-image .mockup-barber::after,
.portfolio-item-visual .mockup-dance::after{content:none;display:none}

.portfolio-item-visual .project-club-visual .project-phone,
.portfolio-item-visual .mockup-barber .mockup-phone,
.portfolio-item-visual .mockup-dance .mockup-dance-phone,
.work-image .project-club-visual .project-phone,
.work-image .mockup-barber .mockup-phone,
.about-work-photo .about-work-device{
  box-sizing:border-box;
  aspect-ratio:390 / 844;
  height:auto;
  overflow:hidden;
  background:#121816;
  border:7px solid #263029;
  border-radius:35px;
  box-shadow:0 17px 34px rgba(20,34,25,.16),0 6px 13px rgba(20,34,25,.07),
    inset 0 0 0 1px rgba(255,255,255,.09);
}
.portfolio-item-visual .project-club-visual .project-phone img,
.portfolio-item-visual .mockup-barber .mockup-phone img,
.portfolio-item-visual .mockup-dance .mockup-dance-phone img,
.work-image .project-club-visual .project-phone img,
.work-image .mockup-barber .mockup-phone img,
.about-work-photo .about-work-device img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
}
/* Restrained dark earpiece: screenshots already have a status bar. */
.portfolio-item-visual .project-phone::before,
.portfolio-item-visual .mockup-phone::before,
.portfolio-item-visual .mockup-dance-phone::before,
.work-image .project-phone::before,
.work-image .mockup-phone::before{
  content:"";
  position:absolute;
  z-index:5;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  width:23%;
  height:9px;
  background:#111815;
  border-radius:0 0 10px 10px;
  pointer-events:none;
}
.portfolio-item-visual .project-club-visual .project-phone{
  width:216px;
  bottom:21px;
  transform-origin:center center;
}
.portfolio-item-visual .project-club-visual .phone-front{
  left:calc(50% - 184px);
  transform:rotate(-3deg);
  z-index:3;
}
.portfolio-item-visual .project-club-visual .phone-back{
  width:204px;
  left:calc(50% + 12px);
  bottom:24px;
  transform:rotate(5deg);
  filter:brightness(.97);
  z-index:2;
}
.portfolio-item-visual .mockup-barber .mockup-phone{
  width:208px;
  bottom:22px;
  border-color:#292523;
  background:#161514;
  transform-origin:center center;
  box-shadow:0 17px 34px rgba(45,31,19,.17),0 5px 12px rgba(45,31,19,.06);
}
.portfolio-item-visual .mockup-barber .barber-phone-home{
  left:calc(50% - 224px);
  transform:rotate(-4deg);
  z-index:3;
}
.portfolio-item-visual .mockup-barber .barber-phone-calendar{
  left:calc(50% + 17px);
  bottom:32px;
  transform:rotate(5deg);
  z-index:2;
}
.portfolio-item-visual .mockup-dance{align-items:center}
.portfolio-item-visual .mockup-dance .mockup-dance-phone{
  position:relative;
  flex:none;
  width:216px;
  bottom:auto;
  transform:rotate(-2deg);
  border:8px solid #27202c;
  background:#1b1521;
  border-radius:37px;
  box-shadow:0 22px 42px rgba(67,32,75,.19),0 7px 16px rgba(67,32,75,.08);
}
.portfolio-item-visual .mockup-dance .mockup-dance-phone::before{
  background:#111019;
  height:10px;
  top:5px;
}

/* Homepage projects: device framing remains realistic even in smaller cards. */
.work-image .project-club-visual .project-phone{
  width:164px;
  bottom:13px;
}
.work-image .project-club-visual .phone-front{
  left:calc(50% - 153px);
  z-index:3;
  transform:rotate(-3deg);
}
.work-image .project-club-visual .phone-back{
  width:153px;
  left:calc(50% + 9px);
  bottom:16px;
  transform:rotate(5deg);
  filter:brightness(.97);
}
.work-image .mockup-barber .mockup-phone{
  width:164px;
  bottom:13px;
  background:#161514;
  border-color:#292523;
  transform-origin:center center;
}
.work-image .mockup-barber .barber-phone-home{
  left:calc(50% - 174px);
  transform:rotate(-4deg);
  z-index:3;
}
.work-image .mockup-barber .barber-phone-calendar{
  width:157px;
  left:calc(50% + 8px);
  bottom:20px;
  transform:rotate(5deg);
  z-index:2;
}

/* The team showcase on About uses the same authentic device proportions. */
.about-work-photo .about-work-device{
  width:168px;
  bottom:18px;
  transform-origin:center center;
  border-radius:30px;
}
.about-work-photo .about-work-device-first{left:8%;transform:rotate(-6deg)}
.about-work-photo .about-work-device-second{left:36%;transform:rotate(2deg)}
.about-work-photo .about-work-device-third{left:65%;transform:rotate(7deg)}

@media(max-width:1050px) and (min-width:801px){
  .portfolio-item-visual .project-club-visual .project-phone{width:172px;bottom:20px}
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 139px)}
  .portfolio-item-visual .project-club-visual .phone-back{width:161px;left:calc(50% + 11px);bottom:23px}
  .portfolio-item-visual .mockup-barber .mockup-phone{width:170px;bottom:18px}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 170px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% + 8px);bottom:22px}
  .portfolio-item-visual .mockup-dance .mockup-dance-phone{width:181px}
}
@media(max-width:800px){
  .portfolio-item-visual{height:495px}
  .portfolio-item-visual .project-club-visual .project-phone{width:215px;bottom:21px}
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 179px)}
  .portfolio-item-visual .project-club-visual .phone-back{width:203px;left:calc(50% + 10px);bottom:22px}
  .portfolio-item-visual .mockup-barber .mockup-phone{width:214px;bottom:20px}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 220px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% + 16px);bottom:30px}
  .portfolio-item-visual .mockup-dance .mockup-dance-phone{width:219px}
}
@media(max-width:600px){
  .hero-side .hero-cta-stack{align-items:stretch;max-width:100%}
  .hero-side .hero-cta-stack .hero-primary-cta{
    width:100%;
    max-width:100%;
    padding:15px 17px;
    min-height:54px;
    font-size:13px;
  }
  .hero-side .hero-cta-stack .hero-cta-note{
    margin:12px 0 0;
    max-width:100%;
    font-size:12px;
  }
  .hero-side .hero-cta-stack .hero-secondary-link{
    align-self:flex-start;
    margin-top:19px;
  }
  .portfolio-item-visual{height:410px}
  .portfolio-item-visual .project-club-visual .project-phone{width:180px;bottom:11px}
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 152px)}
  .portfolio-item-visual .project-club-visual .phone-back{width:169px;left:calc(50% + 4px);bottom:13px}
  .portfolio-item-visual .mockup-barber .mockup-phone{width:181px;bottom:13px}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 174px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{width:173px;left:calc(50% + 3px);bottom:17px}
  .portfolio-item-visual .mockup-dance .mockup-dance-phone{width:182px;border-radius:32px}
  .work-image .project-club-visual .project-phone{width:157px;bottom:9px}
  .work-image .project-club-visual .phone-front{left:calc(50% - 144px)}
  .work-image .project-club-visual .phone-back{width:148px;left:calc(50% + 2px);bottom:12px}
  .work-image .mockup-barber .mockup-phone{width:151px;bottom:10px}
  .work-image .mockup-barber .barber-phone-home{left:calc(50% - 151px)}
  .work-image .mockup-barber .barber-phone-calendar{width:143px;left:calc(50% + 3px);bottom:15px}
  .about-work-photo .about-work-device{width:138px;bottom:14px}
  .about-work-photo .about-work-device-first{left:5%}
  .about-work-photo .about-work-device-second{left:34%}
  .about-work-photo .about-work-device-third{left:63%}
}
@media(max-width:380px){
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 146px)}
  .portfolio-item-visual .project-club-visual .phone-back{left:calc(50% + 2px)}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 166px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% - 3px)}
  .about-work-photo .about-work-device{width:122px}
}

/* Keep both complete handsets inside narrow case-study panels. */
@media(max-width:600px){
  .portfolio-item-visual .project-club-visual .phone-back{left:calc(50% - 23px)}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 158px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% - 18px)}
}
@media(max-width:380px){
  .portfolio-item-visual .project-club-visual .phone-front{
    width:164px;
    left:calc(50% - 133px);
  }
  .portfolio-item-visual .project-club-visual .phone-back{
    width:155px;
    left:calc(50% - 29px);
  }
  .portfolio-item-visual .mockup-barber .barber-phone-home{
    width:160px;
    left:calc(50% - 131px);
  }
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{
    width:153px;
    left:calc(50% - 28px);
  }
}
@media(max-width:600px){
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 151px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% - 23px)}
}
@media(max-width:380px){
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 128px)}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 125px)}
  .work-image .project-club-visual .phone-front{
    width:142px;left:calc(50% - 124px);
  }
  .work-image .project-club-visual .phone-back{
    width:134px;left:calc(50% - 10px);
  }
  .work-image .mockup-barber .barber-phone-home{
    width:140px;left:calc(50% - 125px);
  }
  .work-image .mockup-barber .barber-phone-calendar{
    width:134px;left:calc(50% - 13px);
  }
}
@media(max-width:600px){
  .about-work-photo .about-work-device-third{left:calc(100% - 163px)}
}
@media(max-width:380px){
  .portfolio-item-visual .project-club-visual .phone-front{left:calc(50% - 120px)}
  .portfolio-item-visual .project-club-visual .phone-back{left:calc(50% - 41px)}
  .portfolio-item-visual .mockup-barber .barber-phone-home{left:calc(50% - 118px)}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{left:calc(50% - 43px)}
  .work-image .project-club-visual .phone-back{left:calc(50% - 14px)}
  .work-image .mockup-barber .barber-phone-home{left:calc(50% - 120px)}
}
/* Give each preview enough room for an entire phone including its rounded top. */
@media(max-width:800px){.work-image{height:390px}}
@media(max-width:600px){.work-image{height:375px}}
@media(min-width:601px) and (max-width:800px){
  .work-image .project-club-visual .phone-back{left:calc(50% - 3px)}
  .work-image .mockup-barber .barber-phone-home{left:calc(50% - 150px)}
  .work-image .mockup-barber .barber-phone-calendar{left:calc(50% - 9px)}
}
@media(min-width:601px) and (max-width:800px){
  .portfolio-item-visual .mockup-barber .barber-phone-calendar{bottom:14px}
}
/* The third handset in the About collage must remain visible on narrow columns. */
.about-work-photo .about-work-device-third{left:calc(100% - 195px)}

/* Portfolio phones: keep the top AND bottom of every frame visible.
   The previous full-size frames + rotation used up the vertical padding. */
.portfolio-item-visual .project-club-visual .project-phone,
.portfolio-item-visual .mockup-barber .mockup-phone {
  bottom:34px;
  transform-origin:center center;
}
.portfolio-item-visual .project-club-visual .phone-front {
  width:195px;
  left:calc(50% - 166px);
}
.portfolio-item-visual .project-club-visual .phone-back {
  width:184px;
  left:calc(50% + 5px);
  bottom:37px;
}
.portfolio-item-visual .mockup-barber .barber-phone-home {
  width:190px;
  left:calc(50% - 201px);
}
.portfolio-item-visual .mockup-barber .barber-phone-calendar {
  width:184px;
  left:calc(50% + 13px);
  bottom:40px;
}
@media (min-width:801px) and (max-width:1050px) {
  .portfolio-item-visual .project-club-visual .phone-front {width:154px;left:calc(50% - 131px);bottom:27px}
  .portfolio-item-visual .project-club-visual .phone-back {width:147px;left:calc(50% + 1px);bottom:29px}
  .portfolio-item-visual .mockup-barber .barber-phone-home {width:155px;left:calc(50% - 158px);bottom:27px}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar {width:148px;left:calc(50% + 5px);bottom:30px}
}
@media (min-width:601px) and (max-width:800px) {
  .portfolio-item-visual .project-club-visual .phone-front {width:192px;left:calc(50% - 163px);bottom:33px}
  .portfolio-item-visual .project-club-visual .phone-back {width:182px;left:calc(50% + 3px);bottom:36px}
  .portfolio-item-visual .mockup-barber .barber-phone-home {width:190px;left:calc(50% - 195px);bottom:32px}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar {width:183px;left:calc(50% + 10px);bottom:36px}
}
@media (max-width:600px) {
  .portfolio-item-visual .project-club-visual .phone-front {width:159px;left:calc(50% - 135px);bottom:26px}
  .portfolio-item-visual .project-club-visual .phone-back {width:152px;left:calc(50% - 16px);bottom:28px}
  .portfolio-item-visual .mockup-barber .barber-phone-home {width:159px;left:calc(50% - 139px);bottom:25px}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar {width:153px;left:calc(50% - 20px);bottom:30px}
}
@media (max-width:380px) {
  .portfolio-item-visual .project-club-visual .phone-front {width:142px;left:calc(50% - 120px);bottom:26px}
  .portfolio-item-visual .project-club-visual .phone-back {width:136px;left:calc(50% - 28px);bottom:28px}
  .portfolio-item-visual .mockup-barber .barber-phone-home {width:143px;left:calc(50% - 117px);bottom:25px}
  .portfolio-item-visual .mockup-barber .barber-phone-calendar {width:136px;left:calc(50% - 28px);bottom:30px}
}

/* November 2026 — editorial refinement informed by observed real-user UX
   principles: specific proof early, restrained interactions and readable text.
   No video, autoplay, atmospheric effects or decorative auto-rotating cards. */

/* Home: put genuine project work immediately after the brand promise. */
.hero-section>.container>.overline{padding-top:clamp(67px,6.6vw,88px)}
.hero-grid{padding-top:36px;padding-bottom:74px}
.hero-side>p{line-height:1.72}
.hero-foot{padding-top:22px;padding-bottom:23px}
.hero-note{color:#526456;font-size:11px;letter-spacing:.065em}
.hero-skills span{color:#4f6254}
.work-section{padding-top:88px;padding-bottom:93px}
.work-section .section-head{margin-bottom:36px}
.work-image{transition:box-shadow .38s ease,transform .38s ease}
@media(hover:hover) and (pointer:fine){
  .work-card:hover .work-image{transform:translateY(-3px);box-shadow:0 16px 32px rgba(28,52,34,.09)}
}
.work-card-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;border-top:1px solid var(--rule);padding-top:15px;
}
.work-card-bottom .work-name{width:auto;border:0;padding:0;font-size:13px}
.work-card-detail{
  display:inline-flex;align-items:center;gap:8px;
  color:#2d5b40;border-bottom:1px solid #a6c1ac;padding:0 0 4px;
  font-size:12px;font-weight:680;line-height:1.45;
}
.work-card-detail:hover{border-color:#2d5b40}
.work-card-detail svg{transition:transform .2s ease}
.work-card-detail:hover svg{transform:translate(2px,-2px)}
.work-text>p:not(.work-type){margin-bottom:22px}

/* Portfolio: short, factual product evidence, not fabricated conversion stats. */
.portfolio-evidence{
  margin:0 0 25px;padding:18px 0 0;
  border-top:1px solid var(--rule);
}
.portfolio-evidence-label{
  margin:0 0 13px!important;font-size:11px!important;line-height:1.5!important;
  font-weight:760;letter-spacing:.065em;text-transform:uppercase;color:#346849!important;
}
.portfolio-evidence-list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.portfolio-evidence-list li{
  position:relative;padding-left:17px;font-size:13px;line-height:1.58;color:#485c4e;
}
.portfolio-evidence-list li::before{
  content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;
  border-radius:50%;background:#6a9873;
}
.portfolio-item-content h2{margin-bottom:19px}
.portfolio-item-content>p:not(.project-kicker){line-height:1.73;margin-bottom:23px}
.project-country{color:#4f6655}

/* Services: preserve essential detail but remove duplicate "how we work" content. */
.services-index{padding-top:78px;padding-bottom:68px}
.services-index-links{margin-top:34px}
.services-index-links>a{padding:17px 0}
.offering{padding:53px 0 58px;gap:clamp(34px,7vw,105px)}
.offering-mark{margin-bottom:17px}
.offering h3{margin-bottom:15px}
.offering-lead{font-size:16px;line-height:1.6}
.offering-description{line-height:1.74;margin-bottom:17px}
.offering-includes{margin-bottom:17px}
.offering-includes li{padding:10px 0}
.offering-example{color:#536a58;font-size:13px}
.offerings-section{padding-bottom:42px}
.services-industries{padding:86px 0}
.services-domains{margin-top:38px}
.services-industries .services-inline-link{margin-right:27px;margin-bottom:12px}

/* Human content: allow the writing to breathe without unnecessarily tall sections. */
.about-page-section{padding-top:94px;padding-bottom:94px}
.about-team-note,.about-international-note{color:#526657}

/* Legibility in fine print and low-emphasis controls. WCAG AA normal text
   target is at least 4.5:1; do not lighten functional labels for decoration. */
.hero-cta-note,.about-caption,.work-disclaimer,.portfolio-note,
.form-heading p,.privacy-note,.contact-detail>span,.contact-international,
.footer-top>div>p,.footer-bottom,.offering-example,
.lead-field input::placeholder,.lead-field textarea::placeholder{
  color:#526458!important;
}
.lead-field input::placeholder,.lead-field textarea::placeholder{opacity:1}
@media(max-width:800px){
  .hero-grid{padding-bottom:51px}
  .work-section{padding-top:75px;padding-bottom:78px}
  .offering{padding:49px 0 53px}
  .about-page-section{padding-top:75px;padding-bottom:75px}
}
@media(max-width:600px){
  .hero-section>.container>.overline{padding-top:65px}
  .hero-grid{padding-top:26px;padding-bottom:47px}
  .hero-side>p{line-height:1.7}
  .hero-foot{padding-top:18px;padding-bottom:21px}
  .work-section{padding-top:65px;padding-bottom:68px}
  .work-card-bottom{align-items:flex-start}
  .work-card-detail{font-size:13px}
  .services-index{padding-top:61px;padding-bottom:47px}
  .offering{padding:39px 0 43px}
  .offering h3{margin-bottom:12px}
  .offering-lead{font-size:15px}
  .services-industries{padding:69px 0}
  .about-page-section{padding-top:61px;padding-bottom:61px}
}
@media(prefers-reduced-motion:reduce){
  .work-image,.work-card-detail svg{transition:none!important;transform:none!important}
}

/* Transparent legal information, secondary to the actual work and enquiry flow. */
.footer-legal{margin:-26px 0 20px;display:flex;justify-content:flex-end}
.footer-legal a{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;
  color:#4e6254;border-bottom:1px solid #b8c8b8;padding-bottom:4px;
}
.footer-legal a:hover{border-color:var(--green);color:var(--green)}
.privacy-details-link{
  display:inline-flex;margin-left:5px;color:#285c3b;font-weight:660;
  text-decoration:underline;text-underline-offset:3px;
}
.privacy-details-link:hover{color:#183b27}
.legal-info-hero{border-bottom:1px solid var(--rule);padding:49px 0 76px}
.legal-info-hero .portfolio-back{margin-bottom:64px}
.legal-info-hero .overline{margin-bottom:21px}
.legal-info-hero h1{
  max-width:930px;margin:0;font-size:clamp(42px,5.2vw,69px);
  line-height:1.15;letter-spacing:-.058em;font-weight:630;
}
.legal-info-intro{max-width:700px;font-size:17px;line-height:1.75;color:#4f6254;margin:29px 0 0}
.legal-info-layout{
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:clamp(50px,9vw,150px);
  padding-top:80px;padding-bottom:118px;
}
.legal-info-aside{display:flex;flex-direction:column;gap:14px;font-size:14px}
.legal-info-aside strong{font-size:23px;letter-spacing:-.06em}
.legal-info-aside a{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.legal-info-content{max-width:730px}
.legal-info-section{padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid var(--rule)}
.legal-info-section h2{margin:0 0 12px;font-size:clamp(23px,2.15vw,31px);line-height:1.23;letter-spacing:-.044em;font-weight:630}
.legal-info-section p{color:#4e6153;font-size:15px;line-height:1.86;margin:0}
.legal-info-date{font-size:12px;color:#526458;margin:34px 0 0}
@media(max-width:800px){
 .legal-info-layout{grid-template-columns:1fr;gap:28px;padding-top:64px;padding-bottom:82px}
 .legal-info-aside{padding:0 0 25px;border-bottom:1px solid var(--rule)}
}
@media(max-width:600px){
 .footer-legal{justify-content:flex-start;margin:-20px 0 24px}
 .legal-info-hero{padding:28px 0 49px}
 .legal-info-hero .portfolio-back{margin-bottom:45px}
 .legal-info-hero h1{font-size:clamp(36px,9vw,47px)}
 .legal-info-intro{font-size:15px}
 .legal-info-layout{padding-top:48px;padding-bottom:70px}
 .legal-info-section{padding-bottom:21px;margin-bottom:21px}
 .legal-info-section p{font-size:14px}
 .privacy-details-link{margin-left:0;display:table;margin-top:8px}
}

/* Home expertise labels are the only content in the bottom rule. */
.hero-foot{justify-content:flex-end}
@media(max-width:800px){.hero-foot{flex-direction:row;justify-content:flex-start}}

/* CREANODE — editorial photo-backed sections.
   Photo 1: engineering workstation / "Ce que nous faisons".
   Photo 2: CREANODE wordmark on a white phone / "À propos".
   Keep type on a legible surface and preserve the original white/sage identity. */
.home-services-photo{
  position:relative;
  isolation:isolate;
  color:#f7faf6;
  border-top:0;
  background-color:#142b29;
  background-image:
    linear-gradient(92deg,
      rgba(10,28,27,.88) 0%,
      rgba(12,32,30,.77) 40%,
      rgba(10,26,24,.73) 100%),
    url('/assets/home/development-workspace.webp');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 48%;
  padding-block:clamp(92px,9vw,132px);
}
.home-services-photo .services-layout{position:relative;z-index:1}
.home-services-photo .section-label{color:#b7debf}
.home-services-photo h2,
.home-services-photo .service-row h3{color:#fbfefa}
.home-services-photo .services-aside>p:not(.section-label),
.home-services-photo .service-row p{color:#e5efe8}
.home-services-photo .services-list{border-color:rgba(229,244,232,.32)}
.home-services-photo .service-row{border-color:rgba(229,244,232,.28)}
.home-services-photo .service-row svg{color:#acd5b4}
.home-services-photo .services-read-more{
  color:#d5f1dc;
  border-bottom-color:#a9d1b2;
}
.home-services-photo .services-read-more:hover,
.home-services-photo .services-read-more:focus-visible{
  color:#fff;
  border-bottom-color:#fff;
}
.home-services-photo .services-aside h2{text-wrap:balance}

/* Full-width atmospheric image without altering original section geometry. */
.home-about-photo{
  color:#f7faf6;
  background-color:#142b29;
  background-image:
    linear-gradient(92deg,
      rgba(10,28,27,.86) 0%,
      rgba(12,32,30,.79) 46%,
      rgba(10,26,24,.72) 100%),
    url('/assets/hero-photos/about.webp');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 49%;
  border-top:1px solid rgba(225,239,228,.24);
}
.home-about-photo .about-intro .section-label{color:#b7debf}
.home-about-photo .about-intro h2{color:#fbfefa}
.home-about-photo .about-body>p{color:#e5efe8}
.home-about-photo .about-body blockquote{
  color:#f3fff4;
  border-left-color:#a3cdae;
}
.home-about-photo .about-caption{color:#d5e8d9!important}
.home-about-photo .about-read-more{
  color:#ddf3e2;
  border-bottom-color:#a9d1b2;
}
.home-about-photo .about-read-more:hover,
.home-about-photo .about-read-more:focus-visible{
  color:#fff;
  border-bottom-color:#fff;
}

@media(max-width:700px){
  .home-services-photo{
    background-position:42% center;
    padding-block:76px;
    background-image:
      linear-gradient(180deg,
        rgba(10,27,26,.86) 0%,
        rgba(10,28,25,.80) 54%,
        rgba(9,26,24,.88) 100%),
      url('/assets/home/development-workspace.webp');
  }
  .home-services-photo .services-layout{gap:34px}
  .home-services-photo .service-row{padding-block:21px}
  .home-about-photo{
    background-position:58% center;
    background-image:
      linear-gradient(180deg,
        rgba(10,27,26,.86) 0%,
        rgba(10,28,25,.82) 52%,
        rgba(9,26,24,.88) 100%),
      url('/assets/hero-photos/about.webp');
  }
}

/* CREANODE V2 / Original customer-supplied photography in page headers.
 * The photos are derived ONLY by resizing+WebP encoding from the five
 * JPEGs supplied in chat; none of the generated concept art is used.
 * A dark-sage gradient keeps all foreground content independently legible.
 * These rules don't change original header height, flow or typography. */
.hero-section,
.portfolio-hero,
.services-page-hero,
.about-page-hero,
.engagement-hero,
.legal-info-hero{
  background-color:#102922;
  background-image:
    linear-gradient(96deg,
      rgba(10,34,27,.91) 0%,
      rgba(12,40,31,.82) 43%,
      rgba(12,37,30,.55) 100%),
    var(--hero-original-photo);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--hero-original-position,center center);
  color:#f7faf6;
  border-bottom-color:rgba(218,242,222,.26);
}
.hero-section{--hero-original-photo:url('/assets/hero-photos/home.webp');--hero-original-position:center 54%}
.portfolio-hero{--hero-original-photo:url('/assets/hero-photos/projects.webp');--hero-original-position:center 53%}
.services-page-hero{--hero-original-photo:url('/assets/hero-photos/services.webp');--hero-original-position:center 50%}
/* About page: newly supplied original Goumbik laptop photo. */
.about-page-hero{
  --hero-original-photo:url('/assets/hero-photos/about-goumbik.webp');
  --hero-original-position:center 52%;
}
.contact-page .engagement-hero,.request-page .engagement-hero{
  --hero-original-photo:url('/assets/hero-photos/contact.webp');
  --hero-original-position:center 51%;
}
.legal-info-hero{--hero-original-photo:url('/assets/hero-photos/about.webp');--hero-original-position:center 40%}
/* Override the older request-page background shorthand without affecting forms. */
.request-page .engagement-hero{
  background-color:#102922;
  background-image:
    linear-gradient(96deg,rgba(10,34,27,.91),rgba(12,40,31,.82) 43%,rgba(12,37,30,.55)),
    var(--hero-original-photo);
}


/* White text on the green photographic overlay, with softer sage accents. */
.hero-section .overline,
.portfolio-hero .overline,
.services-page-hero .overline,
.about-page-hero .overline,
.engagement-hero .overline,
.legal-info-hero .overline{color:#c7e6ca}
.hero-section .overline-dot,
.portfolio-hero .overline-dot,
.services-page-hero .overline-dot,
.about-page-hero .overline-dot,
.engagement-hero .overline-dot,
.legal-info-hero .overline-dot{background:#a1d5a7}

.hero-section .hero-main h1,
.portfolio-hero .portfolio-hero-grid h1,
.services-page-hero h1,
.about-page-hero h1,
.engagement-hero h1,
.legal-info-hero h1{color:#fcfffb}
.hero-section .hero-main h1 em{color:#bce3c5}

.hero-section .hero-side>p,
.portfolio-hero .portfolio-hero-grid>p,
.services-page-hero .services-hero-intro,
.services-page-hero .services-hero-detail,
.about-page-hero .about-hero-intro,
.about-page-hero .about-hero-detail,
.engagement-hero .engagement-intro,
.legal-info-hero .legal-info-intro{color:#e0eee3}

.portfolio-hero .portfolio-back,
.services-page-hero .portfolio-back,
.about-page-hero .portfolio-back,
.engagement-hero .portfolio-back,
.legal-info-hero .portfolio-back{color:#dbefdd}
.portfolio-hero .portfolio-back:hover,
.services-page-hero .portfolio-back:hover,
.about-page-hero .portfolio-back:hover,
.engagement-hero .portfolio-back:hover,
.legal-info-hero .portfolio-back:hover{color:#fff}

/* Home controls must stand out independently of the photo. */
.hero-section .hero-side .hero-cta-stack .hero-primary-cta{
  color:#173d29;
  background:#e0f2e0;
  border-color:#e0f2e0;
  box-shadow:0 10px 28px rgba(5,22,15,.18);
}
.hero-section .hero-side .hero-cta-stack .hero-primary-cta:hover{
  background:#f7fff5;
  border-color:#f7fff5;
}
.hero-section .hero-side .hero-cta-stack .hero-secondary-link{
  color:#e6f5e6;
  border-bottom-color:rgba(223,242,225,.66);
}
.hero-section .hero-side .hero-cta-stack .hero-secondary-link:hover{
  color:white;
  border-bottom-color:white;
}
.hero-section .hero-cta-note{color:#cfdfd0!important}
.hero-section .hero-foot{border-top-color:rgba(229,244,231,.40)}
.hero-section .hero-skills span{color:#d1e5d4}

/* About-specific facts stay integrated in the same original layout. */
.about-page-hero .about-facts,
.about-page-hero .about-facts>div+div{border-color:rgba(222,239,224,.34)}
.about-page-hero .about-facts span{color:#c9decd}
.about-page-hero .about-facts strong{color:#f5fff5}

@media(max-width:700px){
  .hero-section,
  .portfolio-hero,
  .services-page-hero,
  .about-page-hero,
  .engagement-hero,
  .legal-info-hero{
    background-image:
      linear-gradient(180deg,
        rgba(10,30,25,.86) 0%,
        rgba(10,34,27,.85) 48%,
        rgba(8,30,24,.91) 100%),
      var(--hero-original-photo);
    background-position:60% center;
  }
  .portfolio-hero{background-position:64% center}
  .services-page-hero{background-position:57% center}
  .about-page-hero,.legal-info-hero{background-position:67% center}
  .engagement-hero{background-position:56% center}
  .request-page .engagement-hero{
    background-image:
      linear-gradient(180deg,rgba(10,30,25,.86),rgba(10,34,27,.85) 48%,rgba(8,30,24,.91)),
      var(--hero-original-photo);
  }
}

/* 09 Nov — persistent Home link and accessible current-page indication.
   Same five navigation choices on desktop/mobile; underline identifies
   the active section instead of a redundant back-to-home arrow. */
.desktop-nav{gap:clamp(13px,2vw,29px)}
.desktop-nav a[aria-current="page"]{
  color:#255d3c;
  font-weight:720;
  text-decoration:underline;
  text-decoration-color:#2d5b40;
  text-decoration-thickness:2px;
  text-underline-offset:8px;
}
.mobile-menu nav a[aria-current="page"]{
  color:#255d3c;
  font-weight:720;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}
.header-contact[aria-current="page"],
.mobile-quote-banner[aria-current="page"]{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
@media(max-width:940px) and (min-width:801px){
  .desktop-nav{gap:12px}
}

/* 09 November — crop adjustments only; hero height and content untouched. */
.request-page .engagement-hero{
  background-position:58% 85%;
}
@media(min-width:1024px){
  .about-page-hero{
    background-size:cover;
    background-position:center 52%;
  }
}
@media(max-width:700px){
  .request-page .engagement-hero{
    background-size:auto 122%;
    background-position:43% 84%;
  }
  .about-page-hero{
    background-size:cover;
    background-position:64% 52%;
  }
}


/* Clear, consistent monthly starting-price line within each case description. */
.portfolio-item-content .portfolio-monthly-price{
  display:block;
  margin-top:12px;
  font-size:clamp(15px,1.2vw,17px);
  font-weight:750;
  color:#285c3e;
  line-height:1.6;
}

/* CREANODE V2 private customer account and administrator inbox. */
.header-account{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;min-width:42px;padding:0;
  border:0;border-radius:0;
  color:var(--green);background:transparent;
  transition:color .15s
}
.header-account:hover{color:var(--green-dark)}
.header-account svg{display:block;width:21px;height:21px}
.header-account.is-signed-in{color:var(--green-dark)}
.header-account:focus-visible{outline-offset:3px}
.lead-account-note{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 23px;padding:14px 17px;background:#edf4ec;border:1px solid #d8e5d9;
  border-radius:5px;font-size:13px;line-height:1.6;color:#385945}
.lead-account-note p{margin:0;flex:1;min-width:190px}
.lead-account-note a{font-weight:760;color:#1d5233;text-decoration:underline;text-underline-offset:3px}
.portal-hero{background:#f3f6f1;border-bottom:1px solid #dfebe0;padding:75px 0 85px}
.portal-hero h1{font-size:clamp(40px,5vw,70px);line-height:1.12;max-width:970px;
  font-weight:620;letter-spacing:-.06em;margin:20px 0 19px}
.portal-hero p:not(.overline){color:#56675b;line-height:1.8;font-size:16px;max-width:730px}
.portal-body{background:#fff;padding:55px 0 120px;min-height:500px}
/* Customer account: no marketing banner. Center authentication only;
   the signed-in workspace remains a full-width dashboard. */
.portal-page[data-portal-mode="client"] .portal-body{
  min-height:calc(100svh - 91px);
}
.portal-page[data-portal-mode="client"] .portal-body:has([data-portal-auth]:not([hidden])){
  display:flex;
  align-items:center;
  padding:48px 0;
}
.portal-page[data-portal-mode="client"] .portal-body:has([data-portal-auth]:not([hidden]))>.container{
  width:min(var(--width),calc(100% - 48px));
}
.portal-page[data-portal-mode="client"] [data-portal-auth]{
  width:min(100%,520px);
  margin-inline:auto;
}
.portal-page[data-portal-mode="client"] .portal-auth-card{max-width:none}
.portal-page[data-portal-mode="client"] [data-portal-auth]>.portal-note{
  max-width:520px;
  margin:18px 0 0;
}
@media(max-width:760px){
  .portal-page[data-portal-mode="client"] .portal-body{min-height:calc(100svh - 116px)}
  .portal-page[data-portal-mode="client"] .portal-body:has([data-portal-auth]:not([hidden])){
    padding:30px 0 40px;
  }
}
.portal-loading{min-height:150px;color:#6d7f71}
.portal-auth-card{max-width:540px;background:#fff;padding:32px;
  border:1px solid #dfe9df;border-radius:9px;box-shadow:0 22px 60px rgba(24,57,32,.07)}
.portal-auth-card>.section-label{margin-bottom:22px}
.portal-auth-card form{display:flex;flex-direction:column;gap:18px}
.portal-auth-card form[hidden]{display:none}
.portal-auth-card form>label,.portal-reply-form>label,.portal-admin-controls label,.portal-status-form label{
  display:flex;flex-direction:column;gap:8px;color:#34523b;font-size:13px;font-weight:690}
.portal-auth-card input:not([type=checkbox]),.portal-reply-form textarea,.portal-admin-controls input,
.portal-admin-controls select,.portal-status-form select{
  background:#fff;border:1px solid #d1ded2;color:#1b3524;border-radius:5px;padding:13px 14px;
  font:inherit;font-size:14px;line-height:1.4;min-height:48px;width:100%;
}
.portal-auth-card input:focus-visible,.portal-reply-form textarea:focus-visible,
.portal-admin-controls :is(input,select):focus-visible,.portal-status-form select:focus-visible{
  outline:2px solid #39835a;outline-offset:2px}
.portal-auth-card small{color:#748377;font-size:12px;font-weight:450}
.portal-auth-card .button{margin-top:4px;align-self:flex-start}
.portal-consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;line-height:1.65}
.portal-consent input{margin-top:5px;accent-color:#2d7048}
.portal-consent a{color:#28663f;text-decoration:underline}
.portal-note{font-size:12px;line-height:1.75;max-width:790px;color:#66796b;margin:22px 0 0}
.portal-error{border-left:3px solid #b34343;color:#9e3030;padding:10px 14px;
  background:#fff3f1;margin:20px 0;font-size:13px;line-height:1.55}
.portal-success{border-left:3px solid #367e4c;color:#246139;padding:10px 14px;
  background:#eef8f0;margin:16px 0;font-size:13px}
.portal-workspace-toolbar{display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:24px;padding-bottom:30px;border-bottom:1px solid #e0e9e1}
.portal-workspace-toolbar strong{display:block;font-size:clamp(23px,2.1vw,31px);
  letter-spacing:-.035em;font-weight:660;margin:12px 0 6px;overflow-wrap:anywhere}
.portal-workspace-toolbar p:not(.section-label){color:#708072;font-size:13px;margin:0}
.portal-toolbar-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.portal-toolbar-actions a,.portal-toolbar-actions button{font:inherit;font-size:12px;cursor:pointer}
.portal-outline-link,.portal-action-link{display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;padding:12px 16px;min-height:42px;font-size:12px;font-weight:690;line-height:1.3}
.portal-outline-link{background:white;color:#2a6140;border:1px solid #bfcfc3}
.portal-action-link{background:#2c6843;color:white;border:1px solid #2c6843}
.portal-action-link:hover{background:#205134}
.portal-outline-link:hover{background:#f0f6f1}
.portal-admin-controls{display:flex;gap:18px;align-items:end;flex-wrap:wrap;padding:25px 0 0}
.portal-admin-controls>label:first-child{width:210px}
.portal-admin-controls>label:last-child{flex:1;min-width:210px}
.portal-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.portal-workspace-grid{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr);
  gap:24px;padding-top:26px;align-items:start}
.portal-list-panel,.portal-detail-panel{border:1px solid #dee9df;border-radius:7px;
  background:#fff;overflow:hidden;min-width:0;min-height:420px}
.portal-workspace-grid .portal-list-panel{
  display:flex;
  flex-direction:column;
  height:clamp(550px,calc(100dvh - 205px),920px);
  min-height:0;
}
.portal-workspace-grid .portal-list-panel>[data-portal-inquiries]{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.portal-workspace-grid .portal-list-panel>.portal-load-more{
  flex:0 0 auto;
  margin:11px auto 15px;
}
.portal-list-panel>h2{font-size:15px;font-weight:690;letter-spacing:-.01em;
  padding:20px 22px;margin:0;border-bottom:1px solid #e5ece5}
.portal-empty,.portal-select-message{padding:32px 24px;font-size:14px;color:#687f6d;
  line-height:1.8;margin:0}
.portal-inquiry{display:flex;flex-direction:column;text-align:left;gap:8px;
  width:100%;padding:20px 22px;background:white;border:none;border-bottom:1px solid #e7eee7;
  border-left:3px solid transparent;color:#1b3926;cursor:pointer}
.portal-inquiry:hover{background:#f7faf7}
.portal-inquiry[aria-pressed=true]{border-left-color:#3b824e;background:#eff6f0}
.portal-inquiry-title{font-size:15px;font-weight:700;line-height:1.35;
  overflow-wrap:anywhere;white-space:normal}
.portal-inquiry-badges{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.portal-inquiry-type{font-size:11px;color:#6a7a6e}
.portal-status{display:inline-flex;padding:4px 10px;border-radius:30px;font-size:11px;
  font-weight:700;background:#eef2ed;color:#4b6854}
.portal-status-new{background:#fef4e6;color:#875a24}
.portal-status-in_progress{background:#ecf3ff;color:#37638b}
.portal-status-replied{background:#e9f6eb;color:#2a7144}
.portal-status-closed{background:#efefef;color:#747474}
.portal-inquiry-meta,.portal-inquiry-email{font-size:11px;color:#7b8c7f;overflow-wrap:anywhere}
.portal-detail-panel{padding:26px}
/* A conversation is a self-contained window: its message history scrolls,
   while request details and the reply composer remain in place. */
.portal-detail-panel.is-conversation{
  display:flex;
  flex-direction:column;
  height:clamp(550px,calc(100dvh - 205px),920px);
  max-height:920px;
  min-height:0;
  padding:0;
}
.portal-detail-panel.is-conversation>.portal-detail-header{
  flex:0 0 auto;
  max-height:36%;
  overflow-y:auto;
  padding:22px 24px 16px;
  border-bottom:1px solid #e3eae3;
}
.portal-detail-panel.is-conversation .portal-detail-fields{
  margin:16px 0 0;
  padding-bottom:0;
  border:0;
}
/* Client conversation: compact two-column identity/status header.
   Project name and reference remain visible; the full history gains room. */
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation>.portal-detail-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  align-items:center;
  column-gap:14px;
  row-gap:2px;
  flex:0 0 auto;
  max-height:135px;
  padding:13px 18px 11px;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation>.portal-detail-header>.section-label{
  grid-column:1;
  grid-row:1;
  margin:0 0 1px;
  font-size:10px;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation>.portal-detail-header>h2{
  grid-column:1;
  grid-row:2;
  margin:0;
  font-size:clamp(18px,1.6vw,23px);
  line-height:1.22;
  min-width:0;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation>.portal-detail-header>.portal-reference{
  grid-column:1;
  grid-row:3;
  margin:2px 0 0;
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation .portal-detail-fields{
  grid-column:2;
  grid-row:1 / span 3;
  align-self:center;
  margin:0;
  padding:0;
  gap:0;
  border:0;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation .portal-field{
  min-width:0;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation .portal-field dt{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation .portal-field dd{
  display:inline-flex;
  padding:6px 11px;
  margin:0;
  border-radius:30px;
  background:#edf5ed;
  color:#245b3a;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
}
.portal-page[data-portal-mode="client"]
.portal-detail-panel.is-conversation>.portal-detail-header>h2{
  overflow-wrap:anywhere;
  max-height:3.7em;
  overflow-y:auto;
}
.portal-detail-panel.is-conversation>.portal-thread{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:19px 22px;
  margin:0;
}
.portal-detail-panel.is-conversation>.portal-thread:focus-visible{
  outline:2px solid #3d8757;
  outline-offset:-3px;
}
.portal-detail-panel.is-conversation>.portal-reply-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  flex:0 0 auto;
  padding:11px 16px 13px;
  gap:12px;
  background:#fff;
  box-shadow:0 -5px 18px rgba(35,75,43,.035);
}
.portal-detail-panel.is-conversation .portal-reply-form>label{
  grid-column:1;
  min-width:0;
  gap:6px;
}
.portal-detail-panel.is-conversation .portal-reply-form textarea{
  height:52px;
  min-height:52px;
  max-height:135px;
  padding:10px 13px;
  resize:vertical;
}
.portal-detail-panel.is-conversation .portal-reply-form>.button{
  grid-column:2;
  min-height:46px;
  margin:0 0 3px;
  white-space:nowrap;
}
.portal-detail-panel.is-conversation>.portal-status-form{
  flex:0 0 auto;
  margin:0 18px 12px;
}
.portal-chat-back{
  display:none;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:49px;
  padding:11px 19px;
  border:0;
  border-bottom:1px solid #e1ece2;
  background:#f7faf7;
  color:#245a37;
  font:inherit;
  font-size:14px;
  font-weight:690;
  cursor:pointer;
}
.portal-chat-back:focus-visible{outline:2px solid #39835a;outline-offset:-3px}
.portal-detail-header h2{font-size:clamp(24px,2.2vw,31px);font-weight:660;
  line-height:1.2;letter-spacing:-.04em;margin:12px 0 8px;overflow-wrap:anywhere}
.portal-reference{font-size:12px;color:#738675}
.portal-detail-fields{display:flex;flex-wrap:wrap;gap:18px 35px;margin:22px 0 0;padding-bottom:20px;
  border-bottom:1px solid #e3eae3}
.portal-field{min-width:110px}
.portal-field dt{font-size:11px;font-weight:680;color:#7a8c7e}
.portal-field dd{font-size:13px;color:#294331;margin:5px 0;overflow-wrap:anywhere}
.portal-thread{display:flex;flex-direction:column;gap:16px;margin:26px 0}
.portal-bubble{border:1px solid #dfe9df;padding:18px;border-radius:6px;
  background:#fafcf9;max-width:96%}
.portal-bubble-admin{margin-left:auto;background:#edf6ef;border-color:#d4e7d8}
.portal-bubble-author{color:#2d5b3c;font-size:12px;font-weight:760;margin-bottom:12px}
.portal-bubble-text{white-space:pre-wrap;overflow-wrap:anywhere;color:#334739;font-size:14px;line-height:1.8;margin:0}
.portal-bubble-time{display:block;margin-top:13px;color:#839386;font-size:11px}
.portal-reply-form{display:flex;flex-direction:column;gap:15px;padding-top:23px;border-top:1px solid #e3eae3}
.portal-reply-form textarea{resize:vertical;line-height:1.7;min-height:110px}
.portal-reply-form .button{align-self:flex-start}
.portal-status-form{display:flex;gap:15px;align-items:flex-end;flex-wrap:wrap;
  background:#f7faf7;border:1px solid #e3ece3;padding:18px;border-radius:5px}
.portal-status-form label{flex:1;min-width:150px}
.portal-status-form button{cursor:pointer}
.portal-guest-warning{font-size:13px;line-height:1.75;color:#725122;
  padding:14px 16px;background:#fff8e9;border-radius:5px}
.portal-guest-warning+.portal-outline-link{text-decoration:none}
@media(max-width:1140px){
  .header-inner{gap:13px}.header-actions{gap:11px}
  .header-account{width:40px;height:40px;min-width:40px}
  .desktop-nav{gap:17px}
}
@media(max-width:760px){
  .portal-hero{padding:55px 0 60px}
  .portal-body{padding:35px 0 70px}
  .portal-workspace-grid{grid-template-columns:minmax(0,1fr)}
  .portal-detail-panel{min-height:250px}
  .portal-workspace-toolbar{flex-direction:column}
  .portal-toolbar-actions{justify-content:flex-start}
  .portal-auth-card{padding:23px 19px}
  .portal-inquiry{padding:17px}
}
@media(max-width:760px){
  .lead-success-account-link{width:100%;text-align:center}
  .portal-page[data-portal-mode="client"] .portal-detail-panel:not(.is-chat-open){
    display:none;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-conversation.is-chat-open{
    position:fixed;
    inset:0;
    z-index:1200;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    min-height:0;
    border:0;
    border-radius:0;
    overflow:hidden;
    background:#fff;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-chat-back{
    display:flex;
    flex:0 0 auto;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-detail-header{
    padding:11px 16px 10px;
    max-height:125px;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-thread{
    padding:16px 17px;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-reply-form{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px 16px max(12px,env(safe-area-inset-bottom));
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-reply-form>label{
    width:100%;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-reply-form>.button{
    align-self:flex-end;
    min-height:39px;
    padding:10px 15px;
    margin:0;
  }
  body.portal-chat-open{overflow:hidden}
}
@media(max-width:380px){
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-detail-header{
    column-gap:7px;
    padding-inline:12px;
  }
  .portal-page[data-portal-mode="client"] .portal-detail-panel.is-chat-open>.portal-detail-header>h2{
    font-size:18px;
  }
}
/* Explicit hidden states: layout display declarations must not reveal private panels. */
[data-portal-auth][hidden],
[data-portal-workspace][hidden],
[data-admin-filters][hidden],
[data-portal-loading][hidden],
[data-portal-admin-link][hidden],
[data-portal-client-link][hidden],
[data-portal-error][hidden],
[data-portal-success][hidden],
[data-portal-auth-error][hidden]{display:none!important}
.portal-stats{display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:17px 0 5px;font-size:12px;color:#526c59;font-weight:690}
.portal-load-more{display:flex;margin:16px auto 20px;cursor:pointer}
[data-portal-load-more][hidden],[data-portal-stats][hidden]{display:none!important}


/* Direct link to the authenticated conversation after form submission. */
.lead-success-account-link{
  display:flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  padding:13px 19px;
  background:#2d5b40;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:690;
  border-radius:4px;
}
.lead-success-account-link:hover,
.lead-success-account-link:focus-visible{
  background:#214b35;
  color:#fff;
}

/* Site V2: unified secure account actions and mailbox-verification states. */
.portal-auth-text-link{
  display:inline-flex;align-items:center;justify-content:flex-start;
  background:transparent;border:0;padding:8px 0;margin-top:12px;
  color:#285b40;font:inherit;font-size:13px;font-weight:660;
  text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.portal-auth-text-link:hover,.portal-auth-text-link:focus-visible{color:#173e2c}
.portal-form-intro{font-size:14px;line-height:1.75;color:#607465;margin:0 0 20px}
.portal-email-confirmation{
  border-left:3px solid #38744d;
  background:#f1f7f0;padding:18px 20px;margin:10px 0 0;
  color:#244a32;font-size:14px;line-height:1.7;
}
.portal-email-confirmation p{margin:0 0 8px}
.portal-email-confirmation .portal-auth-text-link{margin-right:15px}
.portal-token-view{padding:18px 0;font-size:14px;line-height:1.7}
[data-portal-reset-form] h2{font-size:21px;line-height:1.3;margin:0 0 22px}
.portal-auth-card [data-portal-auth-success]{
  background:#f0f7ef;border-left:3px solid #38744d;
  color:#265137;padding:14px 17px;margin:17px 0 0;
  font-size:13px;line-height:1.7;
}
[data-portal-verify-pending][hidden],
[data-portal-verify-view][hidden],
[data-portal-reset-form][hidden],
[data-portal-auth-success][hidden],
[data-auth-form="forgot"][hidden]{display:none!important}

@media(max-width:380px){
  .header-inner{gap:7px}
  .header-actions{gap:6px}
  .header-account{width:38px;height:38px;min-width:38px}
}

/* Sign in first, with a clear invitation to create an account. */
.portal-auth-title{
  margin:0 0 25px;
  color:var(--ink);
  font-size:24px;
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.3;
}
.portal-auth-title[hidden]{display:none!important}
.portal-account-switch{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:11px;
  margin-top:13px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.portal-account-switch p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.portal-account-switch-button{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:11px 17px;
  background:#fff;
  border:1px solid #b8d0ba;
  border-radius:4px;
  color:var(--green);
  font-size:13px;
  font-weight:690;
  transition:background .15s,border-color .15s;
}
.portal-account-switch-button:hover{
  background:#f0f6ef;
  border-color:var(--green);
}

/* Auth forms: explain errors by the field, without permanent password hints.
   Includes accessible inline text and a visible red state on every input. */
.portal-auth-card .portal-field-error{
  display:block;
  color:#b32629;
  font-size:12px;
  font-weight:570;
  line-height:1.5;
  margin:2px 0 0;
}
.portal-auth-card .portal-field-error[hidden]{display:none!important}
.portal-auth-card input[aria-invalid="true"]:not([type="checkbox"]){
  border-color:#ba262b;
  background:#fff7f7;
  box-shadow:0 0 0 1px rgba(186,38,43,.14);
}
.portal-auth-card input[aria-invalid="true"]:not([type="checkbox"]):focus-visible{
  outline:2px solid #ba262b;
  outline-offset:2px;
}
.portal-auth-card .portal-consent.is-invalid{color:#9e2228}
.portal-auth-card .portal-consent input[aria-invalid="true"]{
  accent-color:#ba262b;
  outline:2px solid #ba262b;
  outline-offset:2px;
}
.portal-auth-card .portal-consent+.portal-field-error{
  margin-top:-12px;
}

/* Account passwords: unobtrusive eye control inside each input.
   Shared by sign-in, registration and password reset in all locales. */
.portal-auth-card .portal-password-field{
  display:block;
  position:relative;
  width:100%;
}
.portal-auth-card .portal-password-field>input{
  padding-right:56px;
}
.portal-auth-card .portal-password-toggle{
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#526f5c;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color .15s,background .15s;
}
.portal-auth-card .portal-password-toggle svg{display:block}
.portal-auth-card .portal-password-toggle svg[hidden]{display:none!important}
.portal-auth-card .portal-password-toggle:hover{
  color:#245838;
  background:rgba(40,99,60,.07);
}
.portal-auth-card .portal-password-toggle:focus-visible{
  outline:2px solid #39835a;
  outline-offset:1px;
}

/* Email verification with one autofill-ready input and six independent visual
   digits. Works with paste, mobile keyboard, and one-time-code autofill. */
.portal-code-form{margin:0;width:100%;text-align:center}
.portal-code-header{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:24px}
.portal-code-mark{
  display:grid;place-items:center;width:53px;height:53px;border-radius:14px;
  background:#edf5ec;color:#245c39;font-size:27px;margin-bottom:5px
}
.portal-code-header h3{font-size:clamp(20px,3.5vw,25px);letter-spacing:-.035em;line-height:1.3;margin:0;color:#17251b}
.portal-code-header p{font-size:14px;line-height:1.65;color:#5b7060;margin:0}
.portal-code-header strong{font-weight:700;overflow-wrap:anywhere;color:#214d36}
.portal-code-label{display:block;text-align:left;font-size:13px;font-weight:700;margin-bottom:10px;color:#354b3b}
.portal-code-box{
  position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;width:100%;margin-bottom:10px;cursor:text
}
.portal-code-digit{
  display:grid;place-items:center;aspect-ratio:1/1;min-height:51px;
  background:#fafcf9;border:1.5px solid #cfded0;border-radius:8px;
  color:#1d3c29;font-weight:750;font-size:clamp(20px,4vw,27px);
  font-variant-numeric:tabular-nums;line-height:1
}
.portal-code-box:focus-within .portal-code-digit.is-current{border-color:#2d7a4b;box-shadow:0 0 0 2px rgba(45,122,75,.16)}
.portal-code-digit.is-filled{border-color:#7caa87;background:#f4f9f3}
.portal-code-box.is-invalid .portal-code-digit{border-color:#bd3538;background:#fff6f6}
.portal-code-box input{
  position:absolute;z-index:2;inset:0;width:100%;height:100%;opacity:.01;
  padding:0;border:0;background:transparent;cursor:text;
  font-size:18px;letter-spacing:10px;caret-color:transparent
}
.portal-code-form>.portal-field-error{text-align:left;margin:5px 0}
.portal-code-expiry{font-size:12px;color:#738477;margin:10px 0 24px}
.portal-code-form>.button{width:100%;display:flex;align-items:center;justify-content:center}
.portal-code-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:22px;row-gap:4px;margin:16px 0 0
}
.portal-code-actions .portal-auth-text-link{font-size:12px}
.portal-code-actions .portal-auth-text-link:disabled{color:#87998b;cursor:not-allowed;text-decoration:none}
@media(max-width:380px){
  .portal-code-box{gap:5px}
  .portal-code-digit{min-height:40px;border-radius:6px}
  .portal-code-actions{gap:6px 12px}
}

/* Verified email → account: calm, purposeful success transition. */
.portal-code-form.is-completing{
  opacity:0;
  transform:translateY(-9px);
  transition:opacity 180ms ease, transform 180ms ease;
  pointer-events:none;
}
.portal-verified-transition{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:300px;
  width:100%;
  padding:23px 12px;
  text-align:center;
  color:#244f35;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity 340ms ease, transform 340ms cubic-bezier(.2,.8,.2,1);
}
.portal-verified-transition[hidden]{display:none!important}
.portal-verified-transition.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.portal-verified-icon{
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border-radius:50%;
  margin:0 auto 23px;
  background:#e9f5e9;
  color:#2c794c;
}
.portal-verified-ring{opacity:.35}
.portal-verified-check{
  stroke-dasharray:40;
  stroke-dashoffset:40;
}
.portal-verified-transition.is-visible .portal-verified-check{
  animation:portal-check-draw 470ms 160ms cubic-bezier(.2,.8,.2,1) forwards;
}
.portal-verified-transition h3{
  font-size:clamp(21px,3.5vw,26px);
  letter-spacing:-.035em;
  line-height:1.35;
  font-weight:690;
  color:#172b1e;
  margin:0 0 8px;
}
.portal-verified-transition p{
  font-size:14px;
  line-height:1.7;
  color:#627b69;
  margin:0;
}
.portal-verified-progress{
  display:block;
  width:120px;
  height:3px;
  margin-top:26px;
  border-radius:50px;
  overflow:hidden;
  background:#e2ece3;
}
.portal-verified-progress span{
  display:block;
  width:100%;
  height:100%;
  background:#368454;
  transform-origin:left center;
  transform:scaleX(0);
}
.portal-verified-transition.is-visible .portal-verified-progress span{
  animation:portal-verified-progress 1040ms linear forwards;
}
.portal-workspace-entering{
  animation:portal-workspace-enter 480ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes portal-check-draw{
  from{stroke-dashoffset:40}
  to{stroke-dashoffset:0}
}
@keyframes portal-verified-progress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes portal-workspace-enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .portal-code-form.is-completing,
  .portal-verified-transition,
  .portal-workspace-entering{transition:none;animation:none}
  .portal-verified-transition.is-visible .portal-verified-check,
  .portal-verified-transition.is-visible .portal-verified-progress span{animation:none}
  .portal-verified-check{stroke-dashoffset:0}
  .portal-verified-progress span{transform:scaleX(1)}
}

/* The verification transition is a focused moment: hide obsolete login
   headings and pre-verification notices rather than stacking them. */
[data-portal-auth].is-verification-complete .portal-auth-card>.section-label,
[data-portal-auth].is-verification-complete>.portal-note{
  display:none;
}

/* CREANODE administration: private console with no customer workspace.
   The VPS/Stripe view is a read-only snapshot, gated by the API role. */
.portal-page[data-portal-mode="admin"] .portal-body{
  padding:0;
  min-height:calc(100svh - 90px);
  background:#f6f8f6;
}
.portal-page[data-portal-mode="admin"] .portal-body>.container{
  width:100%;
  max-width:none;
  padding:0;
}
.portal-page[data-portal-mode="admin"] .portal-loading{
  padding:48px;
}
.portal-page[data-portal-mode="admin"] [data-portal-auth]{
  max-width:580px;
  margin:50px auto;
  padding:0 18px;
}
.portal-admin-shell{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  min-height:calc(100svh - 90px);
}
.portal-admin-sidebar{
  position:sticky;
  top:0;
  height:calc(100dvh - 90px);
  min-height:500px;
  align-self:start;
  display:flex;
  flex-direction:column;
  background:#16291f;
  color:#e5eee7;
  padding:27px 15px 20px;
}
.portal-admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 15px 26px;
  font-size:13px;
  font-weight:750;
  letter-spacing:.08em;
}
.portal-admin-brand small{
  display:block;
  font-weight:530;
  font-size:11px;
  letter-spacing:0;
  opacity:.67;
  margin-top:4px;
}
.portal-admin-brand-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:none;
  border:1px solid rgba(173,216,178,.3);
  border-radius:11px;
  color:#fff;
  font-size:20px;
  font-weight:750;
  letter-spacing:-.08em;
}
.portal-admin-brand-mark span{color:#83b98a}
.portal-admin-nav{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.portal-admin-nav button{
  width:100%;
  min-height:48px;
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#bdcdc0;
  padding:11px 14px;
  font:inherit;
  font-size:13px;
  font-weight:620;
  text-align:left;
  cursor:pointer;
}
.portal-admin-nav button svg{
  width:19px;
  height:19px;
  flex:none;
}
.portal-admin-nav button:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
}
.portal-admin-nav button[aria-pressed="true"]{
  background:#294b36;
  border-color:rgba(184,227,193,.18);
  color:#fff;
}
.portal-admin-nav button:focus-visible,
.portal-admin-logout:focus-visible{
  outline:2px solid #93ce9c;
  outline-offset:2px;
}
.portal-admin-sidebar-bottom{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:auto;
  padding:18px 12px 0;
  border-top:1px solid rgba(238,255,240,.13);
}
.portal-admin-sidebar-email{
  font-size:11px;
  opacity:.72;
  overflow-wrap:anywhere;
  line-height:1.6;
}
.portal-admin-logout{
  min-height:40px;
  border:1px solid rgba(220,239,224,.23);
  border-radius:6px;
  background:transparent;
  color:#e2f0e6;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.portal-admin-logout:hover{background:rgba(255,255,255,.07)}
.portal-admin-main{
  min-width:0;
  padding:34px clamp(20px,3vw,46px) 55px;
}
.portal-admin-main>[data-admin-section]>h2,
.portal-admin-section-top h2{
  margin:9px 0 10px;
  font-size:clamp(23px,2.45vw,32px);
  letter-spacing:-.05em;
  line-height:1.17;
  color:#18291e;
}
.portal-admin-muted{
  max-width:690px;
  margin:0 0 28px;
  color:#607268;
  font-size:13px;
  line-height:1.7;
}
.portal-admin-profile-card{
  width:min(100%,710px);
  padding:33px;
  border:1px solid #dce8de;
  border-radius:12px;
  background:#fff;
  box-shadow:0 13px 35px rgba(25,60,33,.03);
}
.portal-admin-avatar{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#e8f2e9;
  color:#376b45;
}
.portal-admin-avatar svg{width:33px;height:33px}
.portal-admin-profile-card h3{
  margin:18px 0 26px;
  font-size:20px;
  font-weight:690;
  overflow-wrap:anywhere;
}
.portal-admin-profile-fields,
.admin-app-facts{margin:0}
.portal-admin-profile-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 22px;
}
.portal-admin-profile-fields>div{
  padding:17px;
  border:1px solid #e7eee8;
  border-radius:8px;
  background:#fbfdfb;
}
.portal-admin-profile-fields dt,
.admin-app-fact dt{
  color:#788a7d;
  font-size:11px;
  font-weight:650;
  margin-bottom:8px;
}
.portal-admin-profile-fields dd,
.admin-app-fact dd{
  margin:0;
  color:#263b2c;
  overflow-wrap:anywhere;
  font-size:13px;
  font-weight:610;
}
.portal-admin-security{
  border-top:1px solid #e3ede5;
  padding-top:20px;
  margin:28px 0 0;
  color:#5b7663;
  font-size:12px;
  line-height:1.65;
}
.portal-admin-inventory-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 14px;
  padding:15px 20px;
  border:1px solid #dceadd;
  background:#eef6ef;
  border-radius:9px;
  color:#345944;
  margin:20px 0 18px;
}
.portal-admin-inventory-summary strong{
  font-size:26px;
  line-height:1;
  font-weight:720;
  color:#244e32;
}
.portal-admin-inventory-summary span{font-size:13px;font-weight:640}
.portal-admin-inventory-summary small{margin-left:auto;font-size:11px;color:#52725b}
.portal-admin-inventory-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px auto;
  gap:10px;
  align-items:center;
}
.portal-admin-inventory-controls input,
.portal-admin-inventory-controls select{
  width:100%;
  min-height:44px;
  border:1px solid #cfe0d0;
  border-radius:6px;
  background:#fff;
  padding:9px 13px;
  font-size:13px;
}
.portal-admin-inventory-controls .portal-outline-link{min-height:44px}
.portal-admin-inventory-note{
  min-height:20px;
  color:#758a7a;
  font-size:11px;
  margin:12px 0 14px;
}
.portal-admin-inventory-layout{
  display:grid;
  grid-template-columns:minmax(360px,1.16fr) minmax(310px,.94fr);
  gap:18px;
  align-items:start;
}
.portal-admin-inventory-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-height:220px;
  max-height:min(74dvh,850px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:2px 5px 9px 0;
}
.admin-app-row{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  min-height:112px;
  text-align:left;
  border:1px solid #dce7df;
  border-radius:9px;
  background:#fff;
  padding:17px 18px;
  color:#223829;
  cursor:pointer;
}
.admin-app-row:hover{border-color:#a9c5ad;box-shadow:0 5px 17px rgba(30,74,40,.045)}
.admin-app-row[aria-pressed="true"]{
  border-color:#74a182;
  box-shadow:inset 3px 0 0 #44845b;
}
.admin-app-row:focus-visible{
  outline:2px solid #418557;
  outline-offset:2px;
}
.admin-app-row-head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
}
.admin-app-row-names{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.admin-app-row-names>strong{
  font-size:14px;
  font-weight:710;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.admin-app-row-names>small{
  font-size:11px;
  color:#738678;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.admin-app-status,
.admin-billing-state{
  flex:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:5px 9px;
  border-radius:30px;
  background:#f0f2f0;
  color:#657366;
  border:1px solid #e2e9e2;
  font-size:10px;
  line-height:1.2;
  font-weight:730;
  white-space:nowrap;
}
.admin-app-status.is-paid,.admin-billing-state.is-paid{
  background:#edf7ed;color:#22653b;border-color:#cae7cd;
}
.admin-app-status.is-unpaid,.admin-billing-state.is-unpaid{
  background:#fff0ef;color:#a13c32;border-color:#f3d2d0;
}
.admin-app-status.is-trial,.admin-billing-state.is-trial{
  background:#f6f3e7;color:#765d21;border-color:#e8ddae;
}
.admin-app-row-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.admin-app-row-metric{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-app-row-metric>small{
  font-size:10px;
  color:#789080;
  line-height:1.35;
}
.admin-app-row-metric>strong{
  font-size:11px;
  font-weight:660;
  color:#385141;
  line-height:1.4;
}
.portal-admin-app-detail{
  position:sticky;
  top:20px;
  max-height:min(74dvh,850px);
  overflow-y:auto;
  min-height:260px;
  border:1px solid #dce7df;
  border-radius:10px;
  background:#fff;
  padding:24px;
  box-shadow:0 12px 30px rgba(25,60,33,.035);
}
.admin-app-detail-title{
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.03em;
  margin:8px 0 10px;
  font-weight:700;
  overflow-wrap:anywhere;
}
.admin-app-environment{
  display:inline-block;
  background:#f1f5f1;
  border-radius:3px;
  padding:5px 9px;
  color:#56715e;
  font-size:11px;
  font-weight:650;
}
.admin-app-detail-block{
  padding-top:22px;
  margin-top:22px;
  border-top:1px solid #e5ece5;
}
.admin-app-detail-block h4{
  font-size:15px;
  font-weight:690;
  margin:0 0 18px;
}
.admin-app-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px 14px;
}
.admin-app-fact{min-width:0}
.admin-app-domains{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  overflow-wrap:anywhere;
}
.admin-app-domains a{font-size:12px;color:#32724a;text-decoration:underline}
.admin-billing-state{margin-bottom:18px}
.admin-app-fineprint{
  margin:21px 0 0;
  color:#768c7b;
  line-height:1.7;
  font-size:11px;
}
.admin-app-empty,
.portal-admin-footnote{
  color:#778b7c;
  font-size:12px;
  line-height:1.7;
}
.portal-admin-footnote{margin:15px 0 0}

.admin-app-list-label{
  margin:15px 0 2px;
  padding:16px 8px 7px;
  border-top:1px solid #dfe9e1;
  color:#496651;
  font-size:12px;
  font-weight:720;
}
.admin-app-list-label small{
  display:block;
  color:#789080;
  font-size:11px;
  font-weight:450;
  line-height:1.6;
  margin-top:5px;
}
.admin-app-row.is-unlinked{
  border-style:dashed;
  background:#fafcf9;
}
.admin-app-endpoints{display:flex;flex-direction:column;gap:9px}
.admin-app-endpoint{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px 15px;
  border:1px solid #e0e9e2;
  background:#fafcfb;
  border-radius:7px;
  overflow-wrap:anywhere;
}
.admin-app-endpoint strong{font-size:13px;color:#2e4635}
.admin-app-endpoint small{font-size:11px;color:#7a8f7f}
.admin-app-endpoint span{font-size:11px;color:#526d59}
.admin-app-endpoint a{font-size:11px;color:#32724a;text-decoration:underline}

.portal-page[data-portal-mode="admin"] [data-admin-section="requests"]>.portal-workspace-toolbar [data-portal-logout]{
  display:none;
}
.portal-page[data-portal-mode="admin"] .portal-workspace-toolbar{margin:0 0 22px}
.portal-page[data-portal-mode="admin"] .portal-workspace-grid{
  grid-template-columns:minmax(260px,.88fr) minmax(0,1.5fr);
}
@media(max-width:1200px){
  .portal-admin-shell{grid-template-columns:210px minmax(0,1fr)}
  .portal-admin-main{padding:30px 24px}
  .portal-admin-inventory-layout{grid-template-columns:minmax(0,1fr)}
  .portal-admin-app-detail{position:relative;top:auto;max-height:none}
}
@media(max-width:760px){
  .portal-admin-shell{display:flex;flex-direction:column}
  .portal-admin-sidebar{
    position:relative;
    top:auto;
    width:100%;
    min-height:0;
    height:auto;
    padding:12px 12px 9px;
  }
  .portal-admin-brand{display:none}
  .portal-admin-nav{
    flex-direction:row;
    justify-content:space-between;
    gap:6px;
    width:100%;
  }
  .portal-admin-nav button{
    min-height:45px;
    flex:1;
    padding:9px 11px;
    justify-content:center;
    font-size:12px;
    gap:6px;
  }
  .portal-admin-nav button svg{width:16px;height:16px}
  .portal-admin-sidebar-bottom{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:2px;
    padding:4px 6px 0;
    border-top:none;
  }
  .portal-admin-sidebar-email{display:none}
  .portal-admin-logout{min-height:33px;padding:5px 12px}
  .portal-admin-main{padding:28px 16px 50px}
  .portal-admin-profile-card{padding:23px 19px}
  .portal-admin-profile-fields{grid-template-columns:1fr}
  .portal-admin-inventory-summary small{margin-left:0;width:100%}
  .portal-admin-inventory-controls{grid-template-columns:1fr 1fr}
  .portal-admin-inventory-controls input{grid-column:1/-1}
  .portal-admin-inventory-list{max-height:52dvh}
  .portal-admin-app-detail{padding:18px}
  .portal-page[data-portal-mode="admin"] .portal-workspace-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:420px){
  .portal-admin-inventory-controls{grid-template-columns:1fr}
  .portal-admin-inventory-controls input{grid-column:auto}
  .portal-admin-nav button{font-size:11px;padding:7px 4px}
  .admin-app-row{padding:14px 12px}
  .admin-app-row-values{gap:5px}
  .admin-app-facts{grid-template-columns:1fr}
}

/* Administrators manage applications; they do not submit customer briefs.
   Hide the marketing request CTA on admin pages and for signed-in admins. */
body.portal-is-admin .header-contact,
body.portal-is-admin .mobile-contact,
body.portal-is-admin .mobile-quote-banner,
body:has(.portal-page[data-portal-mode="admin"]) .header-contact,
body:has(.portal-page[data-portal-mode="admin"]) .mobile-contact,
body:has(.portal-page[data-portal-mode="admin"]) .mobile-quote-banner{
  display:none!important;
}

/* Admin store availability — the central site design system. */
.admin-store-link-list{display:flex;gap:9px;flex-wrap:wrap}
.admin-store-link{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:8px 14px;border:1px solid #d6e4d9;border-radius:7px;color:#2d6741;font-size:12px;font-weight:660;text-decoration:none;background:#f5faf6}
.admin-store-link:hover{border-color:#80ab89;background:#e7f2e9}
.portal-admin-inventory-controls{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:760px){.portal-admin-inventory-controls{grid-template-columns:minmax(0,1fr) auto}.portal-admin-inventory-controls input{grid-column:auto}}
@media(max-width:520px){.portal-admin-inventory-controls{grid-template-columns:minmax(0,1fr)}.portal-admin-inventory-controls input{grid-column:1}}

/* Private financial reporting uses the centralized site design system. */
.admin-stripe-currency{padding:14px 0;border-top:1px solid #e1eae3}
.admin-stripe-currency:first-of-type{border-top:0;padding-top:2px}
.admin-stripe-currency-name{font-size:11px;font-weight:730;letter-spacing:.08em;color:#466b51;margin:0 0 14px}
.admin-stripe-facts{gap:14px 17px}
.admin-stripe-facts .admin-app-fact:nth-last-child(-n+2) dd{font-weight:730;color:#244733}
.admin-stripe-percent{font-size:12px;color:#607b66;margin:14px 0 5px}
.admin-stripe-connect .admin-app-fineprint{margin-top:12px}

/* CREANODE finance console. Reuses the centralized admin palette and controls. */
.admin-finance-controls{display:grid;grid-template-columns:minmax(140px,1fr) minmax(125px,1fr) auto auto;gap:12px;align-items:end;margin:26px 0 8px}
.admin-finance-controls label{display:flex;flex-direction:column;gap:7px;color:#56715e;font-size:11px;font-weight:650}
.admin-finance-controls select{min-height:44px;width:100%;border:1px solid #cfe0d0;background:#fff;color:#2b4231;border-radius:6px;padding:9px 12px;font-size:12px}
.admin-finance-controls select:focus-visible,.admin-finance-controls button:focus-visible{outline:2px solid #418557;outline-offset:2px}
.admin-finance-controls button{min-height:44px;padding:9px 15px;white-space:nowrap}
.admin-finance-currency-block{min-width:0;margin:0 0 25px}
.admin-finance-currency-label{font-size:12px;font-weight:730;color:#497557;margin:7px 0 12px;letter-spacing:.06em}
.admin-finance-kpis-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-finance-kpi{min-width:0;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #dce7df;border-radius:9px;padding:18px 16px}
.admin-finance-kpi.is-primary{background:#eaf4ed;border-color:#bbd9c2}
.admin-finance-kpi-label{color:#718776;font-size:11px;line-height:1.45;font-weight:640}
.admin-finance-kpi-number{font-size:clamp(17px,1.7vw,23px);font-weight:760;line-height:1.27;letter-spacing:-.025em;color:#1c3826;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.admin-finance-kpi.is-primary .admin-finance-kpi-number{color:#1a6637}
.admin-finance-kpi-meta{font-size:10px;line-height:1.5;color:#748976}
.admin-finance-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:16px;margin:2px 0 16px}
.admin-finance-panel{min-width:0;border:1px solid #dce7df;border-radius:10px;background:#fff;padding:24px;margin:0 0 17px}
.admin-finance-panel h3{font-size:17px;line-height:1.3;letter-spacing:-.018em;font-weight:710;color:#253b2b;margin:0 0 20px}
.admin-finance-cols .admin-finance-panel{margin:0}
.admin-finance-chart{min-width:0}
.admin-finance-bars{display:flex;align-items:end;gap:13px;min-height:199px;overflow-x:auto;padding:20px 1px 7px;border-bottom:1px solid #e2ebe3}
.admin-finance-bar-slot{min-width:70px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;height:185px;text-align:center}
.admin-finance-bar{width:min(38px,90%);min-height:4px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#70a985,#307749);transition:height .25s ease}
.admin-finance-bar.is-negative{background:#b66d67}
.admin-finance-bar-value{color:#405846;font-size:10px;font-weight:680;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-finance-bar-month{color:#829587;font-size:10px;white-space:nowrap}
.admin-finance-reconcile{margin:0;display:flex;flex-direction:column;gap:0}
.admin-finance-reconcile-currency{margin:0 0 8px;padding:8px 0;border-bottom:1px solid #e4ebe5;color:#467451;font-size:11px;font-weight:750}
.admin-finance-reconcile-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid #edf1ed}
.admin-finance-reconcile-line dt{font-size:11px;line-height:1.55;color:#6b806f}
.admin-finance-reconcile-line dd{margin:0;white-space:nowrap;font-size:12px;font-weight:720;color:#344c3a;font-variant-numeric:tabular-nums}
.admin-finance-reconcile-line:last-child dd{color:#1d7140}
.admin-finance-table-wrap{overflow-x:auto;max-width:100%}
.admin-finance-table{border-collapse:collapse;width:100%;min-width:650px;text-align:left;font-size:12px}
.admin-finance-table th{padding:13px 12px;background:#f2f7f3;color:#59745f;font-weight:700;font-size:11px;white-space:nowrap}
.admin-finance-table td{padding:15px 12px;border-bottom:1px solid #e8eee9;color:#3e5746;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-finance-table td:first-child{white-space:normal}
.admin-finance-table .admin-finance-app-name{color:#294632;font-weight:700}
.admin-finance-table tr:last-child td{border-bottom:none}
.admin-finance-cash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-finance-cash-grid .admin-finance-kpi{background:#f9fcf9}
.admin-finance-currency-hint{font-size:11px;color:#6d8b73;line-height:1.5}
@media(max-width:1280px){.admin-finance-kpis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-finance-cols{grid-template-columns:1fr}}
@media(max-width:950px){.admin-finance-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-finance-controls button{width:100%}}
@media(max-width:760px){.admin-finance-kpis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-finance-cash-grid{grid-template-columns:1fr}.admin-finance-panel{padding:18px 16px}.portal-admin-nav button{min-width:0}}
@media(max-width:470px){.admin-finance-controls{grid-template-columns:1fr 1fr;gap:9px}.admin-finance-controls label{grid-column:1/-1}.admin-finance-kpis-grid{grid-template-columns:1fr 1fr;gap:8px}.admin-finance-kpi{padding:15px 11px}.admin-finance-kpi-number{font-size:17px}.admin-finance-bar-slot{min-width:64px}.portal-admin-nav button{font-size:10px;padding:7px 3px;gap:4px}}
@media(max-width:355px){.admin-finance-kpis-grid{grid-template-columns:1fr}.portal-admin-nav button{font-size:10px}}

/* No manual refresh controls: financial views update automatically. */
.portal-admin-inventory-controls{grid-template-columns:minmax(0,1fr)}
.admin-finance-controls{grid-template-columns:minmax(170px,1fr) minmax(150px,1fr) auto}
@media(max-width:950px){.admin-finance-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.portal-admin-inventory-controls{grid-template-columns:1fr}}

/* Stripe finance: native month-by-month navigation, no historical option list. */
.admin-finance-month-nav{display:flex;justify-content:center;align-items:center;margin:24px 0 0;padding:18px 22px;border:1px solid #d8e6dc;border-radius:11px;background:#f7faf8;transition:background .18s ease,border-color .18s ease}
.admin-finance-month-nav:not([hidden]){border-color:#bed8c4;background:#eef6f0}
.admin-finance-month-copy{display:flex;flex-direction:column;align-items:center;gap:11px;width:min(100%,490px)}
.admin-finance-month-eyebrow{color:#63846b;font-size:10px;font-weight:730;letter-spacing:.07em;text-transform:uppercase}
.admin-finance-month-controls{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:16px;width:100%;align-items:center}
.admin-finance-month-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c8ddcd;background:#fff;border-radius:9px;color:#367249;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.admin-finance-month-arrow:not(:disabled):hover{background:#dceee1;border-color:#72a77e}
.admin-finance-month-arrow:not(:disabled):active{transform:scale(.96)}
.admin-finance-month-arrow:disabled{opacity:.35;cursor:not-allowed}
.admin-finance-month-arrow:focus-visible{outline:2px solid #367249;outline-offset:3px}
.admin-finance-month-arrow svg{width:22px;height:22px;stroke:currentColor}
.admin-finance-month-current{color:#244b30;font-size:clamp(17px,2.4vw,23px);font-weight:740;letter-spacing:-.02em;text-align:center;line-height:1.35;font-variant-numeric:tabular-nums}
.admin-finance-month-nav[hidden]{display:none!important}
.admin-finance-month-nav+.admin-finance-controls{margin-top:16px}
@media(max-width:520px){.admin-finance-month-nav{padding:16px 12px}.admin-finance-month-controls{grid-template-columns:42px minmax(0,1fr) 42px;gap:9px}.admin-finance-month-arrow{width:42px;height:42px}.admin-finance-month-current{font-size:19px}}

/* Accessible fallback when the root language redirect script is unavailable. */
.locale-redirect-fallback{font:16px Arial,sans-serif;padding:48px;color:#1c3525}

/* Mandatory administrator two-factor authentication — centralized portal style. */
.portal-mfa{display:flex;flex-direction:column;gap:13px;max-width:100%;}
.portal-mfa[hidden],.portal-mfa-setup[hidden],.portal-mfa-recovery[hidden]{display:none!important}
.portal-mfa-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e7f2e9;color:#28663c;font-size:25px}
.portal-mfa h2{margin:0;font-size:clamp(20px,2.4vw,27px);line-height:1.25;letter-spacing:-.02em;color:#213d2c}
.portal-mfa h3{margin:8px 0 3px;font-size:17px;color:#243c2b}
.portal-mfa .portal-form-intro{line-height:1.6}
.portal-mfa-setup,.portal-mfa-recovery{display:flex;flex-direction:column;gap:12px;border:1px solid #d7e5db;border-radius:10px;padding:16px;background:#f7faf8}
.portal-mfa-setup p,.portal-mfa-recovery p{margin:0;font-size:12px;line-height:1.65;color:#637667}
.portal-mfa-secret{font-family:ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all;font-size:15px;letter-spacing:.055em;line-height:1.65;background:#fff;border:1px solid #d1dfd4;padding:12px;border-radius:8px;user-select:all;color:#203b2b}
.portal-mfa form{display:flex;flex-direction:column;gap:12px}
.portal-mfa form label{font-size:12px;font-weight:650;color:#3f6147}
.portal-mfa form input{width:100%;min-height:48px;border-radius:8px;border:1px solid #d1dfd5;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;font-size:18px;color:#1e3829;background:#fff}
.portal-mfa form input:focus-visible{outline:2px solid #4b9462;outline-offset:2px}
.portal-mfa-recovery pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;padding:12px;border-radius:8px;border:1px solid #d1dfd4;background:#fff;color:#243e2e;user-select:all}
.portal-mfa .portal-field-error{margin:0;color:#9b302c}
.portal-mfa .portal-auth-text-link{align-self:flex-start}
@media(max-width:480px){.portal-mfa-setup,.portal-mfa-recovery{padding:12px}.portal-mfa-secret{font-size:13px}.portal-mfa-recovery pre{font-size:12px}}

/* CREANODE SEO service pages: same global palette and spacing as core site. */
.seo-service-page{color:var(--ink,#233b2a)}
.seo-service-hero{padding:clamp(56px,7vw,112px) 0 clamp(45px,5vw,80px);background:var(--surface-soft,#f4f8f2)}
.seo-service-hero .container{max-width:1140px}
.seo-service-hero .section-label{margin-bottom:18px}
.seo-service-hero h1{max-width:910px;font-size:clamp(33px,5.2vw,66px);line-height:1.08;letter-spacing:-.04em;margin:0 0 22px;font-weight:740}
.seo-service-intro{font-size:clamp(15px,1.8vw,19px);color:#4e6756;line-height:1.67;max-width:830px;margin:0 0 29px}
.seo-service-content{padding:clamp(36px,5vw,78px) 0 85px}
.seo-service-content .container{max-width:1040px}
.seo-service-content article{padding:29px 0 34px;border-bottom:1px solid #dce9dc}
.seo-service-content article h2{color:#244430;font-size:clamp(21px,2.8vw,30px);letter-spacing:-.025em;line-height:1.3;margin:0 0 17px}
.seo-service-content article p{color:#526955;line-height:1.8;max-width:860px;margin:0 0 16px;font-size:clamp(14px,1.5vw,16px)}
.seo-service-related{display:flex;flex-direction:column;gap:12px;margin:40px 0 0;padding:26px 30px;background:#f2f8f3;border-radius:12px;border:1px solid #d8e7dc}
.seo-service-related h2{font-size:20px;line-height:1.3;color:#23452d;margin:0 0 4px}
.seo-service-related a,.seo-service-crosslinks a{color:#2c6740;font-weight:660;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.seo-service-crosslinks{padding:42px 0;background:#f4f9f4;border-top:1px solid #dbe8dc;border-bottom:1px solid #dbe8dc}
.seo-service-crosslinks h2{font-size:clamp(21px,2.5vw,28px);color:#294d35;margin:0 0 19px}
.seo-service-crosslinks .container>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.seo-service-crosslinks a{display:flex;align-items:center;min-height:68px;background:white;border:1px solid #d9e7db;border-radius:9px;padding:15px;text-decoration:none;line-height:1.5}
.seo-service-related a:focus-visible,.seo-service-crosslinks a:focus-visible{outline:2px solid #2f7a47;outline-offset:3px}
@media(max-width:750px){.seo-service-crosslinks .container>div{grid-template-columns:1fr}.seo-service-hero{padding:50px 0}.seo-service-related{padding:20px 17px}}