:root{--paper:#f9f4ec;--ink:#1e1b19;--pink:#ffabd2;--hot:#ff80bb;--cream:#fffaf1;--shadow:0 15px 48px rgba(40,25,30,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:78px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Assistant','Heebo',Arial,sans-serif;overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%}::selection{background:var(--pink);color:#111}.skip-link{position:absolute;top:-100px;right:12px;z-index:100;background:#fff;padding:10px}.skip-link:focus{top:12px}
.site-header{height:90px;position:absolute;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;direction:ltr;padding:12px clamp(26px,7vw,140px);transition:background .2s}.site-header.scrolled{position:fixed;background:rgba(250,246,239,.93);box-shadow:0 4px 22px #20151b12;backdrop-filter:blur(14px)}.brand{display:flex;flex-direction:column;align-items:center;line-height:1;direction:ltr;min-width:80px}.brand-monogram{font-family:Georgia,serif;font-size:36px;letter-spacing:-12px;padding-right:12px;font-weight:400}.brand-monogram span{position:relative;top:12px}.brand-caption{direction:rtl;font-family:Heebo,sans-serif;font-size:13px;font-weight:800;margin-top:9px}.desktop-nav{display:flex;align-items:center;gap:7px;direction:rtl;font-size:clamp(11px,.9vw,15px);font-weight:800}.desktop-nav a{padding:9px 14px;border-radius:999px;white-space:nowrap;transition:background .2s,transform .2s}.desktop-nav a:hover{background:#fbd5e5;transform:translateY(-2px)}.desktop-nav .is-current{background:var(--pink)}.menu-toggle,.mobile-nav{display:none}
.hero{position:relative;min-height:660px;aspect-ratio:1600/847;isolation:isolate;overflow:hidden;background:var(--paper)}.hero-background,.art-background{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}.hero-background img,.art-background img,.art-background.desktop-art{display:block;width:100%;height:100%;object-fit:fill}.hero-content{position:absolute;top:28.6%;left:13%;width:40%;text-align:center;direction:rtl}.handwriting{font-size:clamp(18px,1.6vw,30px);font-weight:700;font-style:italic;margin:0 0 10px;transform:rotate(-7deg);text-align:right;padding-right:16%}.marker-title{font-family:'Permanent Marker','Arial Black',cursive;font-weight:400;line-height:1.1;font-size:clamp(30px,3.4vw,74px);white-space:nowrap;letter-spacing:-.02em;direction:ltr;margin:0 auto 16px;text-align:center;transform:rotate(-2deg)}.marker-title span{display:block}.marker-title span+span{margin-top:10px}.hero-tagline{font-size:clamp(12px,1.14vw,19px);font-weight:900;margin:0 0 5px}.hero-story{font-size:clamp(11px,1.0vw,16px);font-weight:600;line-height:1.32;margin:0 auto;max-width:680px}.hero-cta{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;background:#1f1f1e;color:white;font-weight:900;font-size:clamp(14px,1.3vw,20px);margin-top:22px;padding:12px 28px;min-height:46px;transition:transform .2s,box-shadow .2s}.hero-cta:hover,.pill-button:hover{transform:translateY(-3px);box-shadow:0 9px 18px #0002}.hero-scribble{display:none}
.art-section{position:relative;isolation:isolate;overflow:hidden}.services{min-height:650px;aspect-ratio:1600/898}.services-inner{padding:6.7% 8% 4%;height:100%;display:flex;flex-direction:column;align-items:center}.paint-heading{font-size:clamp(27px,3.3vw,56px);line-height:1.15;font-weight:900;text-align:center;margin:0;text-wrap:balance;transform:rotate(-1deg)}.service-grid{margin-top:auto;margin-bottom:7.5%;width:min(94%,1380px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.service-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:205px;padding:20px 14px 15px;background:rgba(255,250,244,.92);border:1px solid rgba(95,55,55,.07);border-radius:8px;box-shadow:0 8px 30px #3e22201a;transition:transform .22s,box-shadow .22s}.service-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:var(--shadow)}.service-number{font:700 11px 'Permanent Marker',cursive;color:#b5668b}.service-card h3{font-size:clamp(17px,1.4vw,24px);line-height:1.1;margin:9px 0}.service-card p{font-size:clamp(12px,1vw,17px);line-height:1.4;flex:1;margin:2px 0 13px}.discover{font-weight:900;border-bottom:2px solid var(--hot);padding:3px 8px;font-size:14px}
.brands{min-height:530px;aspect-ratio:1600/927}.brands-inner{height:100%;display:flex;align-items:center;flex-direction:column;padding:11% 8% 5%}.brand-list{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;margin-top:4.7%;width:min(86%,1180px);direction:ltr}.brand-list span{display:grid;place-items:center;text-align:center;min-height:92px;padding:10px 6px;background:rgba(255,251,246,.91);box-shadow:0 5px 13px #0000000b;border-radius:12px;font:900 clamp(14px,1.4vw,25px) 'Heebo',Arial,sans-serif;letter-spacing:-.03em}
.portfolio{padding:110px min(7vw,110px) 115px;background:linear-gradient(180deg,#fffaf2,#fce4ed 60%,#fff9ef);scroll-margin-top:74px}.portfolio-intro{text-align:center;margin:0 auto 42px}.eyebrow{font:400 15px 'Permanent Marker',cursive;letter-spacing:2px;color:#b46a86;direction:ltr}.portfolio-intro h2{font-size:clamp(37px,4.3vw,65px);font-weight:900;margin:5px 0 7px}.portfolio-intro>p:last-child{font-size:18px;margin:0}.portfolio-tabs{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:42px}.portfolio-tab{border:1px solid #242424;border-radius:100px;padding:12px 26px;background:transparent;font-weight:900;transition:background .15s,transform .15s}.portfolio-tab:hover{transform:translateY(-2px)}.portfolio-tab.active{background:#1b1b1b;color:white}.portfolio-panel{max-width:1280px;margin:auto}.work-heading{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 32px}.work-heading h3{font-size:clamp(24px,3vw,42px);margin:0;font-weight:900}.ink-star{font-size:40px;color:#ec74a3}.work-count{direction:ltr;font:14px 'Permanent Marker',cursive;color:#b36788}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}.project-card{min-width:0;padding:10px 10px 0;background:#fffaf2;border:1px solid #e7d9d4;box-shadow:0 8px 20px #201e1c12;position:relative;transform:rotate(var(--tilt,0deg));transition:transform .2s,box-shadow .2s}.project-card:nth-child(5n+1){--tilt:-1.1deg}.project-card:nth-child(5n+4){--tilt:1deg}.project-card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 18px 28px #201e1c1e}.project-card img,.project-placeholder{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#eaded9}.project-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c47b9b;background:linear-gradient(135deg,#f8e6e1,#f3b8d0 55%,#fff0e5)}.project-placeholder span{font-size:64px;line-height:1}.project-placeholder strong{font:400 35px 'Permanent Marker',cursive;opacity:.55}.project-label{min-height:74px;display:grid;place-items:center;text-align:center;padding:12px 8px;font-weight:800;font-size:clamp(13px,1.1vw,17px);line-height:1.25;overflow-wrap:anywhere}
.consulting{min-height:650px;aspect-ratio:1600/900}.consulting-inner{position:relative;height:100%;padding:8% 10%;direction:rtl}.consulting-inner .eyebrow{position:absolute;right:10%;top:13%}.consulting h2{position:absolute;top:13%;left:25%;right:25%;font-weight:900;font-size:clamp(28px,3.6vw,58px);line-height:1.17;text-align:center;margin:0;transform:rotate(-1deg)}.consulting-copy{position:absolute;left:29%;top:65%;width:44%;background:#fffaf0d9;border-radius:8px;padding:8px 15px;text-align:center;font-size:clamp(12px,1.05vw,17px);line-height:1.3;font-weight:600}.consulting-copy p{margin:5px 0}.consulting-lead{font-weight:900;font-size:clamp(15px,1.45vw,23px)}.pill-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#1e1e1e;color:white;border-radius:99px;padding:11px 23px;font-weight:900;margin-top:15px;transition:transform .2s,box-shadow .2s}
.contact{min-height:490px;aspect-ratio:1600/900}.contact-inner{position:absolute;top:21%;left:32%;width:40%;text-align:center}.contact-inner h2{font-size:clamp(39px,4vw,70px);margin:5px 0;font-weight:900}.contact-inner>p:not(.eyebrow){font-size:clamp(15px,1.4vw,22px);font-weight:800;margin:0 auto 20px}.contact-links{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;direction:ltr}.contact-links a{background:var(--cream);font:700 15px 'Heebo',sans-serif;padding:13px 22px;border-radius:100px;box-shadow:0 5px 14px #0001;transition:transform .2s}.contact-links a:hover{transform:translateY(-4px)}.site-footer{padding:29px 7%;display:flex;align-items:center;justify-content:space-between;gap:15px;font-weight:700;background:#1d1b1b;color:#fff5ed}.site-footer .footer-home{font:38px Georgia,serif;direction:ltr}.footer-home span{color:var(--hot)}.site-footer a:last-child{font-size:14px}
@media (max-width:1140px) and (min-width:721px){.site-header{padding:8px 3%;height:76px}.desktop-nav a{padding:8px 9px}.hero-content{left:12%;width:43%;top:27%}.hero-story{line-height:1.22}.hero-cta{margin-top:10px}.service-grid{width:100%;margin-bottom:5%}.service-card{min-height:165px;padding:12px 8px}.brands-inner{padding-top:9%}.brand-list{gap:10px;width:87%;margin-top:4%}.brand-list span{min-height:67px}.consulting-copy{top:62%}}
@media (max-width:720px){
html{scroll-padding-top:68px}.site-header{height:72px;padding:8px 20px;position:absolute;align-items:flex-start;direction:rtl}.site-header.scrolled{height:65px;align-items:center}.brand{position:absolute;left:50%;transform:translateX(-50%);top:7px}.site-header.scrolled .brand{top:3px}.brand-monogram{font-size:28px;letter-spacing:-9px;padding-right:9px}.brand-monogram span{top:8px}.brand-caption{font-size:10px;margin-top:7px}.desktop-nav{display:none}.menu-toggle{display:flex;position:absolute;right:19px;top:14px;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;z-index:33}.menu-toggle span{display:block;width:26px;height:2.5px;background:#222;border-radius:10px;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}.mobile-nav:not([hidden]){display:flex;position:fixed;top:65px;right:0;left:0;max-height:calc(100dvh - 65px);overflow-y:auto;background:rgba(255,249,241,.98);backdrop-filter:blur(12px);padding:22px 28px 40px;box-shadow:0 16px 23px #2a1b1b24;flex-direction:column;gap:3px;z-index:31;text-align:right}.mobile-nav a{font-size:18px;font-weight:800;padding:10px 13px;border-bottom:1px solid #f3d9e4}.mobile-nav a:hover{background:#ffe0ef}.menu-open{overflow:hidden}
.hero{aspect-ratio:449/800;min-height:705px;max-height:920px}.hero-background img{object-fit:fill}.hero-content{top:18%;left:4%;width:92%}.handwriting{font-size:17px;padding-right:6%;margin:0 0 6px}.marker-title{font-size:clamp(30px,8.25vw,47px);line-height:1.13;margin-bottom:12px}.marker-title span+span{margin-top:5px}.hero-tagline{font-size:clamp(12px,3.4vw,16px);line-height:1.25;margin-top:17px}.hero-story{font-size:clamp(10px,2.65vw,14px);line-height:1.24;max-width:365px;margin-top:4px}.hero-cta{font-size:14px;padding:10px 18px;min-height:38px;margin-top:12px}
.services{aspect-ratio:auto;min-height:1000px;background:#f8f2e9}.services .art-background{height:760px;top:0}.services .art-background img{object-fit:fill}.services-inner{padding:47px 15px 50px}.paint-heading{font-size:clamp(25px,6.6vw,38px);line-height:1.2}.service-grid{display:grid;grid-template-columns:1fr;width:min(100%,460px);gap:15px;margin:34px auto 0;padding:0 5px}.service-card{width:64%;margin-right:auto;min-height:156px;padding:13px 14px;background:#fffaf2e9;box-shadow:0 8px 20px #40202b1a}.service-card:nth-child(2n){margin-right:0;margin-left:auto}.service-card h3{font-size:19px;margin:4px 0}.service-card p{font-size:13px;line-height:1.3;margin:4px 0}.service-number{font-size:10px}.discover{font-size:13px}
.brands{aspect-ratio:auto;min-height:720px}.brands .art-background{height:100%;background:#f7e9e3}.brands .art-background img{object-fit:fill}.brands-inner{padding:60px 20px 70px}.brands-inner .paint-heading{max-width:250px;margin:0 auto 24px;font-size:29px}.brand-list{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:440px;margin-top:20px}.brand-list span{min-height:72px;padding:6px 2px;font-size:clamp(12px,3.2vw,17px)}
.portfolio{padding:75px 15px 85px}.portfolio-intro{margin-bottom:28px}.portfolio-intro h2{font-size:36px}.portfolio-intro>p:last-child{font-size:15px}.portfolio-tabs{gap:6px;margin-bottom:30px}.portfolio-tab{padding:9px 12px;font-size:12px}.work-heading{gap:8px;margin-bottom:24px;flex-wrap:wrap}.work-heading h3{font-size:26px}.ink-star{font-size:22px}.work-count{font-size:10px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.project-card{padding:6px 6px 0}.project-label{min-height:66px;padding:8px 4px;font-size:12px}
.consulting{aspect-ratio:auto;min-height:740px;background:#fff1f3}.consulting .art-background{height:52%;object-fit:cover;object-position:top}.consulting-inner{padding:40px 20px;height:auto;min-height:740px}.consulting-inner .eyebrow{position:static;text-align:center}.consulting h2{position:static;font-size:38px;margin:12px auto 0;max-width:340px}.consulting-copy{position:relative;top:auto;left:auto;width:100%;max-width:470px;margin:290px auto 0;padding:22px 18px;background:#fffaf2e8;border:1px solid #f9d6df;box-shadow:var(--shadow);font-size:15px;line-height:1.43}.consulting-copy p{margin:10px 0}.consulting-lead{font-size:18px}
.contact{min-height:620px;aspect-ratio:auto;background:#f9a8cc}.contact .art-background{height:100%;object-fit:cover;object-position:30% center;opacity:.78}.contact-inner{position:relative;top:auto;left:auto;width:auto;padding:110px 24px 70px;max-width:500px;margin:auto}.contact-inner h2{font-size:50px}.contact-inner>p:not(.eyebrow){font-size:18px}.contact-links{flex-direction:column;max-width:220px;margin:auto}.site-footer{padding:22px 18px;flex-wrap:wrap;gap:10px;font-size:12px}.site-footer .footer-home{font-size:28px}
}
@media (max-width:370px){.hero{min-height:680px}.hero-content{top:18.5%}.marker-title{font-size:29px}.hero-tagline{font-size:12px}.hero-story{font-size:10px}.hero-cta{margin-top:8px}.service-card{width:66%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Final responsive refinements: keep Canva's artwork without exposing its mock text bars. */
@media (min-width:721px){
  .hero,.services,.brands,.consulting,.contact{width:100%;aspect-ratio:auto}
  .hero{height:max(660px,52.9375vw)}
  .services{height:max(650px,56.125vw)}
  .brands{height:max(530px,57.9375vw)}
  .consulting{height:max(650px,56.25vw)}
  .contact{height:max(490px,56.25vw)}
  .site-header{background:rgba(249,244,236,.97)}
  .hero-story{position:relative;z-index:2;background:#f9f4ec;padding:9px 12px;border-radius:12px;box-shadow:0 0 0 10px #f9f4ecb8}
  .hero-content::before{content:"";position:absolute;z-index:-1;left:-2%;right:-8%;top:59%;bottom:-12%;background:#f9f4ec;clip-path:polygon(0% 5%,8% 2%,17% 4%,26% 1%,36% 4%,46% 1%,55% 3%,66% 1%,76% 3%,86% 0%,97% 3%,100% 8%,98% 94%,88% 97%,75% 95%,63% 99%,51% 96%,40% 99%,27% 96%,15% 98%,3% 96%,0% 92%)}
  .hero-cta{margin-top:60px;width:250px;min-height:56px;position:relative}
}
@media (min-width:721px) and (max-width:1140px){.hero-cta{margin-top:34px;min-height:45px}.hero-content::before{bottom:-16%}}
@media (max-width:720px){
  .hero{width:100%;height:clamp(705px,178.17vw,920px);min-height:0;max-height:none;aspect-ratio:auto}
  .services .service-card,.services .service-card:nth-child(2n){width:54%;margin:0 0 0 auto;background:#faf4edeF}
  .services .service-grid{gap:15px}
}
@media (max-width:370px){.services .service-card,.services .service-card:nth-child(2n){width:57%}}

/* Real video portfolio: the cover and title share one responsive card. */
.project-card.has-video{display:block;text-align:center;color:var(--ink);font:inherit;cursor:pointer;overflow:hidden;width:100%}
.project-preview{display:block;position:relative;overflow:hidden;background:#f4e4ed}
.project-preview img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .25s}
.project-card:hover .project-preview img,.project-card:focus-visible .project-preview img{transform:scale(1.045)}
.play-icon{display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;background:#fffef4e9;border:2px solid #fef7ea;border-radius:50%;box-shadow:0 5px 20px #0003;color:#181818;font-size:23px;padding-left:5px;direction:ltr;transition:background .2s,scale .2s}
.project-card:hover .play-icon{background:#ffafd2;scale:1.08}
.project-card:focus-visible{outline:3px solid #e653a0;outline-offset:5px;transform:rotate(0)}
.work-dialog{border:0;background:#fff8f0;color:var(--ink);border-radius:18px;box-shadow:0 18px 60px #16091070;padding:20px;width:min(92vw,790px);max-height:92dvh;overflow:auto}
.work-dialog::backdrop{background:rgba(19,14,16,.83);backdrop-filter:blur(4px)}
.work-dialog-inner{display:flex;flex-direction:column;gap:15px;align-items:center;position:relative}
.work-dialog h2{font-size:clamp(19px,2.4vw,31px);line-height:1.2;font-weight:900;text-align:center;margin:4px 38px 0}
.work-dialog-close{position:absolute;top:-10px;left:-5px;width:43px;height:43px;display:grid;place-items:center;border:0;border-radius:50%;background:#ffafd2;font-size:28px;line-height:1;z-index:1}
.work-dialog video{display:block;max-width:100%;max-height:70dvh;background:#141414;border-radius:9px;object-fit:contain}
.video-hint{font-size:12px;margin:0;color:#66585e}
@media(max-width:720px){.play-icon{width:48px;height:48px;font-size:18px}.work-dialog{padding:14px;width:94vw}.work-dialog h2{margin:8px 40px 0}.work-dialog video{max-height:73dvh}}

.brand-logos,.consulting-note{display:none}

/* Canva's brand collage has a fixed grid; match the actual boxes rather than
   adding a second grid at an unrelated vertical position. */
.brands-inner{padding:0;position:relative}
.brands-inner .paint-heading{position:absolute;top:30%;left:12%;right:12%;margin:0}
.brands .brand-list{position:absolute;top:49.9%;left:8.1%;width:83.8%;margin:0;gap:15px;grid-template-columns:repeat(6,minmax(0,1fr))}
.brands .brand-list span{height:124px;min-height:0;background:transparent;box-shadow:none;border-radius:8px}

/* The illustrations in the contact collage already contain three round icons.
   Native links sit directly on the artwork, without duplicating the icons. */
@media(min-width:721px){
  .contact-links{gap:65px;margin-top:85px}
  .contact-links a{display:grid;place-items:center;width:90px;height:90px;padding:0;background:transparent;box-shadow:none;color:transparent;font-size:0;line-height:0}
  .contact-links a span{display:none}
  .contact-links a:focus-visible{outline:3px solid #1b1b1b;outline-offset:5px}
  .contact-links a:hover{background:#ffffff52}
}
@media(max-width:720px){
  .brands-inner{position:absolute;inset:0;height:auto;padding:0}
  .brands-inner .paint-heading{top:16.7%;left:17%;right:17%;max-width:none;font-size:clamp(24px,6.6vw,31px);margin:0}
  .brands .brand-list{top:32.5%;left:10%;width:80%;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .brands .brand-list span{height:99px;min-height:0;font-size:clamp(12px,3vw,16px)}
  .contact-links{margin-top:20px}
  .contact-links a{color:var(--ink);font-size:15px;line-height:1.4;width:100%;height:auto;min-height:48px;padding:13px 20px;background:var(--cream);box-shadow:0 5px 14px #0001}
  .contact-links a span{display:inline}
}

/* Mobile artwork is composed on the same 449 x 799 canvas as Canva.
   Text and tap targets use proportional positions so they remain aligned. */
@media(max-width:720px){
  .hero,.services,.brands,.consulting,.contact{
    width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:449/799;
  }
  .hero-background img,.services .art-background img,.brands .art-background img,
  .consulting .art-background img,.contact .art-background img{object-fit:fill;width:100%;height:100%}

  /* Each headline line stays on its own pink brush stroke. */
  .hero-content{position:absolute;inset:0;width:100%;text-align:center}
  .hero .hello{position:absolute;top:15.6%;right:9%;width:28%;padding:0;margin:0;font-size:clamp(13px,3.7vw,19px);text-align:center}
  .hero .marker-title{position:absolute;top:19.1%;left:0;width:100%;height:20%;margin:0;transform:rotate(-2deg);font-size:clamp(27px,7.2vw,39px);line-height:1}
  .hero .marker-title span{position:absolute;left:0;width:100%;white-space:nowrap}
  .hero .marker-title span:first-child{top:4%}
  .hero .marker-title span+span{top:53%;margin:0;font-size:.97em}
  .hero-tagline{position:absolute;top:40%;left:6%;width:88%;margin:0;font-size:clamp(12px,3.05vw,16px);line-height:1.25}
  .hero-story{position:absolute;top:44%;left:7%;width:86%;max-width:none;margin:0;font-size:clamp(10.5px,2.6vw,13px);line-height:1.29;font-weight:600}
  .hero-cta{position:absolute;top:60.7%;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;padding:8px 20px;min-height:36px;font-size:clamp(12px,3.4vw,15px)}
  .hero-cta:hover{transform:translateX(-50%) translateY(-2px)}

  /* Replace the off-center white cards with Canva's original two-column layout. */
  .services .art-background{top:0;height:100%}
  .services-inner{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block}
  .services-inner .paint-heading{position:absolute;top:6.3%;left:3%;width:94%;font-size:clamp(20px,5.4vw,29px);line-height:1.1;white-space:nowrap;transform:none}
  .services .service-grid{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0}
  .services .service-card,.services .service-card:nth-child(2n){position:absolute;left:0;right:0;width:100%;height:18%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;display:block;text-align:center}
  .services .service-card:nth-child(1){top:17.4%}
  .services .service-card:nth-child(2){top:36.4%}
  .services .service-card:nth-child(3){top:55.2%}
  .services .service-card:nth-child(4){top:74%}
  .services .service-number{display:none}
  .services .service-card h3{position:absolute;top:65%;left:7%;width:34%;margin:0;font-size:clamp(11px,2.95vw,15px);line-height:1.08;white-space:nowrap;letter-spacing:-.02em;font-weight:900;transform:rotate(-3deg)}
  .services .service-card p{position:absolute;top:10%;right:10%;width:43%;margin:0;font-size:clamp(10px,2.55vw,12px);line-height:1.23;max-height:64%;font-weight:600;overflow:visible}
  .services .discover{position:absolute;top:64%;right:21%;border:0;padding:2px 5px;font-size:clamp(10px,2.55vw,12px);white-space:nowrap;text-decoration:underline;text-decoration-color:#cb89a8;text-underline-offset:3px}
  .services .service-card:hover{transform:none;box-shadow:none}
  .services .service-card:focus-visible{outline:2px solid #e63f94;outline-offset:-3px}

  /* The boxes are part of the artwork - show the original client logos. */
  .brands .brand-list{display:none}
  .brands .brand-logos{position:absolute;top:32.5%;left:10%;width:80%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,1fr);gap:1.15vw;direction:ltr;height:56.2%;align-items:center;justify-items:center}
  .brand-logos img{display:block;width:100%;height:100%;padding:9%;object-fit:contain;min-width:0;min-height:0}
  .brands-inner .paint-heading{top:17.5%;font-size:clamp(23px,6vw,30px);line-height:1.2}

  /* Use the real mobile consulting illustration and its white writing area. */
  .consulting .art-background,.contact .art-background{inset:0;height:100%;opacity:1}
  .consulting-inner{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0}
  .consulting-inner .eyebrow{display:none}
  .consulting h2{position:absolute;top:8.2%;left:8%;right:auto;width:68%;max-width:none;margin:0;font-size:clamp(20px,5.7vw,29px);line-height:1.05;white-space:nowrap;transform:rotate(-3deg)}
  .consulting h2 br{display:none}
  .consulting-copy{position:absolute;top:19%;left:7%;width:60%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:clamp(11.5px,3vw,14px);line-height:1.32;font-weight:600;text-align:center}
  .consulting-copy p{margin:0 0 15px}
  .consulting-copy p:nth-child(3){margin-top:22px}
  .consulting-copy p:nth-child(4){margin-top:35px}
  .consulting-copy .consulting-lead{display:none}
  .consulting-copy .pill-button{display:inline-flex;margin-top:18px;padding:9px 15px;font-size:clamp(11px,2.8vw,14px);white-space:nowrap}
  .consulting-note{display:block;position:absolute;top:55%;right:2%;width:23%;font-size:clamp(9px,2.5vw,12px);line-height:1.2;font-weight:800;text-align:center;transform:rotate(10deg);margin:0}

  /* The WhatsApp, Instagram and email icons are printed on the mobile artwork.
     Put invisible accessible links over them instead of adding duplicate pills. */
  .contact-inner{position:absolute;inset:0;width:100%;max-width:none;height:100%;padding:0;margin:0;text-align:center}
  .contact-inner .eyebrow,.contact-inner>p:not(.eyebrow){display:none}
  .contact-inner h2{position:absolute;top:27.7%;left:0;width:100%;margin:0;font-size:clamp(33px,8.3vw,45px);line-height:1.14;font-weight:900}
  .contact-links{position:absolute;top:41.5%;left:22%;width:56%;display:flex;flex-direction:row;justify-content:space-between;gap:0;max-width:none;margin:0}
  .contact-links a{display:block;flex:0 0 25%;width:25%;height:auto;aspect-ratio:1;padding:0;margin:0;border-radius:50%;background:transparent;box-shadow:none;color:transparent;font-size:0;line-height:0}
  .contact-links a span{display:none}
  .contact-links a:focus-visible{outline:3px solid #222;outline-offset:4px}
  .contact-links a:hover{background:#ffffff40}
}

@media(max-width:370px){
  .hero .marker-title{font-size:6.95vw}
  .hero-tagline{font-size:2.96vw}
  .hero-story{font-size:2.55vw}
  .services .service-card h3{font-size:2.85vw}
  .consulting h2{font-size:5.45vw}
  .consulting-copy{font-size:2.85vw}
}

/* Mobile revisions: backgrounds are now clean, so content no longer has to
   sit on fixed-size Canva text placeholders. */
.hero-videos{display:none}
@media(max-width:720px){
  /* Center the actual letter shapes on the two uneven brush strokes. */
  .hero .marker-title span:first-child{top:16%}
  .hero .marker-title span+span{top:64%}
  .hero .hero-cta{top:56.5%}
  .hero-videos{position:absolute;inset:0;display:block;z-index:3;pointer-events:none}
  .hero-video-tile{position:absolute;display:block;padding:4px;background:#fffaf2;border:1px solid #e9d9d5;box-shadow:0 5px 13px #2b16194d;border-radius:2px;pointer-events:auto;overflow:hidden}
  .hero-video-tile:first-child{top:64%;left:3.3%;width:34%;aspect-ratio:1.68;transform:rotate(5deg)}
  .hero-video-tile:nth-child(2){top:74%;left:10%;width:31%;aspect-ratio:1.06;transform:rotate(-4deg)}
  .hero-video-tile video{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;pointer-events:none}
  .hero-video-tile:focus-visible{outline:3px solid #dc438b;outline-offset:3px}

  /* The earlier readable service cards, with the pink labels now removed
     from the actual background artwork. */
  .services-inner .paint-heading{top:5.1%;font-size:clamp(21px,5.6vw,29px)}
  .services .service-card,.services .service-card:nth-child(2n){right:4%;left:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:55%;height:18%;padding:9px 12px;background:rgba(255,250,245,.97);border:1px solid #eddcd8;border-radius:12px;box-shadow:0 7px 20px #422a3227;text-align:center}
  .services .service-card:nth-child(1){top:16%}
  .services .service-card:nth-child(2){top:35%}
  .services .service-card:nth-child(3){top:54%}
  .services .service-card:nth-child(4){top:73%}
  .services .service-number{position:static;display:block;margin:0 0 2px;font-size:clamp(9px,2.5vw,11px);line-height:1;color:#b5678b}
  .services .service-card h3{position:static;top:auto;left:auto;width:auto;margin:2px 0 4px;transform:none;white-space:normal;font-size:clamp(14px,3.85vw,19px);line-height:1.1}
  .services .service-card p{position:static;top:auto;right:auto;width:auto;max-height:none;overflow:visible;margin:0;flex:0 1 auto;font-size:clamp(10px,2.8vw,13px);line-height:1.18}
  .services .service-card .discover{position:static;top:auto;right:auto;margin-top:5px;display:block;padding:0 5px;border:0;font-size:clamp(11px,2.8vw,13px);line-height:1.2}
  .services .service-card .discover span{display:inline}
  .services .service-card:hover{transform:translateY(-2px)}

  /* A self-contained cream title plaque sits over the torn-paper label. */
  .brands-inner .paint-heading{top:14.6%;left:16%;right:16%;width:68%;height:13.5%;display:grid;place-items:center;max-width:none;margin:0;padding:2px 12px;border-radius:16px;background:rgba(255,252,245,.96);box-shadow:0 2px 10px #a4787522;font-size:clamp(23px,6.0vw,30px);line-height:1.15;transform:rotate(-1deg)}

  /* Consulting information stays in the paper area and clear of photos. */
  .consulting h2{top:9.6%;left:9%;width:69%;font-size:clamp(20px,5.6vw,28px);transform:rotate(-2deg)}
  .consulting-copy{top:19.5%;left:7%;width:59%;padding:11px 9px 13px;border:1px solid #eadbd0;border-radius:10px;background:rgba(255,251,243,.95);box-shadow:0 5px 16px #3a25201c;font-size:clamp(11.5px,3vw,14px);line-height:1.28}
  .consulting-copy p{margin:0 0 9px}
  .consulting-copy p:nth-child(3){margin-top:10px}
  .consulting-copy p:nth-child(4){margin-top:12px}
  .consulting-copy .pill-button{margin-top:12px;padding:9px 12px;font-size:clamp(11px,2.8vw,14px)}

  /* Reintroduce the white contact pills on the icon-free pink artwork. */
  .contact-inner h2{top:25.4%;font-size:clamp(34px,8.5vw,46px)}
  .contact-inner>p:not(.eyebrow){position:absolute;top:33%;left:10%;width:80%;display:block;font-size:clamp(13px,3.5vw,18px);line-height:1.3;font-weight:800;margin:0}
  .contact-links{position:absolute;top:37%;left:18%;width:64%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
  .contact-links a{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:clamp(43px,12vw,53px);min-height:43px;padding:8px 16px;aspect-ratio:auto;color:#221e1d;font:800 clamp(13px,3.7vw,17px) 'Heebo',sans-serif;line-height:1.2;border-radius:999px;background:#fffaf2;box-shadow:0 6px 17px #32192326}
  .contact-links a span{display:inline;margin-inline-start:8px}
  .contact-links a:hover{background:#fff}

  /* Pink-highlighted titles now scale with the text rather than a bitmap. */
  .portfolio-intro h2{display:table;margin:5px auto 8px;padding:0 14px;background:linear-gradient(transparent 38%,#ffc6de 38%,#ffc6de 86%,transparent 86%);line-height:1.3}
}

/* Desktop composition: position live content on the corresponding Canva art.
   All rules stay outside the mobile breakpoint to preserve the approved phone layout. */
@media(min-width:721px){
  /* The background now has no baked mock navigation or fake text/buttons. */
  .hero-content{position:absolute;inset:0;width:100%;height:100%;text-align:center;pointer-events:none}
  .hero-content::before{display:none}
  .hero .hello{position:absolute;top:26%;left:36%;width:17%;margin:0;padding:0;text-align:center;font-size:clamp(18px,1.6vw,30px)}
  .hero .marker-title{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none;font-size:clamp(29px,3.45vw,72px);line-height:1}
  .hero .marker-title span{position:absolute;left:12%;width:44%;margin:0;text-align:center;transform:rotate(-2deg)}
  .hero .marker-title span:first-child{top:32%}
  .hero .marker-title span+span{top:44%}
  /* Keep the copy clear of the hand-drawn heart and star along the left edge. */
  .hero-tagline{position:absolute;top:57.1%;left:17%;width:38.4%;margin:0;font-size:clamp(13px,1.23vw,21px);line-height:1.2}
  .hero-story{position:absolute;top:61.5%;left:18.5%;width:35.5%;max-width:none;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;font-size:clamp(11px,1vw,17px);line-height:1.36}
  .hero .hero-cta{position:absolute;top:75%;left:24%;width:18%;min-height:49px;margin:0;padding:10px 16px;transform:none;pointer-events:auto;font-size:clamp(14px,1.22vw,20px)}
  .hero .hero-cta:hover{transform:translateY(-3px)}

  /* The two original moving collage frames are on the right of the hero. */
  .hero-videos{position:absolute;inset:0;display:block;z-index:3;pointer-events:none}
  .hero-video-tile{position:absolute;display:block;pointer-events:auto;overflow:hidden;padding:0;background:#fffaf1;border:6px solid #fffaf1;border-bottom-width:15px;box-shadow:0 6px 15px #2c22213d;border-radius:2px}
  .hero-video-tile:first-child{left:78.5%;top:59.5%;width:10.4%;height:20%;transform:rotate(9deg)}
  .hero-video-tile:nth-child(2){left:77.6%;top:36.5%;width:10%;height:20%;transform:rotate(6deg)}
  .hero-video-tile video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
  .hero-video-tile:focus-visible{outline:3px solid #d8448f;outline-offset:4px}

  /* The service heading belongs inside the wide top brush, not above it. */
  .services-inner .paint-heading{position:absolute;top:18.6%;left:30%;width:40%;font-size:clamp(25px,2.5vw,49px);line-height:1.1;transform:none;white-space:nowrap}

  /* A fresh, independent logo-card gallery replaces the baked-in boxes in the
     desktop artwork; the cards no longer need pixel-perfect image alignment. */
  .brands .brand-list{display:none}
  .brands .brand-logos{position:absolute;top:49%;left:8%;width:84%;height:34%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,25px);direction:ltr;align-items:stretch;justify-items:stretch}
  .brands .brand-logos .brand-card{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;background:rgba(255,252,246,.96);border:1px solid #eadfd5;border-radius:13px;box-shadow:0 8px 23px #34271a18}
  .brands .brand-logos .brand-card img{display:block;width:80%;height:70%;min-width:0;min-height:0;object-fit:contain;padding:0}
  .brands-inner .paint-heading{top:29.9%;left:21%;right:auto;width:58%;font-size:clamp(30px,3vw,56px);line-height:1.18;transform:none;text-wrap:nowrap}

  /* Single-line headline on the pink stripe; quote belongs to the side note. */
  .consulting h2{top:16.5%;left:23%;right:auto;width:54%;font-size:clamp(32px,3.4vw,66px);line-height:1.12;white-space:nowrap;transform:none}
  .consulting h2 br{display:none}
  /* Anchor the handwriting to the actual centre of the angled Post-it. */
  .consulting-note{display:block;position:absolute;top:81.3%;right:3.4%;width:12%;margin:0;font-size:clamp(12px,.93vw,18px);font-weight:900;line-height:1.16;text-align:center;text-wrap:balance;transform:rotate(10deg)}

  /* Exact invisible hit areas on the three round social icons in the artwork. */
  .contact-inner{position:absolute;inset:0;width:100%;height:100%;text-align:center}
  .contact-inner .eyebrow{position:absolute;top:22%;left:33%;width:34%;margin:0}
  .contact-inner h2{position:absolute;top:27.2%;left:30%;width:40%;margin:0;font-size:clamp(39px,4vw,70px)}
  .contact-inner>p:not(.eyebrow){position:absolute;top:39.5%;left:27%;width:46%;margin:0;font-size:clamp(15px,1.4vw,22px)}
  .contact-links{position:absolute;top:52.2%;left:34.5%;width:34.65%;height:12%;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-items:center;gap:0;direction:ltr}
  .contact-links a{display:block;flex:none;width:6.8vw;height:auto;aspect-ratio:1;padding:0;margin:0;background:transparent;border-radius:50%;box-shadow:none;color:transparent;font-size:0;line-height:0}
  .contact-links a:hover{background:#ffffff36}
}

/* The approved mobile gallery keeps the original logos and their spacing. */
@media(max-width:720px){
  .brands .brand-logos .brand-card{display:block;width:100%;height:100%;min-width:0;min-height:0}
}