/* The homepage's longer story: who kartoon is, how buying works, the
   finishing details, the questions people ask, and one last call to shop.
   Same world as the rest of the site: dark green, cream, the photographs,
   with the hero's light cream used again mid-page so the scroll has a
   rhythm instead of one long dark block. */

:root{
  --paper:#f3efe7;
  --ink:#16211a;
  --ink-soft:#56645a;
  --tan-deep:#9a6127;
}

/* ── Shared ─────────────────────────────────────────────────── */
.hm-kick{margin:0 0 14px; font-size:14px; font-weight:600; color:var(--tan)}
.hm-h{margin:0; font-size:clamp(32px,4.4vw,52px); line-height:1.15}
.hm-sub{margin:16px 0 0; font-size:17.5px; line-height:1.65; color:var(--muted); max-width:58ch}

/* Sections rise in once as they arrive. Only when the script is there to
   bring them back, so nothing is ever left invisible. */
.js-reveal [data-reveal]{opacity:0; transform:translateY(16px);
  transition:opacity 700ms var(--ease-out,cubic-bezier(.23,1,.32,1)), transform 700ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.js-reveal [data-reveal].in{opacity:1; transform:none}

/* ── Who we are, in numbers ─────────────────────────────────── */
.hm-about{padding-block:72px; border-top:1px solid var(--line)}
.hm-state{margin:0 auto; max-width:860px; text-align:center;
  font-family:var(--font-display); font-weight:500; color:var(--cream);
  font-size:clamp(19px,2vw,26px); line-height:1.6; text-wrap:balance}
.hm-state b{color:var(--tan); font-weight:600}
.hm-nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:960px; margin:36px auto 0;
  border:1px solid var(--line); border-radius:20px}
.hm-num{padding:22px 12px; text-align:center}
.hm-num + .hm-num{border-inline-start:1px solid var(--line)}
.hm-num b{display:block; direction:ltr; unicode-bidi:isolate;
  font-family:var(--font-display); font-weight:600; color:var(--tan);
  font-size:clamp(34px,4vw,48px); line-height:1.1; font-variant-numeric:tabular-nums}
.hm-num span{display:block; margin-top:6px; font-size:14px; color:var(--muted)}
@media(max-width:760px){
  .hm-about{padding-block:52px}
  .hm-nums{margin-top:26px; border-radius:16px}
  .hm-num{padding:16px 6px}
  .hm-num b{font-size:30px}
  .hm-num span{font-size:12.5px}
  .hm-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-num:nth-child(3){border-inline-start:0}
  .hm-num:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── How buying works ───────────────────────────────────────── */
.hm-how{background:var(--paper); color:var(--ink); padding-block:110px}
.hm-how .hm-kick{color:var(--tan-deep)}
.hm-how .hm-kick,.hm-how .hm-h,.hm-how .hm-sub{text-align:center; margin-inline:auto}
.hm-how .hm-sub{color:var(--ink-soft)}
.hm-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:60px}
.hm-card{background:#fff; border-radius:22px; padding:14px 14px 34px; text-align:center;
  box-shadow:0 1px 0 rgba(22,33,26,.04)}
.hm-card h3{margin:28px 16px 10px; font-size:22px; line-height:1.3; color:var(--ink)}
.hm-card > p{margin:0 auto; max-width:44ch; padding-inline:16px; font-size:15.5px; line-height:1.7; color:var(--ink-soft)}
.hm-mock{position:relative; aspect-ratio:16/10; border-radius:16px; background:#efe9de;
  overflow:hidden; display:grid; place-items:center}
@media(max-width:860px){
  .hm-how{padding-block:76px}
  .hm-grid{grid-template-columns:1fr; margin-top:40px}
  /* Narrow cards: the pictures set the height, so nothing is cut off. */
  .mock-pay,.mock-chat,.mock-track{aspect-ratio:auto; padding-block:30px}
  .mock-size{aspect-ratio:4/3}
  .pay-card,.chat{width:86%}
}

/* 1. The box that changes shape with the size. */
.mock-size{background:#ede7d9}
.sz-imgs{position:absolute; inset:0}
.sz-imgs img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 480ms var(--ease-out,ease)}
.sz-imgs img.on{opacity:1}
.mock-chips{position:absolute; inset-inline:0; bottom:16px; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding-inline:12px}
.mock-chips span{font-size:12.5px; padding:6px 11px; border-radius:999px; background:#fff; color:var(--ink-soft);
  border:1px solid rgba(22,33,26,.08); transition:background 260ms ease, color 260ms ease, border-color 260ms ease}
.mock-chips span.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.mock-dim{position:absolute; top:16px; inset-inline-start:18px; margin:0; font-size:13.5px; font-weight:600; color:var(--ink);
  direction:ltr; unicode-bidi:isolate}

/* 2. Paying. Amounts are blanks on purpose: the picture is about how,
   not about a price that would go stale. */
.pay-card{width:min(78%,340px); background:#fff; border-radius:16px; padding:20px 20px 16px;
  box-shadow:0 18px 40px -18px rgba(22,33,26,.35); text-align:start}
.sk-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sk{display:block; height:9px; border-radius:6px; background:#ece7dd}
.sk.dark{height:12px; background:#cfd6cf}
.w20{width:20%} .w30{width:30%} .w40{width:40%} .w60{width:60%}
.sk-row.tot{padding-top:12px; border-top:1px solid #eee9df; margin-top:4px}
.sk-row.tot b{font-size:14px; color:var(--ink)}
.pay-btn{display:block; margin-top:6px; padding:12px; border-radius:11px; background:var(--ink); color:#fff;
  text-align:center; font-size:14.5px; font-weight:600; transition:transform 160ms var(--ease-out,ease), background 200ms ease}
.pay-btn.press{transform:scale(.96)}
.pay-btn.done{background:#2f7d4f}
.pay-card .pay-logos{justify-content:center; margin-top:12px}
.pay-card .pay-logos i{border:1px solid #ece7dd}

/* 3. The design, approved on WhatsApp. */
.chat{width:min(80%,360px); background:#efe6da; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(22,33,26,.35); display:flex; flex-direction:column; gap:8px; padding-bottom:14px; text-align:start}
.chat-top{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1f3a2b; color:#fff; font-size:14.5px}
.chat-av{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:block}
.bub{max-width:76%; margin-inline:12px; padding:6px; border-radius:10px; font-size:13px; line-height:1.5; color:var(--ink);
  transition:opacity 420ms var(--ease-out,ease), transform 420ms var(--ease-out,ease)}
.bub span{display:block; padding:4px 4px 2px}
.bub.in{align-self:flex-start; background:#fff}
.bub.out{align-self:flex-end; background:#d9f6cf; display:flex; align-items:flex-end; gap:6px}
.bub.out small{color:#3a8bd6; font-size:11px; padding-bottom:2px}
.bub img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:7px}
.mock-chat.wait .bub{opacity:0; transform:translateY(8px)}
.mock-chat.wait .bub.show{opacity:1; transform:none}

/* 4. The order on its way. */
.track{list-style:none; margin:0; padding:0; width:min(70%,300px); position:relative; display:grid; gap:20px; text-align:start}
.track::before{content:""; position:absolute; inset-inline-start:9px; top:10px; bottom:10px; width:2px; background:#ddd5c7}
.track::after{content:""; position:absolute; inset-inline-start:9px; top:10px; width:2px; height:var(--fill,0%); max-height:calc(100% - 20px);
  background:var(--ink); transition:height 600ms var(--ease-out,ease)}
.track li{position:relative; display:flex; align-items:center; gap:14px; font-size:15px; color:#9aa39c; transition:color 300ms ease}
.track i{position:relative; z-index:1; width:20px; height:20px; border-radius:50%; background:#efe9de; border:2px solid #ddd5c7;
  transition:background 300ms ease, border-color 300ms ease}
.track li.done{color:var(--ink); font-weight:600}
.track li.done i{background:var(--ink); border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ── Finishing details ──────────────────────────────────────── */
.hm-fin{padding-block:72px}
/* One row of five, about a third of the old height. */
.fin-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:28px}
.fin{position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:var(--card); color:#fff; text-decoration:none}
.fin.big{grid-column:auto; grid-row:auto; aspect-ratio:4/5}
.fin img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out,ease)}
.fin::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,12,.8), rgba(10,16,12,.1) 50%, rgba(10,16,12,0) 66%)}
.fin > span{position:absolute; z-index:1; inset-inline:14px; bottom:13px}
.fin b,.fin.big b{display:block; font-size:15.5px; font-weight:600}
.fin small,.fin.big small{display:block; margin-top:2px; font-size:12.5px; color:rgba(255,255,255,.82); line-height:1.4}
@media (hover:hover) and (pointer:fine){ .fin:hover img{transform:scale(1.045)} }
@media(max-width:860px){
  .hm-fin{padding-block:56px}
  /* A row that slides on a phone, two and a half cards in view. */
  .fin-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:22px -16px 0; padding-inline:16px; scrollbar-width:none}
  .fin-grid::-webkit-scrollbar{display:none}
  .fin,.fin.big{flex:0 0 42%; scroll-snap-align:start}
  .fin small,.fin.big small{display:none}
}
}

/* ── Our work ───────────────────────────────────────────────── */
.hm-work{padding-block:16px 72px}
.work-test{margin:0 0 12px; font-size:12.5px; font-weight:700; color:var(--tan); opacity:.85}
.work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px}
.work-head .hm-h{font-size:clamp(24px,2.8vw,34px)}
.work-nav{display:flex; align-items:center; gap:8px; flex:none}
.work-all{color:var(--cream); font-size:14.5px; text-decoration:underline; text-underline-offset:4px; margin-inline-end:8px}
.work-nav button{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--cream); cursor:pointer; transition:border-color 160ms ease, opacity 160ms ease}
.work-nav button:hover{border-color:var(--cream)}
.work-nav button[disabled]{opacity:.3; cursor:default}
/* One row that slides: swipe on a phone, arrows on a computer. */
.work-rail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px}
.work-rail::-webkit-scrollbar{display:none}
.work{flex:0 0 clamp(220px,22vw,290px); scroll-snap-align:start; display:block; color:var(--cream); text-decoration:none}
.work .wk-ph{position:relative; display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--card)}
.work img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out,ease)}
.work > span:last-child{display:block; padding:10px 2px 0}
.work b{display:block; font-size:14.5px; font-weight:600}
.work small{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
@media (hover:hover) and (pointer:fine){ .work:hover img{transform:scale(1.04)} }
@media(max-width:760px){
  .hm-work{padding-block:4px 56px}
  .work{flex-basis:62%}
  .work-nav button{display:none}
  .work-rail{gap:10px; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px}
}

/* ── kartoon in brief: small tiles, read at a glance ─────────── */
.hm-facts{padding-block:64px; border-top:1px solid var(--line)}
.hm-facts-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; margin-bottom:22px}
.hm-facts-h{margin:0; font-size:clamp(24px,2.8vw,32px)}
.hm-facts-who{margin:0; color:var(--muted); font-size:15.5px}
.hm-facts-l{margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.hm-facts-l .ft{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:2px;
  padding:16px; border-radius:16px; background:var(--card)}
.ft-i{grid-row:1 / 3; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(233,184,123,.12); color:var(--tan)}
.hm-facts-l dt{color:var(--muted); font-size:13px}
.hm-facts-l dd{margin:0; color:var(--cream); font-size:14.5px; line-height:1.55}
.hm-facts-l a{color:var(--cream); text-decoration:none}
@media(max-width:980px){ .hm-facts-l{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){
  .hm-facts{padding-block:48px}
  .hm-facts-l{gap:8px}
  .hm-facts-l .ft{grid-template-columns:1fr; padding:14px}
  .ft-i{grid-row:auto; width:32px; height:32px; margin-bottom:6px}
  .hm-facts-l dd{font-size:13.5px}
}

/* ── Questions ──────────────────────────────────────────────── */
.hm-faq{background:var(--band); border-block:1px solid var(--line); padding-block:104px}
.hm-faq .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:64px; align-items:start}
.hm-faq .hm-sub{font-size:16.5px}
.hm-faq .more{display:inline-block; margin-top:22px; color:var(--cream); text-decoration:underline; text-underline-offset:4px; font-size:15.5px}
.faq-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.faq-tabs button{font:inherit; font-size:14.5px; padding:9px 16px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer; transition:background 200ms ease, color 200ms ease, border-color 200ms ease}
.faq-tabs button[aria-selected="true"]{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.faq-panel[hidden]{display:none}
.faq-panel details{border-bottom:1px solid var(--line)}
.faq-panel summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; font-size:17px; color:var(--cream)}
.faq-panel summary::-webkit-details-marker{display:none}
.faq-panel summary::after{content:""; flex:0 0 auto; width:9px; height:9px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); transition:transform 220ms var(--ease-out,ease); margin-top:-4px}
.faq-panel details[open] summary::after{transform:rotate(-135deg); margin-top:4px}
.faq-panel details p{margin:0 0 20px; color:var(--muted); font-size:15.5px; line-height:1.75; max-width:62ch}
@media(max-width:900px){
  .hm-faq{padding-block:72px}
  .hm-faq .wrap{grid-template-columns:1fr; gap:28px}
}

/* ── Last call ──────────────────────────────────────────────── */
.hm-cta{background:var(--paper); color:var(--ink); padding-block:120px; text-align:center}
.hm-cta h2{font-size:clamp(38px,6vw,76px); line-height:1.1}
.hm-cta p{margin:18px 0 0; font-size:18px; color:var(--ink-soft)}
.hm-cta .acts{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:34px}
.btn-dark{background:var(--ink); color:var(--cream)}
.btn-dark:hover{background:#263c2e}
.btn-line{border-color:rgba(22,33,26,.3); color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
@media(max-width:640px){ .hm-cta{padding-block:80px} .hm-cta .acts .btn{flex:1 1 100%} }

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1; transform:none; transition:none}
  .fin img,.work img,.bub,.track::after,.track li,.track i,.mock-chips span,.pay-btn{transition:none}
}