:root {
      --cream: #fff8ec;
      --cream-deep: #f3e4d3;
      --brown: #5b2f1b;
      --brown-soft: #80513b;
      --green: #718b55;
      --green-dark: #415f3d;
      --orange: #f2a31c;
      --coral: #ed7452;
      --blue: #416b91;
      --white: #fffdf8;
      --line: rgba(91, 47, 27, .18);
      --shadow: 0 24px 70px rgba(91, 47, 27, .12);
      --shell: min(1180px, calc(100% - 40px));
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--brown); background: var(--cream); font: 16px/1.6 Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { color: inherit; }
    .shell { width: var(--shell); margin-inline: auto; }
    .eyebrow { margin: 0 0 18px; color: var(--green-dark); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
    .skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: var(--brown); color: var(--white); transform: translateY(-150%); }
    .skip-link:focus { transform: none; }

    .site-header { position: absolute; z-index: 60; inset: 0 0 auto; }
    .header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; }
    .logo { display: inline-flex; align-items: center; }
    .brand-logo { width: 210px; height: 70px; display: block; object-fit: contain; object-position:left center; flex: 0 0 auto; }
    .site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 750; }
    .site-nav > a { border-bottom: 2px solid transparent; }
    .site-nav > a:hover { border-color: var(--coral); }
    .button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 19px; border: 2px solid var(--brown); border-radius: 999px; font-weight: 850; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
    .button:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 var(--brown); }
    :is(a,button,summary):focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
    .menu-button, .menu-scrim { display: none; }

    .hero { position: relative; min-height: 720px; padding: 136px 0 72px; overflow: hidden; background: radial-gradient(circle at 92% 12%, rgba(242,163,28,.22), transparent 26%), linear-gradient(135deg, var(--cream) 0 65%, #f8ebdb 65%); }
    .hero::before { content: ""; position: absolute; width: 260px; height: 130px; left: -80px; bottom: 90px; border: 3px solid var(--green); border-radius: 50%; transform: rotate(16deg); opacity: .35; }
    .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
    .age-ribbon { width: fit-content; margin-bottom: 28px; padding: 10px 17px; background: var(--green); color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-1.5deg); box-shadow: 5px 6px 0 #d9c9b6; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(56px, 7.2vw, 96px); line-height: .9; letter-spacing: -.06em; }
    h1 span { display: inline-block; }
    .word-ceramics { color: var(--brown); }
    .word-world span:nth-child(1) { color: var(--green); }
    .word-world span:nth-child(2) { color: var(--orange); }
    .word-world span:nth-child(3) { color: var(--coral); }
    .word-world span:nth-child(4) { color: var(--blue); }
    .hero-lead { max-width: 570px; margin-bottom: 28px; color: var(--brown-soft); font-size: clamp(18px, 1.8vw, 21px); }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
    .button-ghost { border-color:rgba(91,47,27,.32); background:rgba(255,253,248,.72); }
    .button-ghost:hover { background:var(--white); }
    .hero-note { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--green-dark); font-size: 14px; font-weight: 800; }
    .hero-note::before { content: ""; width: 42px; height: 2px; background: var(--green-dark); }

    .clay-stage { position: relative; min-height: 500px; border: 2px solid var(--line); border-radius: 47% 53% 44% 56% / 39% 48% 52% 61%; background: #f2dac5; box-shadow: var(--shadow); transform: rotate(1deg); }
    .stage-label { position: absolute; z-index: 4; top: 30px; right: -8px; width: 112px; aspect-ratio: 1; display: grid; place-items: center; padding: 17px; border: 2px dashed var(--white); border-radius: 50%; outline: 8px solid var(--coral); background: var(--coral); color: var(--white); text-align: center; font-size: 13px; font-weight: 900; line-height: 1.2; transform: rotate(7deg); }
    .sun-shape { position: absolute; width: 142px; aspect-ratio: 1; top: 68px; left: 58px; border-radius: 50%; background: var(--orange); opacity: .88; }
    .spark { position: absolute; color: var(--blue); font-size: 42px; font-weight: 900; }
    .spark-one { top: 112px; right: 90px; transform: rotate(14deg); }
    .spark-two { left: 42px; bottom: 160px; color: var(--coral); transform: rotate(-14deg); }
    .wheel { position: absolute; left: 50%; bottom: 54px; width: 78%; height: 90px; border: 6px solid var(--brown); border-radius: 50%; background: var(--blue); transform: translateX(-50%); box-shadow: 0 20px 0 #b67b58, 0 33px 0 var(--brown); }
    .wheel::after { content: ""; position: absolute; inset: 15px 40px; border: 4px solid rgba(255,255,255,.45); border-radius: 50%; }
    .pot { position: absolute; z-index: 2; left: 50%; bottom: 120px; width: 190px; height: 230px; border: 5px solid var(--brown); border-radius: 20% 20% 42% 42% / 10% 10% 30% 30%; background: #b96f4d; transform: translateX(-50%); box-shadow: inset 0 -25px rgba(91,47,27,.12); }
    .pot::before { content: ""; position: absolute; width: 108%; height: 44px; left: -4%; top: -18px; border: 5px solid var(--brown); border-radius: 50%; background: #d79269; box-shadow: inset 0 10px 0 #6d3924; }
    .pot::after { content: ""; position: absolute; inset: 62px 0 auto; height: 6px; border-top: 3px solid rgba(255,255,255,.4); border-bottom: 3px solid rgba(91,47,27,.25); }
    .tiny-shape { position: absolute; z-index: 3; right: 34px; bottom: 84px; width: 86px; height: 98px; border: 4px solid var(--brown); border-radius: 48% 52% 42% 58%; background: var(--green); transform: rotate(8deg); }
    .tiny-shape::before, .tiny-shape::after { content: ""; position: absolute; top: -18px; width: 26px; height: 28px; border: 4px solid var(--brown); border-radius: 65% 35% 48% 52%; background: var(--orange); }
    .tiny-shape::before { left: 10px; transform: rotate(-20deg); }
    .tiny-shape::after { right: 8px; transform: rotate(20deg); }
    .tiny-face { position: absolute; z-index: 5; right: 57px; bottom: 118px; font-size: 21px; letter-spacing: 8px; }

    .marquee { overflow: hidden; border-block: 2px solid var(--brown); background: var(--green); color: var(--white); transform: rotate(-.3deg); }
    .marquee-track { width: max-content; display: flex; gap: 34px; padding: 16px 0; font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; animation: marquee 26s linear infinite; }
    .marquee-track span::after { content: "✦"; margin-left: 34px; color: var(--orange); }
    @keyframes marquee { to { transform: translateX(-50%); } }

    .section { padding: 96px 0; }
    .section-head { max-width: 800px; margin-bottom: 44px; }
    h2 { margin-bottom: 20px; font: 500 clamp(40px, 5.2vw, 68px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
    h2 em { color: var(--coral); font-weight: 400; }
    .section-intro { max-width: 650px; color: var(--brown-soft); font-size: 18px; }

    .benefits { background: var(--white); }
    .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .benefit-card { min-height: 270px; display: flex; flex-direction: column; padding: 24px; border: 2px solid var(--brown); border-radius: 24px 48px 26px 40px; background: var(--cream); box-shadow: 5px 6px 0 var(--brown); }
    .benefit-card:nth-child(2) { border-radius: 48px 22px 42px 28px; background: #fff0c9; transform: rotate(1deg); }
    .benefit-card:nth-child(3) { border-radius: 28px 45px 24px 52px; background: #f6d9cf; transform: rotate(-.7deg); }
    .benefit-card:nth-child(4) { border-radius: 45px 30px 50px 22px; background: #dce7ef; }
    .benefit-icon { width: 58px; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 30px; border: 2px solid currentColor; border-radius: 50%; font-size: 27px; }
    .benefit-card h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.1; }
    .benefit-card p { margin: auto 0 0; color: var(--brown-soft); font-size: 14px; }

    .make-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .make-card { position: relative; min-height: 330px; overflow: hidden; padding: 24px; border: 2px solid var(--brown); border-radius: 34px; }
    .make-card h3 { position: relative; z-index: 3; font-size: 24px; }
    .make-card-one { background: #e8c49e; }
    .make-card-two { background: #d9e1cb; }
    .make-card-three { background: #d9e7f2; }
    .make-pot { position: absolute; left: 50%; bottom: 45px; width: 180px; height: 190px; border: 5px solid var(--brown); border-radius: 18% 18% 38% 38%; background: var(--coral); transform: translateX(-50%) rotate(-3deg); }
    .make-pot::before { content: ""; position: absolute; width: 108%; height: 38px; left: -4%; top: -15px; border: 5px solid var(--brown); border-radius: 50%; background: #f0a486; }
    .make-rainbow { position: absolute; width: 230px; height: 150px; left: 50%; bottom: 55px; border: 28px solid var(--orange); border-bottom: 0; border-radius: 140px 140px 0 0; transform: translateX(-50%); box-shadow: inset 0 0 0 24px var(--coral), inset 0 0 0 48px var(--blue); }
    .make-animal { position: absolute; left: 50%; bottom: 46px; width: 160px; height: 180px; border: 5px solid var(--brown); border-radius: 48% 52% 38% 42%; background: var(--green); transform: translateX(-50%); }
    .make-animal::before, .make-animal::after { content: ""; position: absolute; top: -36px; width: 58px; height: 68px; border: 5px solid var(--brown); background: var(--green); }
    .make-animal::before { left: -5px; border-radius: 80% 20% 40% 60%; transform: rotate(-25deg); }
    .make-animal::after { right: -5px; border-radius: 20% 80% 60% 40%; transform: rotate(25deg); }
    .animal-face { position: absolute; z-index: 2; left: 50%; bottom: 120px; transform: translateX(-50%); font-size: 22px; letter-spacing: 18px; }

    .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
    .faq-contact { margin-top: 30px; font-weight: 800; }
    .faq-contact a { display:inline-flex; margin-top:10px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); }
    .faq-contact a:hover { border-color:var(--brown); }
    details { margin-bottom:10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.72); overflow:hidden; }
    details[open] { border-color:rgba(91,47,27,.32); background:var(--white); }
    summary { position: relative; padding:18px 54px 18px 18px; list-style: none; cursor: pointer; font-size:18px; font-weight:850; line-height:1.4; }
    summary:hover { background:rgba(243,228,211,.55); }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; position:absolute; right:18px; top:12px; font-size:30px; font-weight:400; transition:transform .2s; }
    details[open] summary::after { transform: rotate(45deg); }
    details p { max-width:620px; margin:0 52px 18px 18px; color:var(--brown-soft); }

    .site-footer { padding: 42px 0; background: #2e1b12; color: #f6e8d7; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .site-footer .logo { padding:8px 12px; border-radius:14px; background:var(--cream); }
    .site-footer .brand-logo { width:180px; height:60px; }
    .footer-copy { margin: 0; color: #c9ab95; font-size: 13px; }

    @media (max-width: 960px) {
      :root { --shell: min(100% - 30px, 760px); }
      .menu-button { position: relative; z-index: 73; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--brown); border-radius: 50%; background: var(--cream); cursor: pointer; }
      .menu-button span { position: absolute; width: 22px; height: 2px; background: var(--brown); transition: transform .25s; }
      .menu-button span:nth-child(1) { transform: translateY(-4px); }
      .menu-button span:nth-child(2) { transform: translateY(4px); }
      .menu-button[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
      .menu-button[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
      .menu-scrim { position: fixed; z-index: 69; inset: 0; display: block; border: 0; background: rgba(46,27,18,.52); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
      .menu-scrim.open { opacity: 1; visibility: visible; }
      .site-nav { position: fixed; z-index: 70; inset: 0 0 0 auto; width: min(88vw, 420px); height: 100vh; height: 100dvh; padding: 120px 28px 36px; overflow-y: auto; background: var(--orange); flex-direction: column; align-items: stretch; gap: 8px; box-shadow: -20px 0 60px rgba(46,27,18,.24); transform: translateX(105%); visibility: hidden; transition: transform .3s, visibility .3s; }
      .site-nav.open { transform: none; visibility: visible; }
      .site-nav > a { padding: 14px 0; font-size: 24px; }
      .hero { padding-top: 124px; }
      .hero-grid, .faq-grid { grid-template-columns: 1fr; }
      .clay-stage { min-height: 470px; }
      .benefit-grid { grid-template-columns: 1fr 1fr; }
      .make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .faq-grid { gap: 38px; }
    }

    @media (max-width: 640px) {
      :root { --shell: calc(100% - 24px); }
      .header-inner { height: 74px; }
      .brand-logo { width: 180px; height: 60px; }
      .hero { min-height: auto; padding: 104px 0 54px; }
      .age-ribbon { font-size: 11px; }
      h1 { font-size: clamp(48px, 15vw, 68px); }
      .hero-actions { align-items: stretch; flex-direction: column; }
      .button { width: 100%; }
      .clay-stage { min-height: 370px; margin-top: 16px; }
      .stage-label { width: 96px; top: 22px; right: 4px; font-size: 11px; outline-width: 6px; }
      .sun-shape { width: 105px; top: 55px; left: 28px; }
      .pot { width: 145px; height: 180px; bottom: 105px; }
      .wheel { bottom: 44px; height: 70px; }
      .tiny-shape { right: 20px; bottom: 68px; transform: scale(.78) rotate(8deg); }
      .tiny-face { right: 38px; bottom: 101px; transform: scale(.8); }
      .section { padding: 68px 0; }
      h2 { font-size: clamp(38px, 11.5vw, 54px); }
      .benefit-grid, .make-grid { grid-template-columns: 1fr; }
      .benefit-card { min-height: 220px; }
      .make-card-one { grid-column: auto; }
      .make-card { min-height: 290px; }
      .faq-grid { gap:28px; }
      summary { font-size:17px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }