:root{
  --paper:#f7f5ee;
  --ink:#242d2b;
  --muted:#636862;
  --blue:#2b49e9;
  --line:#dcded5;
  --light-blue:#e9edff;
  --white:#fffefa;
  --warm:#ebe9dc;
  --orange:#bc542c;
  --max:1240px}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{
  color:inherit;
  text-decoration:none}
button,input,textarea{
  font:inherit}
button,a,input,textarea{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:5px}
button{
  color:inherit}
img{
  max-width:100%;
  display:block}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  font-weight:500}
h1,h2{
  letter-spacing:-2.6px;
  line-height:1.08}
h1 em,h2 em{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-2.4px}
h2{
  }
h3{
  line-height:1.3;
  letter-spacing:-.7px}
p{
  color:var(--muted)}
.wrap{
  width:min(var(--max),calc(100% - 100px));
  margin-inline:auto}
.section{
  padding-block:105px}
.icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle}
.eyebrow,.small-label{
  font-weight:600;
  letter-spacing:1.9px;
  line-height:1.5;
  display:block}
.eyebrow{
  color:var(--blue);
  margin-bottom:24px}
.small-label{
  letter-spacing:1.4px}
.logo{
  letter-spacing:-4px;
  line-height:1;
  font-weight:800}
.logo span{
  color:var(--blue)}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:52px;
  background:var(--blue);
  color:white;
  border:1px solid var(--blue);
  padding:13px 21px;
  border-radius:6px;
  line-height:1.4;
  font-weight:500;
  transition:background .2s,transform .2s}
.button:hover{
  background:#1634d0;
  transform:translateY(-2px)}
.button .icon{
  width:20px;
  height:20px}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--blue);
  font-weight:500;
  line-height:1.5}
.text-link:hover{
  text-decoration:underline;
  text-underline-offset:5px}
.text-link .icon{
  width:19px;
  height:19px}
.quiet-link{
  text-decoration:underline;
  text-underline-offset:6px}
.quiet-link:hover{
  color:var(--blue)}
.header{
  background:var(--paper);
  position:relative;
  z-index:10;
  border-bottom:1px solid var(--line)}
.header-inner{
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px}
.header nav{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto}
.header nav a{
  }
.header nav a:hover{
  color:var(--blue)}
.header-cta{
  min-height:42px;
  padding:10px 19px;
  gap:18px}
.menu-toggle{
  display:none}
.hero{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:70px;
  align-items:center;
  padding-block:67px 78px}
.hero-copy{
  padding-block:20px}
.hero .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
  letter-spacing:1.6px}
.blue-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  display:inline-block}
.hero h1{
  letter-spacing:-3.4px;
  line-height:1.08;
  white-space:nowrap}
.hero h1 em{
  color:var(--blue);
  letter-spacing:-3px;
  display:inline-block}
.underlined{
  position:relative;
  padding-bottom:9px}
.underlined:after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:8px;
  border-top:2px solid var(--blue);
  border-radius:50%;
  transform:rotate(-2deg)}
.hero-intro{
  line-height:1.75;
  max-width:470px;
  margin-top:28px}
.hero-actions{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:28px;
  flex-wrap:wrap}
.hero-actions .button{
  gap:18px}
.hero-note{
  margin-top:17px}
.hero-art{
  position:relative;
  margin:3px 0 0}
.photo-wrap{
  height:530px;
  overflow:hidden;
  border-radius:9px 110px 9px 9px}
.photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%}
.hero-note-card{
  position:absolute;
  left:-35px;
  bottom:35px;
  background:var(--white);
  padding:21px 26px;
  box-shadow:0 7px 25px #28312415;
  transform:rotate(-4deg);
  border:1px solid #e2dfd5;
  max-width:315px}
.hero-note-card:before{
  content:'';
  position:absolute;
  top:-12px;
  left:40%;
  width:72px;
  height:23px;
  background:#dfdeceba;
  transform:rotate(7deg)}
.hero-note-card .small-label{
  color:var(--blue);
  margin-bottom:12px;
  letter-spacing:1.4px}
.hero-note-card p{
  line-height:1.3;
  color:var(--ink);
  letter-spacing:-.4px}
.hero-note-card em{
  font-family:Georgia,serif;
  color:var(--blue)}
.note-signature{
  display:block;
  color:var(--muted);
  margin-top:13px}
.photo-caption{
  display:block;
  letter-spacing:1.9px;
  margin-top:15px;
  text-align:right;
  color:var(--muted)}
.roundel{
  width:120px;
  height:120px;
  background:var(--blue);
  color:var(--paper);
  position:absolute;
  right:-24px;
  top:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transform:rotate(10deg);
  line-height:1.35}
.roundel em{
  font-family:Georgia,serif;
  }
.roundel svg{
  width:44px;
  height:30px;
  margin-top:5px}
.platform-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-block:1px solid var(--line);
  padding-block:27px;
  gap:35px}
.platform-band>p{
  line-height:1.7}
.platform-band strong{
  color:var(--ink);
  font-weight:500}
.platforms{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:65px;
  padding-right:15px}
.platforms>span{
  color:#2d3431;
  line-height:1.2}
.amazon{
  letter-spacing:-1.5px;
  position:relative;
  font-weight:700;
  padding-bottom:3px}
.smile{
  position:absolute;
  bottom:-2px;
  width:36px;
  height:10px;
  left:16px;
  border-bottom:2px solid currentColor;
  border-radius:50%;
  transform:rotate(3deg)}
.shopify{
  font-style:italic;
  font-weight:700;
  letter-spacing:-1px}
.ebay{
  font-weight:400;
  letter-spacing:-2.5px}
.tiktok{
  letter-spacing:-.7px;
  font-weight:700}
.section-heading>p:last-child{
  margin-top:22px}
.section-heading.split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:80px}
.heading-aside{
  max-width:295px;
  padding-bottom:7px}
.heading-aside p{
  line-height:1.8}
.handwritten{
  display:inline-block;
  font:italic 21px/1.4 Georgia,serif;
  color:var(--blue);
  transform:rotate(-5deg);
  margin-top:30px}
.situations{
  display:grid;
  grid-template-columns:1fr 1.04fr;
  gap:85px;
  align-items:start;
  margin-top:53px}
.situation-list{
  padding-top:9px}
.situation{
  padding:23px 0;
  display:flex;
  align-items:center;
  text-align:left;
  gap:19px;
  background:none;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  line-height:1.5;
  transition:color .2s}
.situation:first-child{
  border-top:1px solid var(--line)}
