@font-face {
  font-family:'Rubik';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/rubik-regular.ttf') format('truetype')
}

@font-face {
  font-family:'Rubik';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/rubik-medium.ttf') format('truetype')
}

@font-face {
  font-family:'Secular One';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/secular-one.ttf') format('truetype')
}

:root {
  --cream:#faf8f1;
  --paper:#fffdf8;
  --ink:#272e28;
  --green:#294b3b;
  --muted:#5c635b;
  --sage:#dfe8d9;
  --yellow:#edce82;
  --coral:#e9b19c;
  --blue:#dbe4e8;
  --line:#dedfd4;
  --display:'Secular One',sans-serif;
  --body:'Rubik',sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  -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
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #8d462c;
  outline-offset:5px
}

::selection {
  background:var(--yellow);
  color:var(--ink)
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  line-height:1.15
}

h2 {
  font-size:clamp(2.3rem,4.1vw,3.65rem)
}

h3 {
  font-size:1.65rem
}

p+p {
  margin-top:1rem
}

ul,ol {
  padding:0;
  margin:0;
  list-style:none
}

.container {
  width:min(1200px,calc(100% - 112px));
  margin-inline:auto
}

.section-pad {
  padding-block:112px
}

.skip-link {
  position:fixed;
  top:8px;
  right:16px;
  z-index:20;
  background:var(--green);
  color:var(--cream);
  padding:12px 20px;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  background:var(--cream);
  border-bottom:1px solid var(--line)
}

.header-inner {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:1.85rem;
  line-height:1;
  white-space:nowrap
}

.brand img {
  display:block
}

.brand-dot {
  color:#a7573d
}

.site-header nav {
  display:flex;
  gap:36px;
  font-size:.94rem
}

.site-header nav a,.back-top {
  transition:color .2s
}

.site-header nav a:hover,.back-top:hover {
  color:#8d462c
}

.header-contact {
  font-size:.95rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:30px;
  padding:9px 18px;
  border:1px solid #9baca0;
  border-radius:7px;
  transition:background .2s
}

.header-contact:hover {
  background:var(--sage)
}

.header-contact span {
  font-size:1.4rem
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  padding-top:74px;
  padding-bottom:96px;
  align-items:center
}

.eyebrow,.section-kicker {
  display:block;
  font-size:.85rem;
  font-weight:500;
  margin-bottom:22px;
  letter-spacing:.025em
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}

.little-line {
  width:23px;
  height:8px;
  border-radius:8px;
  background:var(--coral);
  transform:rotate(-10deg)
}

h1 {
  font-size:clamp(3.2rem,5vw,4.65rem);
  line-height:1.12;
  letter-spacing:-.03em
}

.marked {
  position:relative;
  white-space:nowrap;
  isolation:isolate;
  color:inherit
}

.marked:after {
  content:'';
  position:absolute;
  z-index:-1;
  background:var(--sage);
  height:.72em;
  bottom:.02em;
  inset-inline:-5px;
  transform:rotate(-2deg);
  border-radius:5px 9px 7px 3px
}

.hero-intro {
  font-size:1.125rem;
  max-width:520px;
  margin-top:29px;
  line-height:1.8
}

.hero-detail {
  color:var(--muted);
  max-width:510px;
  font-size:.98rem;
  line-height:1.8;
  margin-top:10px
}

.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  min-height:54px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  transition:background .2s,transform .2s
}

.button-primary {
  background:var(--green);
  color:var(--paper)
}

.button-primary:hover {
  background:#193b2b;
  transform:translateY(-1px)
}

.button span[aria-hidden] {
  font-size:1.35rem
}

.hero .button {
  margin-top:28px
}

.hero-art {
  position:relative;
  align-self:center;
  max-width:440px;
  width:100%;
  padding-top:38px;
  transform:rotate(-3deg)
}

.journey-line {
  display:block;
  width:100%;
  height:auto
}

