:root{--paper:#f5f0e6;--ink:#101e35;--body:#465263;--blue:#064ec7;--blue-hover:#043d9e;--gold:#8e602b;--line:#d4c8b4;--serif:"DM Serif Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--container:1200px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:3px}
::selection{background:#dfcbae;color:var(--ink)}
img{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(54px,5.4vw,78px);line-height:1.045;letter-spacing:-2.8px}
h2{font-size:clamp(32px,3.3vw,46px);line-height:1.12;letter-spacing:-1.25px;text-wrap:balance}
h3{font-size:23px;line-height:1.25;letter-spacing:-.35px}
.container{width:min(var(--container),calc(100% - 104px));margin-inline:auto}
.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:20px;top:12px;z-index:20;padding:0;background:var(--paper);color:var(--blue);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip-link:focus{clip-path:none;width:auto;height:auto;padding:10px 20px}
.eyebrow{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:2px;line-height:1.4;color:var(--gold)}
.intro{position:relative;isolation:isolate}
.hero-art{position:absolute;inset:0 0 0 auto;width:67%;overflow:hidden;z-index:-1;-webkit-mask-image:linear-gradient(to right,transparent,#000 37%),linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 37%),linear-gradient(to bottom,#000 80%,transparent);mask-composite:intersect}
.hero-art img{height:100%;width:100%;object-fit:cover;object-position:65% center}
.site-header{position:relative;z-index:3;border-bottom:1px solid rgba(109,86,57,.15);background:rgba(245,240,230,.7)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:87px;gap:30px}
.wordmark{font-family:var(--serif);font-size:36px;letter-spacing:-1.4px;line-height:1}
.wordmark-dot{color:var(--gold)}



.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:53px;padding:13px 22px;border:1px solid var(--blue);border-radius:6px;background:var(--blue);color:#fff;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.3;box-shadow:0 2px 3px #173a7610;transition:background .2s,border-color .2s,transform .2s}
.button:hover{background:var(--blue-hover);border-color:var(--blue-hover);transform:translateY(-2px)}
.button .icon{width:21px;height:21px}
.button-small{font-size:12px;min-height:42px;padding:11px 16px;gap:12px}
.button-small .icon{width:17px;height:17px}

.hero{min-height:594px;display:flex;align-items:center;padding-block:70px 77px}
.hero-copy{width:650px;max-width:59%}
.hero-eyebrow{margin-bottom:23px;font-size:10px;letter-spacing:2.2px}
.hero-eyebrow span{padding-inline:7px}
.hero-description{font-size:17px;line-height:1.7;max-width:490px;margin-top:23px;color:#354357;text-wrap:pretty}
.cta-group{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.whatsapp-note{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#39495c;padding-left:4px}
.whatsapp-note .icon{color:#148b43;width:22px;height:22px;stroke-width:1.6}
.hero-footnote{display:flex;align-items:center;gap:16px;font-family:var(--serif);font-size:13px;line-height:1.5;margin-top:32px}
.hero-footnote>span{width:42px;height:1px;background:var(--gold);flex-shrink:0}
.section{padding-block:50px 52px;scroll-margin-top:12px}
.section-marker{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px}
.section-number{display:flex;align-items:center;gap:14px;font-size:11px;line-height:1;color:var(--gold)}
.section-number::after{content:"";height:1px;width:56px;background:var(--gold);opacity:.65}
.section-marker .eyebrow{font-size:10px;letter-spacing:1.9px}
.section-intro{font-size:17px;color:var(--body);line-height:1.65;margin-top:13px;text-wrap:pretty}
.approach{padding-top:23px}
.approach h2{font-size:clamp(30px,3.1vw,42px);letter-spacing:-1.1px}
.approach-intro{font-family:var(--serif);font-size:22px;line-height:1.5;margin-top:9px}
.mobile-break{display:none}
.approach-steps{list-style:none;margin:31px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.approach-steps li{display:flex;gap:17px;padding:0 28px;min-height:95px;border-left:1px solid var(--line)}
.approach-steps li:first-child{border-left:0;padding-left:0}
.approach-steps li:last-child{padding-right:0}
.step-number{font-family:var(--serif);font-size:19px;line-height:1.4;flex-shrink:0}
.approach-steps h3{font-size:20px;letter-spacing:-.3px;margin-bottom:7px}
.approach-steps p{font-size:14px;line-height:1.65;color:var(--body);text-wrap:pretty}
.approach-note{font-size:12px;color:#5e6877;margin-top:25px}
.projects{padding-top:40px}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
.project{display:flex;flex-direction:column;padding:0 35px;border-left:1px solid var(--line)}
.project:first-child{padding-left:0;border-left:0}
.project:last-child{padding-right:0}
.project-brand{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.project-brand img{object-fit:contain;mix-blend-mode:multiply}
.logo-bycommute{width:134px}
.logo-amorcoast{width:61px;height:61px}
.logo-magcoach{width:140px}
.project-category{font-size:10px;line-height:1.6;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:10px;font-weight:500}
.project h3{font-size:28px;line-height:1.14;letter-spacing:-.65px}
.project-description{font-size:14px;line-height:1.7;color:var(--body);margin-top:14px;margin-bottom:21px;max-width:310px;text-wrap:pretty}
.text-link{display:inline-flex;align-items:center;align-self:flex-start;gap:13px;font-size:14px;font-weight:500;color:var(--blue);min-height:33px;line-height:1.5;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.text-link .icon{width:22px;height:22px;transition:transform .2s}
.text-link:hover .icon{transform:translateX(4px)}
.project .text-link{margin-top:auto;align-self:center}
.tools-section{padding-top:52px;padding-bottom:39px}
.marquee-shell{position:relative;padding-right:39px;margin-top:33px}
.marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);padding-block:14px}
.marquee-track{display:flex;width:max-content}
.tool-list{display:flex;align-items:center;gap:48px;flex-shrink:0;list-style:none;padding:0 48px 0 0;margin:0}
.tool{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:18px;font-weight:500;line-height:1.3}
.tool img{flex-shrink:0;object-fit:contain}
.tool-odoo{width:90px;height:36px}
.tool-odoo img{width:90px;height:90px;max-height:none}
.tool img[src$="outlook.svg"]{filter:invert(30%) sepia(98%) saturate(2036%) hue-rotate(183deg) brightness(88%) contrast(105%)}
.marquee.is-ready .marquee-track{animation:tools-scroll 52s linear infinite}
.marquee:hover .marquee-track,.marquee.is-paused .marquee-track{animation-play-state:paused}
.marquee-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--body);cursor:pointer}
.marquee-toggle .icon{width:15px;height:15px}
.marquee-toggle:hover{background:#e9e0d0;color:var(--ink)}
@keyframes tools-scroll{to{transform:translateX(-50%)}}
.videos{padding-top:52px;padding-bottom:78px}
.videos-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.videos h2{font-size:44px}
.videos .section-intro{font-size:16px;max-width:380px}
.videos-channel{border-left:1px solid var(--line);padding:8px 0 8px 46px}
.video-status{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:24px}
.youtube-icon{width:29px;height:21px;color:#e92121}
.videos-channel p{font-size:14px;line-height:1.7;color:var(--body);margin:13px 0 12px}
.contact{position:relative;isolation:isolate;overflow:hidden;min-height:422px;display:flex;flex-direction:column;justify-content:space-between}
.contact::after{content:"";position:absolute;inset:auto 0 0;height:110px;z-index:-1;pointer-events:none;background:linear-gradient(transparent,rgba(10,25,37,.8))}
.contact-art{position:absolute;inset:0;z-index:-1;mask-image:linear-gradient(to bottom,transparent,#000 35%)}
.contact-art img{width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.landscape-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.landscape-toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:0;color:#fff;border:1px solid #ffffff55;border-radius:50%;background:#10223926;cursor:pointer}
.landscape-ready .landscape-toggle{display:inline-flex}
.landscape-toggle:hover{background:#10223970}
.landscape-toggle .icon{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.landscape-canvas,.landscape-ready .landscape-toggle{display:none}}
.contact-inner{display:flex;align-items:center;flex-direction:column;text-align:center;padding-top:20px;padding-bottom:109px;position:relative}
.contact-inner .eyebrow{margin-bottom:15px}
.contact h2{font-size:39px;line-height:1.14;letter-spacing:-.8px}
.contact .cta-group{align-items:center;margin-top:23px;gap:9px}
.contact .whatsapp-note{padding:2px 9px;border-radius:3px;background:rgba(245,240,230,.87)}
.site-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:86px;font-size:12px;color:#fff;text-shadow:0 1px 5px rgba(10,25,37,.5)}
.footer-brand{font-family:var(--serif);font-size:21px;letter-spacing:-.3px}
.footer-brand span{font-size:14px}
.site-footer>a:last-child{display:flex;align-items:center;gap:8px;min-height:44px}
.site-footer>a:last-child:hover{text-decoration:underline}
.site-footer .icon{width:16px;height:16px}
@media(min-width:1600px){.hero-art{width:65%}.hero{min-height:660px}.hero-copy{max-width:60%}}
@media(max-width:1100px){.container{width:calc(100% - 72px)}.hero{min-height:570px}.hero-copy{max-width:64%}h1{font-size:60px;letter-spacing:-2.2px}.hero-description{max-width:435px;font-size:16px}.approach h2{font-size:34px}.approach-steps li{padding-inline:20px;gap:11px}.approach-steps h3{font-size:19px}.project{padding-inline:26px}.project h3{font-size:25px}.project-category{font-size:9px;letter-spacing:.65px}.videos-layout{gap:35px}.videos-channel{padding-left:35px}.videos h2{font-size:40px}}
@media(max-width:800px){.container{width:calc(100% - 48px)}.header-inner{min-height:75px}.wordmark{font-size:32px}.button-small{font-size:11px;padding-inline:12px;gap:8px}.button-small .icon{display:none}.hero{min-height:585px;padding-block:75px}.hero-copy{max-width:72%}h1{font-size:55px;letter-spacing:-1.7px}.hero-art{width:75%;opacity:.8;mask-image:linear-gradient(to right,transparent,#000 65%),linear-gradient(to bottom,#000 78%,transparent);mask-composite:intersect}.hero-description{max-width:395px}.hero-footnote{font-size:12px}.hero-footnote>span{width:26px}.approach h2{font-size:32px}.approach-intro{font-size:20px}.approach-steps{gap:23px}.approach-steps li{padding-inline:0 20px;gap:10px;border-left:0;border-right:1px solid var(--line)}.approach-steps li:last-child{border-right:0;padding-right:0}.approach-steps h3{font-size:18px}.approach-steps p{font-size:13px}.approach-note{max-width:520px}.project{padding-inline:20px}.project h3{font-size:23px}.project-description{font-size:13px}.project-category{font-size:9px;min-height:28px;display:flex;align-items:end}.project-brand{margin-bottom:16px}.logo-bycommute{width:116px}.logo-magcoach{width:119px}.logo-amorcoast{width:55px;height:55px}.videos-layout{grid-template-columns:1fr 1fr;gap:25px}.videos-channel{padding-left:24px}.videos h2{font-size:35px}.videos .section-intro{font-size:15px}.contact h2{font-size:36px}.contact-art img{object-position:58% 66%}.site-footer p{display:none}}
@media(max-width:640px){html{scroll-padding-top:15px}.container{width:calc(100% - 40px)}.site-header{background:rgba(245,240,230,.96)}.header-inner{min-height:73px}.wordmark{font-size:32px}.hero{min-height:0;align-items:flex-start;padding-block:44px 52px}.hero-copy{max-width:100%;width:100%}.hero-eyebrow{font-size:8px;letter-spacing:1.75px;margin-bottom:21px}.hero-eyebrow span{padding-inline:4px}h1{font-size:clamp(41px,10.9vw,62px);line-height:1.05;letter-spacing:-1.5px}.hero-description{font-size:15px;line-height:1.7;max-width:410px;margin-top:19px}.hero .cta-group{margin-top:23px}.button{font-size:14px;min-height:51px;padding:13px 18px;gap:26px}.whatsapp-note{font-size:10px;gap:6px}.hero-footnote{font-size:11px;line-height:1.7;max-width:320px;gap:10px;margin-top:24px}.hero-footnote>span{width:23px}.hero-art{display:none}.hero-art img{object-position:center 65%}.section{padding-block:36px}.section-marker{margin-bottom:18px}.section-marker .eyebrow{font-size:9px;letter-spacing:1.5px}.section-number{font-size:10px;gap:10px}.section-number::after{width:39px}h2{font-size:33px;line-height:1.12;letter-spacing:-.85px;text-wrap:pretty}.approach{padding-top:12px}.approach h2{font-size:32px}.mobile-break{display:block}.approach-intro{font-size:19px;line-height:1.45;margin-top:14px;max-width:360px}.approach-steps{grid-template-columns:1fr;gap:0;margin-top:28px}.approach-steps li,.approach-steps li:first-child,.approach-steps li:last-child{padding:21px 0;border:0;border-top:1px solid var(--line);min-height:0;gap:16px}.approach-steps li:first-child{padding-top:0;border-top:0}.approach-steps li:last-child{padding-bottom:0}.step-number{font-size:19px;width:19px}.approach-steps h3{font-size:21px;margin-bottom:6px}.approach-steps p{font-size:14px;max-width:340px}.approach-note{margin-top:27px;font-size:11px;line-height:1.7;max-width:340px}.project-grid{grid-template-columns:1fr;margin-top:26px;gap:28px}.project,.project:first-child,.project:last-child{padding:27px 0 0;border-left:0;border-top:1px solid var(--line)}.project:first-child{padding-top:0;border-top:0}.project-brand{height:44px;margin-bottom:17px}.logo-bycommute{width:120px}.logo-amorcoast{width:49px;height:49px}.logo-magcoach{width:125px}.project-category{min-height:0;font-size:9px;letter-spacing:.8px;margin-bottom:10px}.project h3{font-size:27px;line-height:1.15}.project h3 br{display:none}.project-description{font-size:14px;max-width:380px;margin-top:12px;margin-bottom:12px}.project .text-link{font-size:13px}.section-intro{font-size:15px;margin-top:13px}.marquee-shell{margin-top:22px;padding-right:32px}.marquee{padding-block:16px}.tool-list{gap:31px;padding-right:31px}.tool{font-size:17px;gap:9px}.tool img{max-height:28px;max-width:28px}.tool-odoo img{max-width:77px;width:77px}.marquee-toggle{width:27px;height:27px}.videos{padding-bottom:30px}.videos-layout{grid-template-columns:1fr;gap:25px}.videos h2{font-size:33px}.videos h2 br{display:none}.videos-channel{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}.video-status{font-size:23px}.videos-channel p{font-size:14px}.contact{margin-top:14px;min-height:429px}.contact-inner{padding-top:22px;padding-bottom:151px}.contact h2{font-size:31px;letter-spacing:-.65px;line-height:1.15}.contact-inner .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:16px}.contact .cta-group{margin-top:23px}.contact-art{top:84px;mask-image:linear-gradient(to bottom,transparent,#000 60%)}.contact-art img{object-position:67% 76%}.site-footer{min-height:82px;gap:10px}.footer-brand{font-size:20px}.footer-brand span{font-size:13px}.site-footer>a:last-child{font-size:11px}}
@media(max-width:640px){.tool-odoo{width:77px;height:32px}.tool-odoo img{width:77px;height:77px;max-height:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.marquee{mask-image:none;overflow:visible}.marquee-track{width:100%}.tool-list{flex-wrap:wrap;gap:24px 30px;padding:0;flex-shrink:1;width:100%}.tool-list[aria-hidden=true]{display:none}.marquee-shell{padding-right:0}.marquee-toggle{display:none}}

@media(max-width:640px){.header-inner{gap:12px}.header-contact{font-size:11px;min-height:42px;padding:10px 12px;gap:0;white-space:nowrap}.header-contact .icon{display:none}}
@media(max-width:380px){.header-inner .wordmark{font-size:28px}.header-contact{padding-inline:10px}}

/* Comfortable tablet columns and touch targets. */
@media(max-width:800px){
  .approach-steps{grid-template-columns:1fr;gap:0}
  .approach-steps li,.approach-steps li:first-child,.approach-steps li:last-child{border:0;border-top:1px solid var(--line);padding:20px 0;min-height:0;gap:16px}
  .approach-steps li:first-child{border-top:0;padding-top:0}
  .approach-steps li:last-child{padding-bottom:0}
  .approach-steps h3{font-size:21px}
  .approach-steps p{font-size:16px}
  .project-grid{grid-template-columns:1fr;gap:32px}
  .project,.project:first-child,.project:last-child{padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}
  .project:first-child{padding-top:0;border-top:0}
  .project-description{max-width:560px;font-size:16px}
  .project h3 br{display:none}
  .project-category{min-height:0;font-size:11px}
  .text-link{min-height:44px}
  .marquee-toggle,.landscape-toggle{width:44px;height:44px}
  .marquee-shell{padding-right:52px}
  .videos-channel p{font-size:16px}
}
@media(max-width:640px){
  h1{font-size:clamp(38px,10.5vw,56px);letter-spacing:-1.2px}
  .hero-description,.section-intro{font-size:16px}
  .approach{padding-top:16px}
  .approach h2,h2,.videos h2{font-size:clamp(29px,7.8vw,34px)}
  .approach-note{font-size:13px}
  .whatsapp-note{font-size:12px}
  .project-description{max-width:none}
  .project .text-link{font-size:14px}
  .tool-list{gap:28px;padding-right:28px}
  .contact h2{font-size:clamp(27px,7.5vw,33px)}
  .contact-inner{padding-bottom:125px}
  .site-footer{gap:12px;flex-wrap:wrap}
  .footer-brand{font-size:19px}
}