.question-number{
  letter-spacing:1px;
  color:#737970}
.situation>.icon{
  width:20px;
  margin-left:auto;
  transition:transform .2s}
.situation.active{
  color:var(--blue)}
.situation.active>.icon{
  transform:rotate(-35deg)}
.situation.active>.question-number{
  color:var(--blue)}
.situation:hover{
  color:var(--blue)}
.situation-foot{
  max-width:320px;
  margin-top:26px;
  line-height:1.8}
.answer-paper{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 12px 30px #27332008;
  padding:36px 38px 29px;
  position:relative;
  min-height:450px;
  border-radius:3px;
  transform:rotate(1deg)}
.paper-tab{
  position:absolute;
  top:-13px;
  left:30px;
  background:var(--blue);
  color:white;
  letter-spacing:1.6px;
  padding:7px 12px;
  transform:rotate(-2deg)}
.answer-paper h3{
  letter-spacing:-.7px;
  line-height:1.25;
  margin-bottom:15px}
.answer-paper p{
  line-height:1.7}
.payout-example{
  margin-top:23px;
  }
.payout-example>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px 0;
  border-bottom:1px solid #e9e9df}
.payout-example strong{
  font-weight:500;
  font-variant-numeric:tabular-nums}
.payout-example .payout-total{
  font-weight:600;
  color:var(--blue);
  padding-block:14px;
  border-bottom:0}
.payout-total strong{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600}
.payout-total .icon{
  width:17px;
  height:17px}
.answer-paper .example-note{
  margin-top:4px;
  color:var(--muted)}
.answer-paper .text-link{
  margin-top:22px;
  }
.answer-list{
  padding:0;
  margin:26px 0 0;
  list-style:none}
.answer-list li{
  padding:13px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:12px;
  align-items:center}
.answer-list .icon{
  color:var(--blue);
  width:18px;
  height:18px}
.answer-paper .answer-footnote{
  margin-top:17px}
.services-section{
  padding-block:90px;
  background:var(--white);
  border-block:1px solid var(--line)}
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 38px;
  margin-top:50px}
.service{
  border-top:1px solid var(--line);
  padding:30px 0 34px;
  display:flex;
  flex-direction:column}
.service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:25px}
.service-icon{
  width:51px;
  height:51px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--paper);
  color:var(--blue)}
.service-icon .icon{
  width:30px;
  height:30px;
  stroke-width:1.35}
.service-top .small-label{
  letter-spacing:1.1px;
  color:var(--muted)}
.service h3{
  letter-spacing:-.6px;
  min-height:29px}
.service .service-tag{
  color:var(--blue);
  margin-top:10px}
.service>p:not(.service-tag){
  line-height:1.75;
  margin-top:12px;
  min-height:98px}
.service-detail{
  margin-top:15px}
.service-detail summary{
  padding:9px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  list-style:none}
.service-detail summary span{
  font-weight:400;
  color:var(--blue);
  transition:transform .2s}
.service-detail[open] summary span{
  transform:rotate(45deg)}
summary::-webkit-details-marker{
  display:none}
.service-detail ul{
  padding:0;
  list-style:none;
  margin:5px 0 14px;
  display:grid;
  gap:9px}
.service-detail li{
  color:var(--muted);
  display:flex;
  gap:9px;
  align-items:center}
.service-detail .icon{
  width:14px;
  height:14px;
  color:var(--blue)}
.service>.text-link{
  margin-top:auto;
  padding-top:15px;
  }
.services-note{
  display:flex;
  align-items:center;
  gap:17px;
  padding:21px 24px;
  background:var(--paper);
  border-radius:4px;
  margin-top:5px}
.services-note>.icon{
  width:27px;
  height:27px;
  color:var(--blue)}
.services-note p{
  }
.services-note a{
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--blue)}
.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:50px}
.step-number{
  letter-spacing:-2px;
  line-height:1.2;
  font-family:Georgia,serif;
  color:var(--blue);
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:25px;
  margin-bottom:25px}
.step-number>span{
  font-family:Arial,sans-serif;
  line-height:1;
  font-weight:400}
.process h3{
  margin-bottom:13px}
.process p{
  line-height:1.85}
.step-caption{
  display:block;
  color:var(--blue);
  margin-top:20px}
.price-note{
  display:grid;
  grid-template-columns:45px 1fr auto;
  gap:24px;
  align-items:center;
  background:#eceee4;
  padding:30px 34px;
  border-radius:6px;
  margin-top:60px}
.note-asterisk{
  line-height:1;
  color:var(--blue)}
.price-note h3{
  margin-bottom:8px}
.price-note p{
  max-width:620px;
  line-height:1.8}
.price-note .text-link{
  margin-left:25px}
.company-section{
  background:#e9edff;
  padding-block:90px}
.company-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:center}
.company-letter h2{
  }
.company-letter>p:not(.eyebrow){
  line-height:1.9;
  margin-top:25px;
  max-width:520px;
  color:#535d76}
.company-letter .letter-last{
  color:var(--ink);
  }
.letter-signature{
  font-weight:700;
  letter-spacing:-3.5px;
  display:block;
  transform:rotate(-7deg);
  margin-top:20px;
  width:max-content}
.letter-signature>span{
  color:var(--blue)}
.company-card{
  padding:30px 36px 32px;
  border:1px solid #bfc9ec;
  position:relative;
  background:#f4f5ff;
  border-radius:5px;
  transform:rotate(2deg)}
.company-card>.small-label{
  color:#627092;
  letter-spacing:1.4px}
.company-monogram{
  letter-spacing:-4px;
  font-weight:700;
  color:var(--blue);
  line-height:1;
  display:block;
  margin:28px 0 20px}
.company-card h3{
  line-height:1.2;
  letter-spacing:-.8px}
.company-card>p{
  margin-top:17px;
  line-height:1.8}
.company-card dl{
  margin:22px 0 24px}
.company-card dl>div{
  border-top:1px solid #d3d9ef;
  padding-block:12px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:20px}
.company-card dt{
  color:var(--muted)}
.company-card dd{
  margin:0}
.company-card .text-link{
  gap:8px}
.brand-story{
  margin-top:1.75rem;
  padding-left:1.25rem;
  border-left:3px solid var(--blue)}
.brand-story .small-label{
  color:var(--blue);
  font-size:.875rem;
  line-height:1.5}
.brand-story h3{
  margin-block:.65rem .75rem;
  font-size:clamp(1.6rem,2.3vw,2rem);
  line-height:1.3;
  letter-spacing:-.025em}
.brand-story h3 span{
  display:inline-block}
.brand-story h3 em{
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400}
.brand-story h3 b{
  color:var(--blue);
  font-weight:inherit}
.brand-explanation{
  max-width:29rem;
  color:#535d76;
  font-size:1rem;
  line-height:1.65}
.faq-section{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:95px}
.faq-section h2{
  }
.faq-section>div>p:not(.eyebrow){
  margin-top:24px}
.faq-section .text-link{
  margin-top:8px}
.faqs details{
  border-bottom:1px solid var(--line)}
.faqs details:first-child{
  border-top:1px solid var(--line)}
.faqs summary{
  display:flex;
  align-items:center;
  gap:22px;
  justify-content:space-between;
  list-style:none;
  cursor:pointer;
  padding:21px 0;
  line-height:1.5}
.faqs summary span{
  color:var(--blue);
  font-weight:400;
  transition:transform .2s}
.faqs details[open] summary span{
  transform:rotate(45deg)}
.faqs details p{
  line-height:1.85;
  padding:0 30px 22px 0}
.contact-section{
  background:var(--blue);
  color:#fffefa;
  padding-block:80px 90px}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:100px;
  align-items:center}