.art-caption {
  position:absolute;
  right:17%;
  top:30px;
  font-size:.88rem;
  transform:rotate(3deg);
  color:var(--muted)
}

.art-result {
  position:absolute;
  bottom:38px;
  right:48%;
  font-family:var(--display);
  font-size:clamp(1.7rem,2.4vw,2.2rem);
  line-height:1.25;
  transform:rotate(3deg);
  white-space:nowrap
}

.art-result span {
  color:var(--green)
}

.art-result svg {
  display:block;
  width:170px;
  height:12px;
  color:#bb6449
}

.scroll-cue {
  position:absolute;
  bottom:20px;
  right:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  color:var(--muted)
}

.scroll-cue span {
  font-size:1.3rem
}

.familiar {
  background:#f0f0e7
}

.split-layout {
  display:grid;
  grid-template-columns:.85fr 1.25fr;
  gap:100px
}

.section-intro p {
  max-width:300px;
  margin-top:25px;
  color:var(--muted);
  font-size:1.05rem
}

.hand-underline {
  position:relative;
  display:inline-block
}

.hand-underline:after {
  content:'';
  position:absolute;
  bottom:-10px;
  left:0;
  right:0;
  height:9px;
  border-top:3px solid #b67a53;
  border-radius:50%;
  transform:rotate(-5deg)
}

.intro-doodle {
  width:120px;
  margin-top:35px;
  margin-right:100px;
  color:var(--green)
}

.problem-list li {
  display:flex;
  align-items:center;
  gap:22px;
  padding:21px 0;
  border-bottom:1px solid #d8dace;
  font-size:1.05rem;
  line-height:1.65
}

.problem-list li:first-child {
  padding-top:0
}

.problem-mark {
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:1.6rem;
  color:var(--green);
  transform:rotate(-6deg)
}

.problem-list li:nth-child(even) .problem-mark {
  transform:rotate(6deg)
}

.mark-sage {
  background:var(--sage)
}

.mark-yellow {
  background:var(--yellow)
}

.mark-coral {
  background:var(--coral)
}

.mark-blue {
  background:var(--blue)
}

.problem-reassurance {
  margin-top:38px;
  font-size:.96rem;
  line-height:1.9
}

.problem-reassurance p {
  color:var(--muted);
  margin-bottom:16px
}

.problem-reassurance .text-link {
  display:inline-block;
  line-height:2.05
}

.text-link {
  font-weight:500;
  color:var(--green);
  text-decoration:underline;
  text-decoration-color:#aebcad;
  text-underline-offset:5px
}

.text-link:hover {
  text-decoration-color:var(--green)
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:58px
}

.small-spark {
  font-size:4.7rem;
  color:#bb6449;
  font-weight:400;
  line-height:1;
  transform:rotate(10deg)
}

.approach-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px
}

.approach-steps li {
  position:relative
}

.approach-steps li:not(:last-child):after {
  content:'';
  height:1px;
  background:var(--line);
  position:absolute;
  top:26px;
  right:75px;
  width:calc(100% - 70px)
}

.step-number {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  font-size:.95rem;
  direction:ltr;
  margin-bottom:25px
}

.approach-steps h3 {
  margin-bottom:17px
}

.approach-steps p {
  font-size:.97rem;
  color:var(--muted);
  line-height:1.85
}

.possibilities {
  background:#f4f0e5
}

.possibilities-heading {
  max-width:690px
}

.possibilities-heading p {
  margin-top:24px;
  color:var(--muted);
  font-size:1.04rem
}

.green-text {
  color:var(--green)
}

.example-groups {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:46px;
  margin-top:40px
}

.example-group {
  min-width:0
}

.example-drawing {
  display:block;
  width:100%;
  max-width:300px;
  height:150px;
  margin:0 auto 22px;
  color:var(--green)
}

.example-group h3 {
  font-size:1.65rem;
  margin-bottom:28px;
  color:var(--green)
}

.example-stories li+li {
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid #d9d9cb
}

.example-stories h4 {
  margin:0 0 10px;
  font-size:1.03rem;
  font-weight:500;
  line-height:1.55;
  text-wrap:pretty
}

.example-stories p {
  color:var(--muted);
  font-size:.94rem;
  line-height:1.85
}

.examples-note {
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid #d9d9cb;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.9
}

.examples-note strong {
  display:block;
  margin-top:8px;
  color:var(--ink);
  font-weight:500
}

.why-us {
  background:var(--green);
  color:var(--cream)
}

.why-layout {
  display:grid;
  grid-template-columns:.9fr 1.2fr;
  gap:110px
}

.why-heading .section-kicker {
  color:#dce4d8
}

.why-heading h2 {
  font-size:clamp(3.3rem,5vw,4.6rem)
}

.coral-text {
  color:var(--coral)
}

.together-mark {
  width:150px;
  height:auto;
  display:block;
  margin-top:40px
}

[data-smile-pending] {
  visibility:hidden
}

.why-copy {
  padding-top:2px
}

.why-copy p {
  color:#e0e5db;
  font-size:1.02rem;
  line-height:1.95
}

.why-copy .why-lead {
  font-size:1.6rem;
  line-height:1.5;
  color:var(--cream);
  font-family:var(--display);
  margin-bottom:25px
}

.why-copy .why-promise {
  color:var(--yellow);
  font-size:1.24rem;
  font-weight:500;
  margin-top:28px;
  padding-top:25px;
  border-top:1px solid #5e7564;
  line-height:1.75
}

.getting-started .section-intro h2 {
  font-size:clamp(2.1rem,3.3vw,3.1rem);
  line-height:1.24
}

.start-label {
  font-size:1rem;
  font-family:var(--body);
  font-weight:500;
  margin-bottom:28px
}

.start-steps li {
  display:flex;
  gap:22px;
  position:relative;
  padding-bottom:32px
}

.start-steps li>span {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #c1cabb;
  border-radius:50%;
  flex:0 0 36px;
  background:var(--cream);
  color:var(--green);
  z-index:1;
  font-size:.86rem
}

.start-steps li:not(:last-child):before {
  position:absolute;
  content:'';
  width:1px;
  background:var(--line);
  top:36px;
  bottom:0;
  right:17px
}

.start-steps h3 {
  font-size:1.4rem;
  margin:2px 0 10px
}

.start-steps p {
  color:var(--muted);
  font-size:.97rem
}

.start-ending {
  margin-right:58px;
  font-weight:500;
  color:var(--green)
}

.start-ending span {
  display:inline-block;
  margin-right:8px;
  font-size:1.7rem
}

.contact-section {
  padding:12px 0 56px
}

.contact-panel {
  background:var(--sage);
  border-radius:19px;
  display:grid;
  grid-template-columns:.9fr 1.15fr;
  gap:85px;
  padding:65px
}

.contact-intro h2 {
  font-size:clamp(3.2rem,4.8vw,4.5rem)
}

.contact-intro h2 span {
  color:#a9563c
}

.contact-intro .contact-lead {
  font-size:1.25rem;
  line-height:1.65;
  margin-top:25px
}

.contact-intro p {
  font-size:1rem;
  max-width:340px;
  color:#455543
}

.contact-doodle {
  width:180px;
  margin-top:24px;
  color:var(--green)
}

.contact-form {
  padding-top:3px;
  min-width:0
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px
}

.field label {
  font-size:.9rem;
  font-weight:500;
  line-height:1.65
}

.optional {
  font-weight:400;
  font-size:.78rem;
  color:#53614f;
  margin-right:5px
}

.field input,.field textarea {
  width:100%;
  border:1px solid #b4c1af;
  border-radius:6px;
  background:var(--paper);
  padding:11px 13px;
  color:var(--ink);
  font-size:1rem;
  min-height:49px;
  transition:border-color .2s
}

.field input:hover,.field textarea:hover {
  border-color:#677f67
}

.field input:focus,.field textarea:focus {
  border-color:var(--green)
}

.field input::placeholder {
  color:#777d72;
  font-size:.9rem
}

.field input[dir=ltr] {
  text-align:right
}

.field textarea {
  resize:vertical;
  min-height:112px;
  line-height:1.6
}

.field-hint {
  font-size:.8rem;
  color:#53614f
}

.contact-actions {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}

.contact-actions .button {
  min-width:154px
}

.whatsapp-option {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.whatsapp-link {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.82rem;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px
}

.whatsapp-link svg {
  width:23px;
  height:23px;
  flex:0 0 23px;
  margin-left:3px
}

.whatsapp-hint {
  font-size:.78rem;
  color:#52614c;
  padding-inline-start:30px;
  margin-top:-2px;
  line-height:1.6
}

.contact-status {
  font-size:.88rem;
  line-height:1.6;
  margin-top:14px;
  color:var(--green)
}

.contact-status:empty {
  display:none
}

.contact-status.is-error {
  color:#7d3524
}

.button:disabled {
  opacity:.65;
  cursor:wait;
  transform:none
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-bottom:40px
}

.site-footer .brand {
  font-size:1.55rem
}

.site-footer p,.back-top {
  font-size:.8rem;
  color:var(--muted)
}

.back-top span {
  margin-right:12px
}

.site-footer .brand img {
  width:30px;
  height:30px
}

@media(min-width:1500px) {
  .hero {
    padding-block:95px 110px
  }
  .hero-art {
    margin-inline:auto
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 72px)
  }
  .hero {
    gap:24px
  }
  .hero h1 {
    font-size:clamp(3rem,5.5vw,4.2rem)
  }
  .split-layout,.why-layout {
    gap:58px
  }
  .approach-steps {
    gap:24px
  }
  .contact-panel {
    gap:45px;
    padding:48px
  }
  .site-header nav {
    gap:22px
  }
  .contact-actions {
    gap:10px
  }
  .section-pad {
    padding-block:88px
  }
}