.contact-copy .eyebrow{
  color:#e1e7ff}
.contact-copy h2{
  }
.contact-copy h2 em{
  color:#fffefa}
.contact-copy>p:not(.eyebrow){
  color:#e0e5ff;
  line-height:1.8;
  margin-top:25px;
  max-width:360px}
.contact-copy>p+p{
  }
.contact-email{
  display:inline-flex;
  align-items:center;
  gap:24px;
  letter-spacing:-.5px;
  text-decoration:underline;
  text-underline-offset:8px;
  margin-top:25px}
.contact-doodle{
  display:flex;
  gap:20px;
  margin:37px 0 0 48px;
  align-items:flex-end;
  color:#d5dcff}
.contact-doodle svg{
  width:130px;
  height:70px}
.contact-doodle span{
  font:italic 22px/1.2 Georgia,serif;
  transform:rotate(-8deg)}
.enquiry{
  background:var(--white);
  border-radius:7px;
  color:var(--ink);
  padding:32px 34px}
.enquiry-heading>.small-label{
  letter-spacing:1.3px;
  color:var(--blue)}
.enquiry-heading h3{
  letter-spacing:-.9px;
  margin-top:12px}
.enquiry-heading>p{
  margin:7px 0 22px}
.enquiry fieldset{
  border:0;
  padding:0;
  margin:0}
.brief-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.brief-options label{
  display:flex;
  position:relative;
  cursor:pointer}
.brief-options input{
  position:absolute;
  top:17px;
  left:12px;
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--blue)}
.brief-options label>span{
  padding:14px 10px 14px 33px;
  border:1px solid var(--line);
  border-radius:4px;
  display:flex;
  align-items:center;
  min-height:51px;
  width:100%;
  line-height:1.5}
.brief-options input:checked+span{
  background:var(--light-blue);
  border-color:#8c9dea;
  color:var(--blue)}
.brief-options input:focus-visible{
  outline:none}
.brief-options input:focus-visible+span{
  outline:2px solid var(--blue);
  outline-offset:3px}
.message-label{
  display:block;
  margin-top:22px;
  margin-bottom:8px}
.message-label span{
  color:var(--muted);
  margin-left:3px}
.enquiry textarea{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  resize:vertical;
  padding:12px;
  min-height:100px;
  max-height:350px;
  line-height:1.7;
  color:var(--ink)}
.enquiry textarea::placeholder{
  color:#777c72}
.brief-summary{
  line-height:1.6;
  margin:13px 0 15px;
  min-height:17px}
.enquiry .button{
  width:100%;
  justify-content:space-between;
  }
.brief-note{
  line-height:1.7;
  margin-top:13px}
.brief-note a{
  text-decoration:underline;
  text-underline-offset:2px}
.contact-section a:focus-visible{
  outline-color:white}
.enquiry a:focus-visible{
  outline-color:var(--blue)}
footer{
  background:var(--paper)}
.footer-top{
  display:grid;
  grid-template-columns:1.2fr .85fr 1.15fr 1fr;
  gap:65px;
  padding-block:55px 40px}
.footer-top .logo{
  }
.footer-top p,.footer-top address{
  line-height:1.8;
  font-style:normal;
  color:var(--muted);
  margin-top:15px}
.footer-top .small-label{
  color:var(--muted);
  margin:3px 0 18px;
  letter-spacing:1.3px}
.footer-top>div>a:not(.logo){
  display:block;
  margin-top:5px}
.footer-top a:hover{
  color:var(--blue)}
.footer-bottom{
  padding-block:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:25px;
  color:var(--muted)}
.skip{
  position:absolute;
  left:15px;
  top:-100px;
  z-index:99;
  background:white;
  padding:10px}
.skip:focus{
  top:10px}
.sr-only{
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  position:absolute;
  white-space:nowrap}
[hidden]{
  display:none!important}

@media(min-width:1500px){
  .hero{
  gap:90px}
.hero h1{
  }
.photo-wrap{
  height:555px}
}

@media(max-width:1150px){
  .wrap{
  width:calc(100% - 70px)}
.header-inner{
  gap:26px}
.header nav{
  gap:20px}
.hero{
  gap:50px;
  padding-block:50px 62px}
.hero h1{
  }
.hero-intro{
  }
.photo-wrap{
  height:500px}
.hero-actions{
  gap:18px}
.hero-actions .button{
  gap:12px}
.hero-note-card{
  left:-22px;
  bottom:32px;
  padding:20px}
.hero-note-card p{
  }
.roundel{
  right:-15px;
  width:105px;
  height:105px}
.platforms{
  gap:40px}
.situations{
  gap:50px}
.answer-paper{
  padding:34px 27px 26px}
.situation{
  gap:15px}
.services{
  gap:0 28px}
.service h3{
  min-height:52px}
.service-top .small-label{
  letter-spacing:.7px}
.service>p:not(.service-tag){
  min-height:125px}
.service .service-tag{
  }
.section{
  padding-block:85px}
h2{
  }
.process{
  gap:35px}
.price-note{
  padding:25px;
  gap:20px}
.price-note .text-link{
  margin-left:10px}
.company-grid{
  gap:60px}
.company-letter h2{
  }
.company-card{
  padding:28px}
.faq-section{
  gap:55px}
.contact-grid{
  gap:60px}
.contact-copy h2{
  }
.enquiry{
  padding:28px}
.footer-top{
  gap:35px}
.section-heading.split{
  gap:45px}
}

@media(max-width:900px){
  .header-inner{
  height:83px}
.header nav{
  gap:17px}
.header nav a{
  }
.header-cta{
  gap:10px;
  padding-inline:14px}
.logo{
  }
.hero{
  gap:30px}
.hero h1{
  letter-spacing:-2px}
.hero h1 em{
  letter-spacing:-2px}
.hero .eyebrow{
  letter-spacing:1px}
.hero-intro{
  }
.photo-wrap{
  height:475px;
  border-top-right-radius:80px}
.hero-note-card{
  left:-18px;
  padding:18px}
.hero-note-card p{
  }
.roundel{
  right:-10px;
  top:24px;
  width:92px;
  height:92px;
  }
.roundel em{
  }
.roundel svg{
  width:35px;
  height:22px}
.platforms{
  gap:28px}
.platform-band>p{
  }
.platforms .shopify{
  }
.platforms .tiktok{
  }
.platforms .ebay{
  }
.platforms .amazon{
  }
.situations{
  gap:32px}
.situation{
  gap:10px}
.question-number{
  }
.answer-paper h3{
  }
.answer-paper{
  min-height:480px}
.services{
  grid-template-columns:1fr 1fr;
  gap:0 40px}
.service h3{
  min-height:0;
  }
.service>p:not(.service-tag){
  min-height:99px}
.service-top .small-label{
  }
.section-heading.split{
  display:block}
.heading-aside{
  max-width:600px;
  margin-top:25px;
  display:flex;
  gap:40px;
  align-items:center}
.heading-aside p{
  max-width:360px;
  }
.handwritten{
  margin:0;
  white-space:nowrap;
  }
.process{
  gap:25px}
.process h3{
  }
.price-note{
  grid-template-columns:38px 1fr}
.price-note .text-link{
  grid-column:2;
  margin:0}
.company-grid{
  gap:40px}
.company-letter h2{
  }
.company-letter>p:not(.eyebrow){
  }
.company-card{
  padding:25px}
.company-card dl>div{
  grid-template-columns:1fr;
  gap:3px}
.company-card h3{
  }
.company-card .text-link{
  }
.faq-section{
  grid-template-columns:1fr 1.2fr;
  gap:35px}
.faq-section h2{
  }
.contact-grid{
  gap:35px}
.contact-copy h2{
  }
.contact-email{
  gap:15px}
.contact-copy>p:not(.eyebrow){
  }
.enquiry{
  padding:25px}
.brief-options{
  grid-template-columns:1fr}
.brief-options label>span{
  min-height:43px;
  padding-block:11px}
.brief-options input{
  top:14px}
.contact-doodle{
  margin-left:10px;
  gap:10px}
.contact-doodle svg{
  width:95px}
.contact-doodle span{
  }
}

@media(max-width:680px){
  html{
  scroll-padding-top:25px}
.wrap{
  width:calc(100% - 40px)}
.header-inner{
  height:78px;
  gap:20px}
.logo{
  }
.header-cta{
  margin-left:auto;
  min-height:39px;
  padding:9px 14px;
  gap:17px}
.menu-toggle{
  border:0;
  background:none;
  width:27px;
  height:38px;
  padding:10px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px}
.menu-toggle span{
  height:1.5px;
  background:var(--ink);
  width:23px;
  display:block;
  transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{
  transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{
  transform:translateY(-3.75px) rotate(-45deg)}
.header nav{
  position:absolute;
  top:77px;
  left:0;
  right:0;
  display:none;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:13px 20px 20px;
  box-shadow:0 10px 20px #202a240a}
.header nav.is-open{
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:0}
.header nav a{
  padding:12px 0}
.hero{
  grid-template-columns:1fr;
  gap:36px;
  padding-block:25px 28px}
.hero-copy{
  padding:14px 0 0}
.hero .eyebrow{
  letter-spacing:1.45px;
  margin-bottom:24px}
.hero h1{
  letter-spacing:-2.3px;
  line-height:1.12}
.hero h1 em{
  letter-spacing:-2.1px}
.hero-intro{
  margin-top:23px;
  line-height:1.8;
  max-width:500px}
.hero-actions{
  margin-top:24px;
  gap:20px}
.hero-actions .button{
  gap:18px;
  min-height:48px}
.hero-actions .quiet-link{
  }
.hero-note{
  margin-top:14px}
.hero-art{
  margin:0 6px 0 16px}
.photo-wrap{
  height:390px;
  border-top-right-radius:83px}
.hero-note-card{
  left:-16px;
  bottom:38px;
  padding:18px 20px;
  max-width:275px}
.hero-note-card p{
  }
.hero-note-card .small-label{
  }
.note-signature{
  }
.roundel{
  width:100px;
  height:100px;
  right:-9px;
  top:15px;
  }
.roundel em{
  }
.photo-caption{
  margin-top:13px;
  letter-spacing:1.1px}
.platform-band{
  flex-direction:column;
  gap:20px;
  padding-block:24px 28px;
  align-items:flex-start;
  margin-top:12px}
.platform-band>p{
  }
.platform-band>p br{
  display:none}
.platform-band strong{
  margin-left:4px}
.platforms{
  width:100%;
  gap:18px;
  padding-right:0}
.platforms .amazon{
  }
.platforms .shopify{
  }
.platforms .ebay{
  }
.platforms .tiktok{
  }
.section{
  padding-block:63px}
.eyebrow{
  letter-spacing:1.6px;
  margin-bottom:20px}
h2{
  letter-spacing:-1.65px;
  line-height:1.15}
h2 em{
  letter-spacing:-1.7px}
.section-heading>p:last-child{
  margin-top:20px}
.desktop-break{
  display:none}
.situations{
  grid-template-columns:1fr;
  margin-top:30px;
  gap:35px}
.situation-list{
  padding:0}
.situation{
  padding:19px 0;
  gap:14px}
.situation>.icon{
  width:18px}
.question-number{
  }
.situation-foot{
  margin-top:17px;
  max-width:100%;
  }
.answer-paper{
  margin:0 3px;
  min-height:0;
  padding:34px 24px 26px;
  transform:rotate(.6deg)}
.answer-paper h3{
  }
.answer-paper p{
  }
.payout-example{
  margin-top:19px}
.answer-paper .example-note{
  }
.answer-paper .text-link{
  margin-top:20px}
.paper-tab{
  left:22px;
  }
.answer-list li{
  }
.services-section{
  padding-block:60px}
.heading-aside{
  display:block;
  margin-top:20px}
.heading-aside p{
  max-width:100%}
.handwritten{
  margin-top:20px}
.services{
  grid-template-columns:1fr;
  margin-top:35px;
  gap:0}
.service{
  padding:26px 0 30px}
.service-top{
  margin-bottom:20px}
.service-icon{
  width:51px;
  height:51px}
.service h3{
  }
.service-top .small-label{
  }
.service>p:not(.service-tag){
  min-height:0;
  margin-top:12px}
.service .service-tag{
  }
.service-detail{
  margin-top:15px}
.service-detail summary{
  padding-block:10px}
.service>.text-link{
  padding-top:12px;
  }
.service-detail li{
  }
.services-note{
  padding:18px;
  align-items:flex-start;
  gap:13px}
.services-note p{
  line-height:1.8}
.process{
  grid-template-columns:1fr;
  margin-top:35px;
  gap:28px}
.process article{
  display:grid;
  grid-template-columns:49px 1fr;
  column-gap:19px}
.step-number{
  letter-spacing:-1px;
  border-bottom:0;
  padding:0;
  margin:0;
  align-items:flex-start;
  grid-row:1/4;
  line-height:1.3}
.step-number>span{
  display:none}
.process h3{
  margin:0 0 10px}
.process p{
  line-height:1.85}
.step-caption{
  margin-top:13px;
  grid-column:2}
.price-note{
  grid-template-columns:1fr;
  padding:26px;
  gap:12px;
  margin-top:35px}
.note-asterisk{
  }
.price-note h3{
  max-width:250px}
.price-note p{
  }
.price-note .text-link{
  grid-column:1;
  margin-top:3px}
.company-section{
  padding-block:60px}
.company-grid{
  grid-template-columns:1fr;
  gap:38px}
.company-letter h2{
  }
.company-letter>p:not(.eyebrow){
  line-height:1.9;
  margin-top:22px}
.company-letter .letter-last{
  }
.letter-signature{
  margin-top:20px}
.company-card{
  margin-inline:4px;
  padding:26px;
  transform:rotate(1deg)}
.company-card>.small-label{
  }
.company-card h3{
  }
.company-monogram{
  margin-block:24px 19px}
.company-card dl>div{
  grid-template-columns:1fr 1.3fr;
  gap:15px;
  }
.company-card .text-link{
  }
.faq-section{
  grid-template-columns:1fr;
  gap:30px}
.faq-section h2{
  }
.faq-section>div>p:not(.eyebrow){
  margin-top:20px}
.faqs summary{
  padding-block:20px;
  gap:20px}
.faqs details p{
  padding-right:15px}
.contact-section{
  padding-block:57px}
.contact-grid{
  grid-template-columns:1fr;
  gap:35px}
.contact-copy h2{
  letter-spacing:-2px}
.contact-copy>p:not(.eyebrow){
  margin-top:20px;
  max-width:100%}
.contact-copy>p+p{
  max-width:300px}
.contact-email{
  margin-top:23px;
  gap:23px}
.contact-doodle{
  display:none}
.enquiry{
  padding:26px 22px}
.enquiry-heading h3{
  }
.enquiry-heading>p{
  margin-bottom:22px}
.brief-options{
  grid-template-columns:1fr 1fr;
  gap:8px}
.brief-options label>span{
  padding:12px 8px 12px 29px;
  min-height:64px}
.brief-options input{
  top:15px;
  left:10px;
  width:12px;
  height:12px}
.message-label{
  margin-top:23px}
.enquiry textarea{
  line-height:1.55;
  min-height:118px;
  padding:11px}
.enquiry textarea::placeholder{
  line-height:1.6}
.brief-summary{
  margin-top:13px}
.enquiry .button{
  }
.brief-note{
  line-height:1.8}
.footer-top{
  grid-template-columns:1fr 1fr;
  gap:33px 24px;
  padding-block:45px 30px}
.footer-top>div:first-child{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center}
.footer-top>div:first-child p{
  margin:0;
  text-align:right}
.footer-top>div:last-child{
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:23px}
.footer-top .small-label{
  margin-bottom:15px}
.footer-top>div>a:not(.logo){
  }
.footer-top p,.footer-top address{
  }
.footer-bottom{
  gap:20px;
  align-items:flex-start}
.footer-bottom span{
  max-width:235px}
.footer-bottom a{
  white-space:nowrap}
.hero-note-card:before{
  width:61px;
  height:20px;
  top:-10px}
}

@media(max-width:360px){
  .wrap{
  width:calc(100% - 32px)}
.hero h1{
  }
.hero .eyebrow{
  }
.hero-actions{
  gap:16px}
.hero-actions .button{
  padding-inline:15px}
.platforms{
  gap:13px}
.platforms .tiktok{
  }
.platforms .shopify{
  }
.platforms .amazon{
  }
.platforms .ebay{
  }
.situation{
  gap:10px}
.hero-note-card p{
  }
.brief-options{
  grid-template-columns:1fr}
.brief-options label>span{
  min-height:43px}
.contact-email{
  }
.company-card{
  padding:23px}
.company-card dl>div{
  }
.header-inner{
  gap:16px}
.header-cta{
  gap:12px}
.photo-wrap{
  height:350px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*:before,*:after{
  transition:none!important;
  animation:none!important}
}


/* vyzo type system — all reading sizes are relative to the reader's font setting. */
:root{
  
  --text-xs:.75rem;
  
  --text-sm:.875rem;
  
  --text-base:1rem;
  
  --text-lg:1.125rem;
  
  --heading-1:clamp(2.5rem,4.6vw,4.125rem);
  
  --heading-2:clamp(2.125rem,3.2vw,3rem);
  
}

body{
  font-size:var(--text-base);
  line-height:1.65}

h1,h2,h3{
  overflow-wrap:normal;
  text-wrap:balance}

h1,h2{
  letter-spacing:-.045em}

h1 em,h2 em{
  letter-spacing:-.045em}

h2,.company-letter h2,.faq-section h2{
  font-size:var(--heading-2);
  line-height:1.18}

h3{
  font-size:1.5rem;
  line-height:1.3;
  letter-spacing:-.025em}

p{
  line-height:1.65}

.hero h1{
  font-size:var(--heading-1);
  line-height:1.12;
  letter-spacing:-.05em;
  white-space:normal}

.hero h1 em{
  font-size:1.065em;
  letter-spacing:-.04em;
  line-height:1.08}

.hero-copy{
  min-width:0}

.hero-intro{
  font-size:var(--text-lg);
  line-height:1.65;
  max-width:29rem}

.hero-note,.note-signature,.photo-caption,.situation-foot,.answer-paper .example-note,.answer-paper .answer-footnote,.step-caption,.brief-summary,.brief-note,.message-label span,.footer-bottom{
  font-size:var(--text-xs);
  line-height:1.6}

.hero .eyebrow,.eyebrow,.small-label,.hero-note-card .small-label,.paper-tab,.service-top .small-label,.company-card>.small-label,.enquiry-heading>.small-label,.footer-top .small-label{
  font-size:var(--text-xs);
  line-height:1.5;
  letter-spacing:.095em}

.header nav a,.button,.header-cta,.hero-actions .button,.hero-actions .quiet-link,.quiet-link,.text-link,.answer-paper .text-link,.service>.text-link,.company-card .text-link,.price-note .text-link,.service-detail summary,.message-label,.brief-options label>span,.enquiry .button{
  font-size:var(--text-sm);
  line-height:1.5}

.button{
  min-height:3rem;
  padding:.8rem 1.25rem;
  gap:0}

.header-cta{
  min-height:2.75rem;
  padding:.6rem 1.2rem;
  white-space:nowrap}

.header-inner{
  height:auto;
  min-height:6rem;
  gap:2rem;
  padding-block:1rem}

.header nav{
  gap:1.5rem}

.logo{
  width:8.75rem;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:1;
  letter-spacing:normal}

.logo>img{
  width:100%;
  height:auto}

.logo span{
  color:inherit}

.letter-signature{
  width:8.4rem;
  margin-top:1.5rem;
  transform:rotate(-3deg);
  line-height:1}

.letter-signature img{
  width:100%;
  height:auto}

.company-monogram{
  width:3.5rem;
  margin:1.8rem 0 1.5rem;
  line-height:1}

.company-monogram img{
  width:100%;
  height:auto}

.hero-note-card{
  max-width:20rem;
  padding:1.35rem 1.5rem}

.hero-note-card p{
  font-size:1.25rem;
  line-height:1.35;
  letter-spacing:-.02em}

.hero-note-card .small-label{
  margin-bottom:.8rem}

.note-signature{
  margin-top:.8rem;
  max-width:15rem}

.photo-caption{
  letter-spacing:.08em}

.roundel{
  font-size:.875rem;
  line-height:1.35;
  min-width:7.5rem;
  min-height:7.5rem}

.roundel em{
  font-size:1.5rem}

.platform-band>p{
  font-size:var(--text-sm);
  line-height:1.6}

.platforms .amazon{
  font-size:1.625rem}

.platforms .shopify{
  font-size:1.7rem}

.platforms .ebay{
  font-size:2.15rem}

.platforms .tiktok{
  font-size:1.35rem}

.section-heading>p:last-child,.heading-aside p,.answer-paper p,.service>p:not(.service-tag),.service .service-tag,.services-note p,.process p,.price-note p,.company-letter>p:not(.eyebrow),.company-letter .letter-last,.company-card>p,.faq-section>div>p:not(.eyebrow),.faqs details p,.contact-copy>p:not(.eyebrow),.enquiry-heading>p{
  font-size:var(--text-base);
  line-height:1.65}

.heading-aside{
  max-width:21rem;
  flex-shrink:0}

.handwritten{
  font-size:1.3rem;
  line-height:1.4;
  white-space:normal}

.situation{
  font-size:var(--text-base);
  line-height:1.5;
  padding:1.4rem 0;
  gap:1rem}

.question-number{
  font-size:var(--text-xs);
  line-height:1.5}

.situation-foot{
  max-width:24rem}

.answer-paper{
  min-height:0;
  transform:none}

.answer-paper h3{
  font-size:1.65rem;
  line-height:1.3;
  letter-spacing:-.025em}

.paper-tab{
  padding:.45rem .8rem;
  top:-1rem}

.payout-example{
  font-size:var(--text-sm);
  line-height:1.6}

.payout-example>div{
  padding:.65rem 0}

.answer-paper .example-note{
  margin-top:.6rem}

.answer-paper .text-link{
  margin-top:1.4rem}

.answer-list li,.service-detail li{
  font-size:var(--text-sm);
  line-height:1.6}

.services{
  align-items:start}

.service-top{
  align-items:center;
  gap:1rem;
  min-height:3.5rem}

.service-top .small-label{
  text-align:right;
  max-width:11rem;
  letter-spacing:.04em}

.service h3{
  font-size:1.5rem;
  line-height:1.3;
  min-height:3.9rem;
  letter-spacing:-.025em}

.service .service-tag{
  line-height:1.5;
  min-height:3rem;
  margin-top:.75rem}

.service>p:not(.service-tag){
  min-height:8.25rem}

.service-detail summary{
  min-height:2.75rem}

.service-detail summary span{
  font-size:1.5rem}

.service>.text-link{
  padding-top:1.25rem}

.services-note{
  align-items:flex-start}

.services-note>.icon{
  margin-top:.2rem}

.step-number{
  font-size:2.6rem;
  line-height:1.15}

.step-number>span{
  font-size:1.5rem}

.process h3{
  font-size:1.5rem;
  line-height:1.3;
  min-height:3.9rem}

.step-caption{
  margin-top:1rem}

.price-note h3{
  font-size:1.4rem;
  line-height:1.35}

.note-asterisk{
  font-size:3rem}

.company-card{
  transform:none}

.company-card h3{
  font-size:1.8rem;
  line-height:1.2}

.company-card dl,.company-card dl>div{
  font-size:var(--text-sm);
  line-height:1.6}

.company-card dl>div{
  grid-template-columns:1fr 1.3fr}

.company-card .text-link{
  font-size:var(--text-sm)}

.faqs summary{
  font-size:var(--text-base);
  line-height:1.55;
  padding-block:1.25rem}

.faqs summary span{
  font-size:1.5rem}

.contact-copy h2{
  font-size:clamp(2.5rem,4vw,3.5rem);
  line-height:1.15}

.contact-copy h2 em{
  font-size:1.07em;
  line-height:1.08}

.contact-copy>p+p{
  font-size:var(--text-base)!important;
  line-height:1.65}

.contact-email{
  font-size:1.55rem;
  line-height:1.5;
  overflow-wrap:anywhere}

.contact-doodle span{
  font-size:1.4rem;
  line-height:1.3}

.enquiry-heading h3{
  font-size:1.8rem;
  line-height:1.3}

.enquiry-heading>p{
  margin-block:.6rem 1.4rem}

.brief-options label{
  min-width:0}

.brief-options label>span{
  font-size:var(--text-sm);
  line-height:1.5;
  min-height:4.5rem;
  padding:.85rem .7rem .85rem 2rem}

.brief-options input{
  width:1rem;
  height:1rem;
  top:1rem;
  left:.65rem}

.enquiry textarea,.enquiry textarea::placeholder{
  font-size:var(--text-base);
  line-height:1.6}

.enquiry textarea{
  min-height:8rem;
  max-height:none}

.message-label{
  margin-top:1.5rem}

.brief-summary{
  margin-block:1rem}

.brief-note{
  margin-top:1rem}

.footer-top .logo{
  width:8.75rem}

.footer-top p,.footer-top address,.footer-top>div>a:not(.logo),.footer-top>div:first-child p{
  font-size:var(--text-sm);
  line-height:1.65}

.footer-top .small-label{
  letter-spacing:.06em}

.footer-bottom{
  font-size:var(--text-xs)}

/* Keep any enlarged text inside its grid column. */
.hero>*,.situations>*,.services>*,.process>*,.company-grid>*,.faq-section>*,.contact-grid>*,.footer-top>*{
  min-width:0}

@media(max-width:1100px){
  
 .header nav{
  gap:1rem}
.header-inner{
  gap:1.3rem}

 .situations{
  gap:2.5rem}
.services{
  grid-template-columns:1fr 1fr;
  gap:0 2.5rem}

 .service>p:not(.service-tag){
  min-height:6.6rem}

 .section-heading.split{
  gap:2.5rem}
.company-grid{
  gap:3rem}

 .process{
  gap:2rem}
.process h3{
  font-size:1.35rem}

 .company-card dl>div{
  grid-template-columns:1fr;
  gap:.25rem}

 .contact-grid{
  gap:2.5rem}
.brief-options{
  grid-template-columns:1fr}

 .brief-options label>span{
  min-height:3rem}

 .footer-top{
  gap:2rem}

}

@media(max-width:960px){
  
 .header-inner{
  min-height:5.5rem;
  padding-block:.7rem;
  gap:1.4rem}

 .header-cta{
  margin-left:auto}

 .menu-toggle{
  border:0;
  background:none;
  min-width:2.5rem;
  height:2.75rem;
  padding:.6rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px}

 .menu-toggle span{
  height:1.5px;
  background:var(--ink);
  width:23px;
  display:block;
  transition:transform .2s}

 .menu-toggle[aria-expanded=true] span:first-child{
  transform:translateY(3.75px) rotate(45deg)}

 .menu-toggle[aria-expanded=true] span:last-child{
  transform:translateY(-3.75px) rotate(-45deg)}

 .header nav{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:none;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:1rem 2.2rem;
  box-shadow:0 10px 20px #202a240a}

 .header nav.is-open{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0}

 .header nav a{
  font-size:var(--text-base);
  padding:.7rem 0}

 .hero{
  grid-template-columns:1fr;
  gap:2.5rem;
  max-width:42rem}

 .hero h1{
  font-size:clamp(2.5rem,7.5vw,3.75rem)}

 .hero-intro{
  max-width:35rem}

 .hero-art{
  margin-left:1.5rem;
  margin-right:1rem}

 .photo-wrap{
  height:31rem}

 .hero-note-card{
  left:-1.5rem}

 .platforms{
  gap:1.7rem}

 .platform-band{
  flex-direction:column;
  align-items:flex-start;
  gap:1.4rem}

 .platforms{
  justify-content:space-between;
  width:100%}

 .platform-band>p br{
  display:none}
.platform-band strong{
  margin-left:.3rem}

 .situations{
  grid-template-columns:1fr;
  gap:2.5rem}

 .situation-foot{
  max-width:100%}

 .answer-paper{
  max-width:100%;
  padding:2.5rem}

 .answer-paper h3 br{
  display:none}

 .payout-example{
  max-width:30rem}

 .heading-aside{
  max-width:100%}

 .company-letter h2{
  font-size:2.2rem}

 .company-grid{
  grid-template-columns:1fr;
  gap:2.5rem}

 .company-letter>p:not(.eyebrow){
  max-width:38rem}

 .company-card{
  max-width:38rem}

 .company-card dl>div{
  grid-template-columns:1fr 1.3fr;
  gap:1rem}

 .faq-section{
  grid-template-columns:1fr;
  gap:2rem}

 .faq-section h2{
  font-size:var(--heading-2)}

 .contact-grid{
  grid-template-columns:1fr;
  gap:2.5rem}

 .contact-copy>p:not(.eyebrow),.contact-copy>p+p{
  max-width:35rem}

 .contact-doodle{
  display:none}
.enquiry{
  max-width:40rem;
  width:100%}

 .brief-options{
  grid-template-columns:1fr 1fr}

 .brief-options label>span{
  min-height:4.5rem}

 .footer-top{
  grid-template-columns:1fr 1fr;
  gap:2.5rem}

}

@media(max-width:680px){
  
 .wrap{
  width:calc(100% - 2.5rem)}

 .header-inner{
  min-height:5rem;
  gap:.7rem}

 .logo,.footer-top .logo{
  width:7.3rem}

 .header-cta{
  font-size:var(--text-sm);
  padding:.6rem .9rem}

 .menu-toggle{
  min-width:2.5rem}

 .hero{
  padding-top:1.5rem;
  padding-bottom:2rem;
  gap:2.2rem}

 .hero .eyebrow{
  font-size:var(--text-xs);
  letter-spacing:.075em;
  margin-bottom:1.4rem}

 .hero h1{
  font-size:clamp(2.125rem,10.5vw,3.5rem);
  letter-spacing:-.055em;
  line-height:1.14}

 .hero h1 em{
  font-size:1.065em;
  letter-spacing:-.045em;
  line-height:1.1}

 .hero-intro{
  font-size:var(--text-base);
  line-height:1.65;
  margin-top:1.5rem}

 .hero-actions{
  gap:1.25rem}
.hero-actions .button,.hero-actions .quiet-link{
  font-size:var(--text-sm)}

 .hero-note{
  font-size:var(--text-xs);
  max-width:23rem}

 .hero-art{
  margin:0 .5rem 0 1rem}

 .photo-wrap{
  height:26rem}

 .hero-note-card{
  max-width:calc(100% + .5rem);
  padding:1.2rem;
  bottom:2.3rem;
  left:-1rem}

 .hero-note-card p{
  font-size:1.1rem;
  line-height:1.35}

 .hero-note-card .small-label{
  font-size:var(--text-xs);
  letter-spacing:.06em}

 .note-signature{
  font-size:var(--text-xs)}

 .roundel{
  width:6.5rem;
  height:6.5rem;
  min-width:0;
  min-height:0;
  font-size:.75rem}

 .roundel em{
  font-size:1.3rem}

 .photo-caption{
  font-size:var(--text-xs);
  letter-spacing:.04em;
  text-align:center}

 .platforms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.7rem 2rem;
  align-items:center}

 .platforms>span{
  width:max-content}

 .platforms .amazon{
  font-size:1.6rem}
.platforms .shopify{
  font-size:1.7rem}
.platforms .ebay{
  font-size:2rem}
.platforms .tiktok{
  font-size:1.35rem}

 .platform-band>p{
  font-size:var(--text-sm)}

 .section,.services-section,.company-section{
  padding-block:4rem}

 h2,.company-letter h2,.faq-section h2{
  font-size:2.125rem;
  line-height:1.2;
  letter-spacing:-.04em}

 h2 em{
  letter-spacing:-.04em}

 .section-heading>p:last-child{
  font-size:var(--text-base)}

 .situation{
  font-size:var(--text-base);
  line-height:1.5;
  align-items:flex-start;
  gap:.85rem;
  padding-block:1.25rem}

 .question-number{
  font-size:var(--text-xs);
  padding-top:.25rem}

 .situation-foot{
  font-size:var(--text-xs)}

 .answer-paper{
  padding:2.25rem 1.3rem 1.75rem;
  margin-inline:0}

 .answer-paper h3{
  font-size:1.5rem;
  line-height:1.3}

 .answer-paper p{
  font-size:var(--text-base);
  line-height:1.65}

 .paper-tab{
  font-size:var(--text-xs);
  left:1.2rem}

 .answer-paper .example-note,.answer-paper .answer-footnote{
  font-size:var(--text-xs)}

 .payout-example{
  font-size:var(--text-sm)}

 .answer-paper .text-link,.answer-list li{
  font-size:var(--text-sm)}

 .services{
  grid-template-columns:1fr;
  gap:0}

 .service h3{
  font-size:1.5rem;
  line-height:1.3;
  min-height:0}

 .service .service-tag,.service>p:not(.service-tag){
  font-size:var(--text-base);
  line-height:1.65;
  min-height:0}

 .service-top .small-label{
  font-size:var(--text-xs);
  max-width:11rem}

 .service-detail summary,.service-detail li,.service>.text-link{
  font-size:var(--text-sm)}

 .services-note{
  padding:1.2rem}
.services-note p{
  font-size:var(--text-base)}

 .process{
  gap:2rem}

 .process article{
  grid-template-columns:2.6rem 1fr;
  column-gap:1.2rem}

 .step-number{
  font-size:2rem}
.process h3{
  font-size:1.5rem;
  min-height:0}

 .process p{
  font-size:var(--text-base);
  line-height:1.65}

 .step-caption{
  font-size:var(--text-xs)}

 .price-note h3{
  font-size:1.4rem;
  max-width:100%}
.price-note p{
  font-size:var(--text-base)}

 .price-note .text-link{
  font-size:var(--text-sm)}

 .company-letter>p:not(.eyebrow),.company-letter .letter-last{
  font-size:var(--text-base);
  line-height:1.65}

 .company-card{
  padding:1.5rem;
  margin-inline:0}
.company-card h3{
  font-size:1.7rem}

 .company-card dl>div{
  grid-template-columns:1fr;
  gap:.25rem;
  font-size:var(--text-sm)}

 .company-card .text-link{
  font-size:var(--text-sm)}

 .faqs summary,.faqs details p,.faq-section>div>p:not(.eyebrow){
  font-size:var(--text-base);
  line-height:1.65}

 .contact-copy h2{
  font-size:2.7rem;
  line-height:1.15}

 .contact-copy>p:not(.eyebrow),.contact-copy>p+p{
  font-size:var(--text-base)!important;
  line-height:1.65}

 .contact-email{
  font-size:1.45rem;
  line-height:1.5}

 .enquiry{
  padding:1.6rem 1.3rem}

 .enquiry-heading h3{
  font-size:1.75rem}
.enquiry-heading>p{
  font-size:var(--text-base)}

 .brief-options{
  grid-template-columns:1fr}

 .brief-options label>span{
  font-size:var(--text-sm);
  min-height:3.25rem;
  padding:.8rem .8rem .8rem 2.2rem}

 .brief-options input{
  top:1rem;
  left:.7rem}

 .message-label{
  font-size:var(--text-sm)}
.message-label span{
  font-size:var(--text-xs)}

 .enquiry textarea,.enquiry textarea::placeholder{
  font-size:var(--text-base);
  line-height:1.6}

 .brief-summary,.brief-note{
  font-size:var(--text-xs);
  line-height:1.65}

 .footer-top{
  gap:2rem 1.5rem}

 .footer-top>div:first-child p,.footer-top p,.footer-top address,.footer-top>div>a:not(.logo){
  font-size:var(--text-sm)}

 .footer-top .small-label,.footer-bottom{
  font-size:var(--text-xs)}

 .footer-bottom{
  flex-wrap:wrap}
.footer-bottom span{
  max-width:100%}

}

@media(max-width:360px){
  
 .wrap{
  width:calc(100% - 2rem)}
.header-inner{
  gap:.4rem}

 .logo{
  width:6.4rem}
.header-cta{
  padding-inline:.65rem}

 .hero h1{
  font-size:2.125rem}

 .hero .eyebrow{
  letter-spacing:.035em}

 .contact-copy h2{
  font-size:2.3rem}

 .footer-top{
  grid-template-columns:1fr}
.footer-top>div{
  grid-column:1!important}

}

/* Let the copy set card height; share only the action baseline. */
.services{align-items:stretch}
.service h3,.service .service-tag,.service>p:not(.service-tag){min-height:0}
.service-detail{margin-top:auto;padding-top:1.1rem}
.service>.text-link{margin-top:0}
/* Text enlargement must reflow navigation and long headings. */
.header-inner{flex-wrap:wrap}
.logo,.footer-top .logo{width:140px;max-width:100%}
h1,h2,h3{overflow-wrap:anywhere}
.hero h1 em{max-width:100%}
@media(max-width:680px){
 .logo,.footer-top .logo{width:116px}
 .platforms{grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr))}
}
@media(max-width:360px){.logo{width:102px}}
.footer-top a,.footer-top p,.brief-options label>span,.hero-note-card p{overflow-wrap:anywhere}
.payout-example>div{flex-wrap:wrap}
.sr-only{min-width:0;max-width:1px;padding:0;border:0;clip-path:inset(50%)}
@media(max-width:680px){
 .footer-top{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
}