@media(max-width:800px) {
  .container {
    width:calc(100% - 48px)
  }
  .header-inner {
    min-height:82px;
    gap:20px
  }
  .site-header nav {
    gap:18px;
    font-size:.8rem
  }
  .site-header nav a:last-child {
    display:none
  }
  .brand {
    font-size:1.55rem
  }
  .brand img {
    width:31px;
    height:31px
  }
  .header-contact {
    font-size:.85rem;
    gap:14px;
    padding:7px 13px
  }
  .hero {
    grid-template-columns:1.3fr .8fr;
    padding-top:56px;
    gap:5px
  }
  .hero h1 {
    font-size:clamp(2.8rem,6.3vw,3.8rem)
  }
  .hero-intro {
    font-size:1.04rem
  }
  .hero-art {
    margin-top:0;
    align-self:start;
    margin-top:84px
  }
  .art-caption {
    font-size:.7rem;
    right:5%
  }
  .art-result {
    font-size:1.5rem;
    right:28%;
    bottom:0
  }
  .art-result svg {
    width:135px
  }
  .split-layout {
    gap:40px;
    grid-template-columns:.85fr 1.2fr
  }
  .section-intro h2 {
    font-size:2.7rem
  }
  .section-intro p {
    font-size:.98rem
  }
  .approach-steps {
    grid-template-columns:1fr 1fr;
    gap:40px
  }
  .approach-steps li:nth-child(2):after {
    display:none
  }
  .example-groups {
    grid-template-columns:1fr;
    gap:38px
  }
  .example-group {
    display:grid;
    grid-template-columns:160px 1fr;
    gap:30px
  }
  .example-drawing {
    height:100px;
    margin-bottom:14px
  }
  .example-group h3 {
    font-size:1.4rem
  }
  .example-stories {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .example-stories li+li {
    border-top:0;
    padding-top:0;
    margin-top:0
  }
  .why-layout {
    gap:45px
  }
  .why-copy .why-lead {
    font-size:1.35rem
  }
  .why-copy p {
    font-size:.97rem
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:30px;
    padding:42px
  }
  .contact-intro p {
    max-width:520px
  }
  .contact-intro .contact-lead {
    margin-top:16px
  }
  .contact-doodle {
    display:none
  }
  .contact-intro .desktop-break {
    display:none
  }
  .contact-actions {
    gap:25px
  }
  .contact-form {
    max-width:600px
  }
  .section-pad {
    padding-block:76px
  }
  .site-footer {
    gap:16px
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:24px
  }
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:76px
  }
  .site-header nav {
    display:none
  }
  .brand {
    font-size:1.65rem;
    gap:8px
  }
  .header-contact {
    font-size:.85rem;
    gap:22px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:42px;
    padding-bottom:53px;
    gap:0
  }
  .eyebrow {
    font-size:.8rem;
    margin-bottom:21px
  }
  .hero h1 {
    font-size:clamp(2.6rem,10.5vw,3.8rem);
    line-height:1.15;
    letter-spacing:-.025em
  }
  .hero-intro {
    font-size:1.03rem;
    line-height:1.85;
    margin-top:25px
  }
  .hero-detail {
    font-size:.93rem;
    margin-top:12px
  }
  .hero .button {
    margin-top:25px;
    gap:18px;
    padding-inline:20px;
    font-size:.94rem
  }
  .hero-art {
    width:235px;
    margin:24px auto 0;
    padding-top:20px;
    align-self:center
  }
  .journey-line {
    height:240px
  }
  .art-caption {
    font-size:.7rem;
    top:12px;
    right:11%
  }
  .art-result {
    font-size:1.37rem;
    right:46%;
    bottom:10px
  }
  .art-result svg {
    width:123px
  }
  .scroll-cue {
    bottom:6px;
    font-size:.75rem;
    right:0
  }
  .section-pad {
    padding-block:60px
  }
  .split-layout,.why-layout {
    grid-template-columns:1fr;
    gap:34px
  }
  .section-kicker {
    font-size:.78rem;
    margin-bottom:16px
  }
  h2,.section-intro h2 {
    font-size:2.65rem
  }
  .section-intro h2 br {
    display:none
  }
  .section-intro h2 .hand-underline {
    margin-right:8px
  }
  .section-intro p {
    max-width:100%;
    margin-top:21px
  }
  .intro-doodle {
    display:none
  }
  .problem-list li {
    font-size:.96rem;
    gap:16px;
    padding-block:19px
  }
  .problem-mark {
    width:37px;
    height:37px;
    flex-basis:37px;
    font-size:1.4rem
  }
  .problem-reassurance {
    font-size:.93rem;
    margin-top:32px
  }
  .section-heading {
    margin-bottom:35px;
    gap:12px
  }
  .section-heading h2 {
    font-size:2.35rem
  }
  .small-spark {
    font-size:3rem
  }
  .approach-steps {
    gap:34px 23px
  }
  .approach-steps h3 {
    font-size:1.37rem;
    margin-bottom:12px
  }
  .approach-steps p {
    font-size:.91rem;
    line-height:1.8
  }
  .step-number {
    width:44px;
    height:44px;
    font-size:.84rem;
    margin-bottom:20px
  }
  .approach-steps li:not(:last-child):after {
    top:22px;
    right:60px;
    width:calc(100% - 48px)
  }
  .possibilities-heading h2 {
    font-size:2.5rem
  }
  .possibilities-heading p {
    font-size:.97rem;
    margin-top:20px
  }
  .desktop-break {
    display:none
  }
  .example-groups {
    margin-top:28px;
    gap:36px
  }
  .example-group {
    display:block
  }
  .example-group-heading {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px
  }
  .example-drawing {
    width:132px;
    height:82px;
    flex:0 0 132px;
    margin:0 -12px 0 0
  }
  .example-group h3 {
    margin:0;
    font-size:1.45rem
  }
  .example-stories {
    display:block
  }
  .example-stories li+li {
    border-top:1px solid #d9d9cb;
    padding-top:20px;
    margin-top:20px
  }
  .example-stories h4 {
    font-size:1.03rem
  }
  .example-stories p {
    font-size:.94rem
  }
  .examples-note {
    margin-top:36px;
    padding-top:26px;
    font-size:.91rem
  }
  .why-heading h2 {
    font-size:3.15rem
  }
  .why-heading h2 br {
    display:none
  }
  .why-heading .section-kicker {
    font-size:.74rem
  }
  .together-mark {
    width:120px;
    margin-top:24px
  }
  .why-layout {
    gap:28px
  }
  .why-copy .why-lead {
    font-size:1.5rem;
    margin-bottom:20px
  }
  .why-copy .why-promise {
    font-size:1.15rem;
    margin-top:23px;
    padding-top:23px
  }
  .getting-started .section-intro h2 {
    font-size:2.4rem;
    line-height:1.2
  }
  .getting-started .section-intro h2 br {
    display:initial
  }
  .start-label {
    margin-bottom:25px
  }
  .start-steps li {
    gap:17px;
    padding-bottom:27px
  }
  .start-steps h3 {
    font-size:1.3rem
  }
  .start-steps p {
    font-size:.93rem
  }
  .start-ending {
    margin-right:53px;
    font-size:.95rem
  }
  .contact-section {
    padding-top:0;
    padding-bottom:32px
  }
  .contact-panel {
    width:calc(100% - 24px);
    padding:34px 22px 30px;
    border-radius:14px;
    gap:28px
  }
  .contact-intro h2 {
    font-size:3.3rem
  }
  .contact-intro .contact-lead {
    font-size:1.17rem
  }
  .contact-intro p {
    font-size:.94rem
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .field {
    margin-bottom:18px
  }
  .field label {
    font-size:.86rem
  }
  .contact-actions {
    gap:13px;
    justify-content:space-between
  }
  .contact-actions .button {
    min-width:132px;
    padding-inline:18px
  }
  .whatsapp-link {
    font-size:.76rem;
    gap:3px
  }
  .site-footer {
    flex-wrap:wrap;
    gap:17px;
    padding-bottom:28px
  }
  .site-footer p {
    order:3;
    flex-basis:100%;
    font-size:.76rem
  }
  .site-footer .brand {
    font-size:1.4rem
  }
  .back-top {
    font-size:.76rem
  }
  .site-footer .brand img {
    width:26px;
    height:26px
  }
}

@media(max-width:360px) {
  .container {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:2.5rem
  }
  .hero .button {
    font-size:.86rem;
    gap:12px
  }
  .approach-steps {
    grid-template-columns:1fr
  }
  .approach-steps li:after {
    display:none
  }
  .approach-steps li {
    display:grid;
    grid-template-columns:44px 1fr;
    gap:0 17px
  }
  .approach-steps .step-number {
    grid-row:1/3
  }
  .approach-steps h3 {
    margin-top:8px
  }
  .approach-steps p {
    grid-column:2
  }
  .contact-panel {
    width:calc(100% - 20px);
    padding-inline:20px
  }
  .contact-actions {
    gap:14px
  }
  .contact-actions .button {
    width:100%
  }
  .contact-actions .whatsapp-link {
    font-size:.85rem
  }
  .header-contact {
    gap:15px
  }
}

@media(prefers-reduced-motion:reduce) {
  [data-smile-pending] {
    visibility:visible
  }
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .button-primary:hover {
    transform:none
  }
}

.art-result {
  background:var(--cream);
  padding:4px 8px;
  border-radius:12px
}