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

.section-space {
    padding: 150px 0
}

.clean-section {
    background: var(--paper);
    position: relative
}

.notebook-accent {
    position: relative;
    background-color: var(--paper);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(18, 60, 50, .045) 40px, transparent 41px)
}

.section-label,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .15em;
    color: var(--green-2)
}

.section-label::before,
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor
}

.section-label--light {
    color: #dcebe4
}

.display-title {
    font-size: clamp(42px, 5.6vw, 74px);
    line-height: 1.06;
    letter-spacing: -.06em;
    margin: 17px 0 0;
    font-weight: 800
}

.marker {
    display: inline-block;
    position: relative;
    z-index: 0
}

.marker::after {
    content: "";
    position: absolute;
    left: -.03em;
    right: -.04em;
    bottom: .08em;
    height: .30em;
    background: var(--yellow);
    z-index: -1;
    transform: rotate(-1.1deg);
    border-radius: 2px
}

.hand-kicker,
.why-handnote,
.brand-scene__hand,
.promise-check__hand,
.faq-doodle,
.footer-hand {
    font-family: "Gaegu", cursive;
    font-weight: 700
}

.hand-kicker {
    font-size: 20px;
    color: var(--green);
    transform: rotate(-2deg);
    margin-bottom: 11px
}

.hand-kicker--light {
    color: var(--lime)
}

/* intro wipe */
.wipe-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: #dce2de;
    pointer-events: none
}

.wipe-intro__clear {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #f8f5ec, #e7f0eb)
}

.wipe-intro__fog {
    position: absolute;
    inset: 0;
    background: rgba(236, 240, 237, .92);
    backdrop-filter: blur(11px);
    clip-path: inset(0 0 0 0)
}

.wipe-intro__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 400 clamp(22px, 3vw, 42px) "DM Serif Display", serif;
    color: rgba(18, 60, 50, .72);
    letter-spacing: .06em
}

.wipe-intro__squeegee {
    position: absolute;
    left: 50%;
    top: -46%;
    width: min(340px, 40vw);
    transform: translateX(-50%)
}

.wipe-intro__squeegee img {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .1))
}



/* buttons */
.sketch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 23px;
    border: 2px solid var(--green);
    border-radius: 48% 52% 50% 50% / 52% 48% 53% 47%;
    font-size: 13px;
    font-weight: 800;
    transition: .22s transform, .22s background, .22s color;
    position: relative
}

.sketch-btn::after {
    content: "";
    position: absolute;
    inset: 3px -4px -4px 3px;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: .25;
    pointer-events: none
}

.sketch-btn--dark {
    background: var(--green);
    color: #fff
}

.sketch-btn--lime {
    background: var(--lime);
    color: var(--green);
    border-color: var(--lime)
}

.sketch-btn--light {
    border-color: #fff;
    color: #fff;
    background: transparent
}

.sketch-btn:hover {
    transform: translateY(-3px) rotate(-.5deg)
}

.text-link {
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(18, 60, 50, .35);
    padding-bottom: 4px
}

/* hero */
.hero {
    position: relative;
    padding: 100px 0 66px;
    min-height: 820px;
    overflow: hidden
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(.1px);
    pointer-events: none
}

.hero-blob--one {
    width: 430px;
    height: 350px;
    background: #e2eee8;
    right: -110px;
    top: 70px;
    border-radius: 54% 46% 58% 42%/52% 42% 58% 48%
}

.hero-blob--two {
    width: 180px;
    height: 150px;
    background: #f5e58e;
    left: -55px;
    bottom: 70px;
    border-radius: 48% 52% 43% 57%/59% 44% 56% 41%;
    opacity: .65
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 76px;
    align-items: center;
    min-height: 565px
}

.hero h1 {
    font-size: clamp(58px, 7.2vw, 104px);
    line-height: .98;
    letter-spacing: -.07em;
    margin: 22px 0 28px;
    font-weight: 800
}

.hero-description {
    max-width: 610px;
    font-size: 17px;
    color: #4c5751;
    line-height: 1.9
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin: 36px 0 28px
}

.hero-trust {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.hero-trust span {
    font-size: 11px;
    padding: 7px 11px;
    border: 1px dashed rgba(18, 60, 50, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .5)
}

.hero-art {
    position: relative;
    min-height: 485px;
    display: grid;
    place-items: center
}

.hero-art__bubble {
    position: absolute;
    width: 410px;
    height: 350px;
    background: var(--mint);
    border-radius: 46% 54% 62% 38%/56% 42% 58% 44%;
    transform: rotate(-7deg)
}

.hero-art__paper {
    position: relative;
    width: min(385px, 90%);
    margin: 0;
    background: #fff;
    padding: 27px 27px 18px;
    border: 1px solid rgba(18, 60, 50, .14);
    box-shadow: 0 20px 45px rgba(18, 60, 50, .12);
    transform: rotate(2.2deg);
    z-index: 2
}

.hero-art__paper img {
    height: 340px;
    width: 100%;
    object-fit: contain
}

.hero-art__paper figcaption {
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--green);
    margin-top: 10px
}

.tape {
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%) rotate(-2deg);
    width: 92px;
    height: 31px;
    background: rgba(239, 222, 135, .72);
    z-index: 4
}

.hero-art__stamp {
    position: absolute;
    right: -5px;
    top: 38px;
    z-index: 4;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yellow);
    border: 2px solid var(--ink);
    font: 700 12px/1.1 "Gaegu";
    text-align: center;
    transform: rotate(8deg)
}

.hero-art__arrow {
    position: absolute;
    left: 2px;
    top: 78px;
    font: 700 72px "Gaegu";
    color: var(--green);
    transform: rotate(18deg);
    z-index: 4
}

.hero-art__note {
    position: absolute;
    left: 4px;
    bottom: 16px;
    z-index: 4;
    background: #fff;
    padding: 11px 16px;
    border: 1px solid var(--ink);
    box-shadow: 5px 5px 0 var(--yellow);
    font: 700 18px/1.05 "Gaegu";
    transform: rotate(-5deg)
}

.hero-ticket {
    margin-top: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(18, 60, 50, .18);
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: 0 9px 25px rgba(18, 60, 50, .05);
    position: relative
}

.hero-ticket::before,
.hero-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid rgba(18, 60, 50, .12)
}

.hero-ticket::before {
    left: -9px
}

.hero-ticket::after {
    right: -9px
}

.hero-ticket__check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 900
}

.hero-ticket p {
    margin: 0;
    font-size: 13px
}

.hero-ticket__code {
    font-size: 9px;
    letter-spacing: .14em;
    font-weight: 800;
    color: var(--green)
}

/* content */
.split-intro {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 120px
}

.intro-copy {
    font-size: 17px;
    color: #4e5952
}

.intro-copy p {
    margin: 0 0 22px
}

.memo-note {
    margin: 40px 0 0 auto;
    width: max-content;
    max-width: 100%;
    padding: 18px 23px;
    background: #fff5b8;
    border: 1px solid rgba(23, 32, 28, .55);
    box-shadow: 6px 6px 0 #d8e8df;
    font: 700 20px/1.3 "Gaegu";
    transform: rotate(-2deg)
}

.memo-note span {
    display: block;
    font: 800 8px "Noto Sans KR";
    letter-spacing: .16em;
    margin-bottom: 5px;
    color: var(--green)
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 400px);
    gap: 60px;
    align-items: end;
    margin-bottom: 60px
}

.section-heading.centered {
    display: block;
    max-width: 820px;
    text-align: center;
    margin: 0 auto 70px
}

.section-heading.centered .section-label {
    justify-content: center
}

.section-sidecopy {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9
}

/* services */
.service-list {
    border-top: 1px solid rgba(18, 60, 50, .2)
}

.service-row {
    display: grid;
    grid-template-columns: 58px 1fr 1.2fr 44px;
    gap: 24px;
    align-items: center;
    padding: 28px 8px;
    border-bottom: 1px solid rgba(18, 60, 50, .2);
    transition: .28s background, .28s padding, .28s color
}

.service-row:hover {
    padding-inline: 24px;
    background: var(--green);
    color: #fff
}

.service-row--accent {
    position: relative
}

.service-row--accent::before {
    content: "living care";
    position: absolute;
    right: 72px;
    top: 5px;
    font: 700 14px "Gaegu";
    color: var(--green);
    transform: rotate(-3deg)
}

.service-row:hover::before {
    color: var(--lime)
}

.service-no {
    font-size: 10px;
    letter-spacing: .14em
}

.service-row strong {
    font-size: 25px;
    letter-spacing: -.04em
}

.service-row p {
    margin: 0;
    font-size: 13px;
    color: var(--muted)
}

.service-row:hover p {
    color: #d9e8e1
}

.service-arrow {
    font-size: 24px;
    text-align: right
}

/* bubble section */
.bubble-section {
    position: relative;
    padding: 165px 0;
    background: var(--mint);
    overflow: hidden
}

.bubble-edge {
    position: absolute;
    left: -3%;
    width: 106%;
    height: 110px;
    background: var(--paper)
}

.bubble-edge--top {
    top: -73px;
    border-radius: 0 0 52% 48%/0 0 100% 100%
}

.bubble-edge--bottom {
    bottom: -73px;
    border-radius: 52% 48% 0 0/100% 100% 0 0
}

.why-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: end;
    margin-bottom: 76px
}

.why-handnote {
    font-size: 28px;
    color: var(--green);
    transform: rotate(5deg);
    border-bottom: 2px solid var(--green);
    line-height: 1
}

.illustration-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px
}

.illust-item {
    position: relative;
    text-align: center;
    padding: 28px 24px 34px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(18, 60, 50, .1);
    border-radius: 38% 62% 52% 48%/48% 42% 58% 52%
}

.illust-item:nth-child(2) {
    border-radius: 57% 43% 40% 60%/43% 54% 46% 57%
}

.illust-item:nth-child(3) {
    border-radius: 46% 54% 60% 40%/57% 45% 55% 43%
}

.mini-label {
    font-size: 8px;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--green)
}

.illust-item h3 {
    font-size: 21px;
    margin: 7px 0
}

.illust-item p {
    font-size: 13px;
    color: var(--muted)
}

.doodle-icon {
    height: 150px;
    position: relative;
    width: 180px;
    margin: auto
}

.doodle-icon--spray span {
    position: absolute;
    left: 59px;
    bottom: 18px;
    width: 70px;
    height: 90px;
    border: 4px solid var(--ink);
    border-radius: 14px 14px 25px 25px;
    background: #7ec69e
}

.doodle-icon--spray span::before {
    content: "";
    position: absolute;
    left: -11px;
    top: -27px;
    width: 89px;
    height: 25px;
    border: 4px solid var(--ink);
    background: #fff;
    border-radius: 7px
}

.doodle-icon--spray i {
    position: absolute;
    left: 22px;
    top: 20px;
    font-style: normal;
    font-size: 32px;
    color: #d9b935
}

.doodle-icon--window span {
    position: absolute;
    left: 31px;
    top: 12px;
    width: 118px;
    height: 105px;
    border: 5px solid var(--ink);
    background: #fff
}

.doodle-icon--window span::before,
.doodle-icon--window span::after {
    content: "";
    position: absolute;
    background: var(--ink)
}

.doodle-icon--window span::before {
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%
}

.doodle-icon--window span::after {
    top: 50%;
    left: 0;
    height: 4px;
    width: 100%
}

.doodle-icon--window i {
    position: absolute;
    right: 3px;
    bottom: 28px;
    width: 85px;
    height: 11px;
    border: 3px solid var(--ink);
    background: #86b9c8;
    transform: rotate(-20deg)
}

.doodle-icon--window i::after {
    content: "";
    position: absolute;
    left: 39px;
    top: 5px;
    width: 10px;
    height: 55px;
    border: 3px solid var(--ink);
    background: #65af87
}

.doodle-icon--bucket span {
    position: absolute;
    left: 39px;
    bottom: 15px;
    width: 108px;
    height: 78px;
    border: 5px solid var(--ink);
    background: #8ab9c9;
    border-radius: 7px 7px 30px 30px
}

.doodle-icon--bucket span::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: -53px;
    height: 65px;
    border: 5px solid var(--ink);
    border-bottom: 0;
    border-radius: 60px 60px 0 0
}

.doodle-icon--bucket i {
    position: absolute;
    right: 22px;
    top: 20px;
    width: 65px;
    height: 35px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    transform: rotate(12deg);
    border-radius: 50%
}

/* difference */
.difference-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
    align-items: start
}

.difference-heading {
    position: sticky;
    top: 120px
}

.scribble-circle {
    margin-top: 42px;
    width: 88px;
    height: 88px;
    border: 2px solid var(--green);
    border-radius: 51% 49% 48% 52%;
    display: grid;
    place-items: center;
    text-align: center;
    font: 700 28px/1 "Gaegu";
    transform: rotate(-9deg)
}

.scribble-circle small {
    font-size: 11px
}

.difference-list {
    border-top: 1px solid rgba(18, 60, 50, .2)
}

.difference-item {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 22px;
    align-items: start;
    padding: 31px 0;
    border-bottom: 1px solid rgba(18, 60, 50, .2)
}

.number-stamp {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800
}

.difference-item h3 {
    font-size: 23px;
    margin: 0 0 8px
}

.difference-item p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 610px
}

.tiny-note {
    font: 700 15px "Gaegu";
    color: var(--green);
    transform: rotate(4deg);
    padding-top: 8px
}

/* brand signature scene */
.brand-scene {
    position: relative;
    min-height: 760px;
    background: var(--green-dark);
    color: #fff;
    display: grid;
    align-items: center;
    overflow: hidden
}

.brand-scene__inner {
    position: relative;
    z-index: 2;
    padding: 130px 0
}

.brand-scene h2 {
    font: 400 clamp(74px, 11vw, 164px)/.72 "DM Serif Display", serif;
    letter-spacing: -.065em;
    margin: 34px 0 38px
}

.brand-scene h2 span {
    display: block
}

.brand-scene h2 span:nth-child(2) {
    margin-left: 18%
}

.brand-scene h2 .lime-word {
    color: var(--lime);
    margin-left: 5%
}

.brand-scene p {
    font-size: 16px;
    color: #d2e2da
}

.brand-scene__bubble {
    position: absolute;
    border-radius: 50%;
    background: #17493c;
    opacity: .72
}

.brand-scene__bubble--a {
    width: 480px;
    height: 430px;
    right: -150px;
    top: -90px;
    border-radius: 58% 42% 48% 52%
}

.brand-scene__bubble--b {
    width: 360px;
    height: 290px;
    left: -130px;
    bottom: -80px;
    background: #235f4e
}

.brand-scene__spark {
    position: absolute;
    right: 12%;
    bottom: 16%;
    font-size: 90px;
    color: var(--yellow);
    transform: rotate(12deg)
}

.brand-scene__hand {
    position: absolute;
    right: 5%;
    top: 42%;
    font-size: 28px;
    color: #fff;
    transform: rotate(-9deg);
    line-height: .9
}

/* process */
.process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding-top: 38px
}

.process-line {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 2px;
    background: #dfe4e1
}

.process-line span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--green)
}

.process-card {
    position: relative;
    padding: 24px 18px 22px;
    border: 1px solid rgba(18, 60, 50, .14);
    background: #fff;
    min-height: 190px
}

.process-card:nth-child(even) {
    transform: translateY(10px) rotate(.5deg)
}

.process-card b {
    font: 400 31px "DM Serif Display";
    color: var(--green)
}

.process-card h3 {
    font-size: 17px;
    margin: 25px 0 8px
}

.process-card p {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.check-ribbon {
    margin: 42px auto 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 22px;
    background: var(--yellow);
    border: 1px solid rgba(23, 32, 28, .5);
    font: 700 18px "Gaegu";
    transform: rotate(-1deg)
}

/* result */
.result-section {
    background: #f2f4f1
}

.ba-stage {
    height: 590px;
    position: relative;
    overflow: hidden;
    background: #d9e5df;
    border: 1px solid rgba(18, 60, 50, .16);
    border-radius: 4px;
    box-shadow: var(--shadow);
    user-select: none
}

.ba-layer {
    position: absolute;
    inset: 0
}

.ba-after {
    background: linear-gradient(135deg, #eef7f2, #dceee4)
}

.ba-before {
    width: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #c7b8a4, #8e806f);
    border-right: 2px solid rgba(23, 32, 28, .75)
}

.ba-layer>span {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(23, 32, 28, .88);
    color: #fff;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    z-index: 3
}

.ba-after>span {
    left: auto;
    right: 20px;
    background: var(--green)
}

.fake-clean-space,
.fake-dirty-space {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.3fr .8fr .7fr;
    gap: 22px;
    padding: 90px 10%
}

.fake-clean-space i,
.fake-dirty-space i {
    border: 4px solid rgba(23, 32, 28, .8);
    border-bottom-width: 10px
}

.fake-clean-space i {
    background: rgba(255, 255, 255, .72)
}

.fake-dirty-space i {
    background: repeating-linear-gradient(45deg, #8e765d 0 12px, #9f886c 12px 24px);
    filter: saturate(.5)
}

.ba-handle {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 110px;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    cursor: ew-resize;
    padding: 0;
    z-index: 5
}

.handle-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(23, 32, 28, .75);
    transform: translateX(-50%)
}

.ba-handle img {
    position: absolute;
    width: 160px;
    max-width: none;
    left: 50%;
    top: 42%;
    transform: translate(-48%, -50%) rotate(90deg);
    filter: drop-shadow(0 10px 14px rgba(21, 42, 34, .15))
}

.ba-hint {
    text-align: center;
    margin-top: 22px;
    font: 700 18px "Gaegu";
    color: var(--green)
}

/* promise */
.promise-scene {
    position: relative;
    overflow: hidden;
    background: var(--green);
    color: #fff;
    padding: 150px 0
}

.promise-scene__bubble {
    position: absolute;
    width: 660px;
    height: 510px;
    right: -210px;
    top: -120px;
    background: #1b5243;
    border-radius: 49% 51% 58% 42%/47% 58% 42% 53%
}

.promise-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 120px;
    align-items: center
}

.promise-title {
    font: 400 clamp(72px, 9vw, 138px)/.76 "DM Serif Display";
    margin: 25px 0 40px;
    letter-spacing: -.05em
}

.promise-title span {
    color: var(--lime)
}

.promise-grid p {
    font-size: 16px;
    color: #d6e5de;
    max-width: 620px
}

.promise-grid strong {
    color: #fff
}

.promise-check {
    justify-self: center;
    text-align: center;
    position: relative
}

.promise-check__circle {
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border-radius: 48% 52% 45% 55%;
    background: var(--lime);
    color: var(--green);
    font-size: 82px;
    font-weight: 900;
    transform: rotate(-8deg);
    box-shadow: 8px 8px 0 #0a2b23
}

.promise-check__hand {
    position: absolute;
    right: -65px;
    top: -25px;
    color: #fff;
    font-size: 23px;
    line-height: .9;
    transform: rotate(10deg)
}

.promise-check>span {
    display: block;
    margin-top: 26px;
    font-size: 14px
}

/* reviews */
.reviews {
    background-color: var(--cream)
}

.review-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.review-note {
    margin: 0;
    padding: 38px 30px;
    background: #fff;
    border: 1px solid rgba(18, 60, 50, .15);
    box-shadow: 0 15px 34px rgba(18, 60, 50, .07);
    position: relative
}

.review-note::before {
    content: "“";
    position: absolute;
    left: 24px;
    top: 3px;
    font: 400 62px "DM Serif Display";
    color: #d4e2da
}

.review-note p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    margin: 25px 0 30px
}

.review-note footer {
    font-size: 10px;
    color: var(--muted)
}

.review-note--tilt-a {
    transform: rotate(-1.4deg)
}

.review-note--tilt-b {
    transform: rotate(1.2deg)
}

/* faq */
.faq-wrap {
    max-width: 960px
}

.faq-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: end
}

.faq-doodle {
    font-size: 27px;
    color: var(--green);
    transform: rotate(-6deg);
    line-height: .9
}

.faq-list {
    margin-top: 58px;
    border-top: 1px solid rgba(18, 60, 50, .22)
}

.faq-item {
    border-bottom: 1px solid rgba(18, 60, 50, .22)
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 0;
    font-size: 17px;
    font-weight: 700
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary span {
    font-size: 23px;
    color: var(--green);
    transition: .2s transform
}

.faq-item[open] summary span {
    transform: rotate(45deg)
}

.faq-item p {
    margin: 0 0 27px;
    color: var(--muted);
    font-size: 14px
}

/* contact */
.contact-cta {
    position: relative;
    background: var(--green-dark);
    color: #fff;
    padding: 170px 0 130px;
    overflow: hidden
}

.contact-cta__edge {
    position: absolute;
    left: -3%;
    top: -65px;
    width: 106%;
    height: 125px;
    background: var(--paper);
    border-radius: 0 0 50% 50%/0 0 100% 100%
}

.contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start
}

.contact-copy h2 {
    font-size: clamp(52px, 6vw, 82px);
    line-height: 1.04;
    letter-spacing: -.055em;
    margin: 22px 0
}

.contact-copy h2 span {
    color: var(--lime)
}

.contact-copy p {
    color: #ccddd5;
    max-width: 520px
}

.contact-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px
}

.contact-form {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    background: #fff;
    color: var(--ink);
    padding: 36px;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 10px 10px 0 var(--lime);
    transform: rotate(.6deg)
}

.form-tape {
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%) rotate(-2deg);
    width: 95px;
    height: 29px;
    background: rgba(239, 222, 135, .82)
}

.contact-form label {
    display: grid;
    gap: 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--green)
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid #cfd7d2;
    background: #fafbf9;
    padding: 12px 10px;
    outline: none
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--green);
    background: #f3f7f4
}

.contact-form .full {
    grid-column: 1/-1
}

.contact-form button {
    justify-self: start
}

/* footer */
.site-footer {
    position: relative;
    background: #071f19;
    color: #f5f2e8;
    padding: 110px 0 30px;
    overflow: hidden
}

.footer-bubble {
    position: absolute;
    right: -90px;
    top: -100px;
    width: 350px;
    height: 270px;
    background: #0d3027;
    border-radius: 52% 48% 57% 43%
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 60px
}

.footer-grid>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
}

.footer-brand {
    position: relative
}

.footer-brand strong {
    font: 400 42px/.84 "DM Serif Display"
}

.footer-brand p {
    font-size: 12px;
    color: #b9ccc2
}

.footer-hand {
    position: absolute;
    left: 185px;
    bottom: 4px;
    color: var(--lime);
    font-size: 18px;
    line-height: .9;
    transform: rotate(-5deg)
}

.footer-grid b {
    font-size: 9px;
    letter-spacing: .16em;
    color: var(--lime)
}

.footer-grid a {
    font-size: 12px;
    color: #dde7e2
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 78px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 9px;
    color: #9bb0a6
}

.reveal {
    will-change: transform, opacity
}

@media(max-width:960px) {
    .desktop-nav {
        display: none
    }

    .menu-toggle {
        display: grid;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(18, 60, 50, .2);
        border-radius: 50%;
        background: transparent;
        place-content: center;
        gap: 6px
    }

    .menu-toggle span {
        width: 18px;
        height: 1.5px;
        background: var(--green)
    }

    .mobile-nav {
        padding: 14px 24px 22px;
        border-top: 1px solid rgba(18, 60, 50, .1);
        background: var(--paper)
    }

    .mobile-nav:not([hidden]) {
        display: grid
    }

    .mobile-nav a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(18, 60, 50, .08);
        font-size: 12px
    }

    .hero-grid,
    .split-intro,
    .difference-layout,
    .promise-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 65px
    }

    .hero {
        min-height: auto
    }

    .hero-art {
        min-height: 440px
    }

    .difference-heading {
        position: static
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .illustration-row {
        grid-template-columns: 1fr
    }

    .why-heading {
        grid-template-columns: 1fr
    }

    .why-handnote {
        justify-self: end
    }

    .process-track {
        grid-template-columns: 1fr 1fr
    }

    .process-line {
        display: none
    }

    .review-board {
        grid-template-columns: 1fr 1fr
    }

    .review-note:last-child {
        grid-column: 1/-1
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr
    }

    .footer-grid>div:last-child {
        grid-column: 2/4
    }

    .brand-scene__hand {
        position: static;
        margin-top: 25px
    }

    .promise-check {
        justify-self: start
    }

    .contact-form {
        transform: none
    }
}

@media(max-width:640px) {
    .container {
        width: min(100% - 30px, 1180px)
    }

    .section-space {
        padding: 100px 0
    }

    .header-inner {
        width: min(100% - 30px, 1180px);
        height: 68px
    }

    .brand {
        font-size: 10px
    }

    .hero {
        padding: 68px 0 48px
    }

    .hero h1 {
        font-size: 52px
    }

    .hero-description {
        font-size: 14px
    }

    .hand-kicker {
        font-size: 17px
    }

    .hero-art {
        min-height: 370px
    }

    .hero-art__paper {
        width: 82%;
        padding: 20px
    }

    .hero-art__paper img {
        height: 270px
    }

    .hero-art__bubble {
        width: 320px;
        height: 290px
    }

    .hero-art__stamp {
        width: 74px;
        height: 74px;
        font-size: 10px;
        right: 0
    }

    .hero-art__arrow {
        font-size: 52px
    }

    .hero-art__note {
        font-size: 16px
    }

    .hero-ticket {
        grid-template-columns: auto 1fr
    }

    .hero-ticket__code {
        grid-column: 2
    }

    .display-title {
        font-size: 42px
    }

    .service-row {
        grid-template-columns: 42px 1fr 32px;
        gap: 12px;
        padding: 22px 3px
    }

    .service-row p {
        display: none
    }

    .service-row strong {
        font-size: 21px
    }

    .service-row--accent::before {
        display: none
    }

    .bubble-section {
        padding: 125px 0
    }

    .illustration-row {
        gap: 18px
    }

    .difference-item {
        grid-template-columns: 45px 1fr
    }

    .tiny-note {
        display: none
    }

    .brand-scene {
        min-height: 620px
    }

    .brand-scene__inner {
        padding: 100px 0
    }

    .brand-scene h2 {
        font-size: 62px;
        line-height: .8
    }

    .brand-scene h2 span:nth-child(2),
    .brand-scene h2 .lime-word {
        margin-left: 0
    }

    .brand-scene__spark {
        font-size: 56px
    }

    .process-track {
        grid-template-columns: 1fr
    }

    .process-card:nth-child(even) {
        transform: none
    }

    .check-ribbon {
        font-size: 16px;
        gap: 12px
    }

    .ba-stage {
        height: 390px
    }

    .ba-handle img {
        width: 122px
    }

    .fake-clean-space,
    .fake-dirty-space {
        padding: 78px 7%;
        gap: 9px
    }

    .promise-scene {
        padding: 110px 0
    }

    .promise-title {
        font-size: 64px
    }

    .promise-check__circle {
        width: 145px;
        height: 145px;
        font-size: 65px
    }

    .promise-check__hand {
        right: -90px;
        top: -20px;
        font-size: 19px
    }

    .review-board {
        grid-template-columns: 1fr
    }

    .review-note:last-child {
        grid-column: auto
    }

    .faq-heading {
        grid-template-columns: 1fr
    }

    .faq-doodle {
        justify-self: end
    }

    .contact-cta {
        padding: 135px 0 95px
    }

    .contact-copy h2 {
        font-size: 48px
    }

    .contact-form {
        grid-template-columns: 1fr;
        padding: 28px 20px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-grid>div:last-child {
        grid-column: auto
    }

    .footer-hand {
        position: static;
        margin-top: 8px
    }

    .footer-bottom {
        flex-direction: column
    }

    .wipe-intro__squeegee {
        width: 220px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal {
        will-change: auto
    }

    .wipe-intro {
        display: none
    }

    .sketch-btn,
    .service-row {
        transition: none
    }
}

/* =========================================================
   CHECK SYSTEM / CONVERSION FLOW ADDITIONS
   ========================================================= */
.check-system {
    position: relative;
    overflow: hidden;
    background: #e7f0eb;
    padding: 155px 0 105px;
    color: var(--ink)
}

.check-system__bubble {
    position: absolute;
    pointer-events: none;
    border-radius: 50%
}

.check-system__bubble--one {
    width: 520px;
    height: 430px;
    right: -160px;
    top: -130px;
    background: #d9f06f;
    opacity: .52;
    border-radius: 52% 48% 57% 43%/46% 58% 42% 54%
}

.check-system__bubble--two {
    width: 310px;
    height: 260px;
    left: -130px;
    bottom: 120px;
    background: #f1df65;
    opacity: .35;
    border-radius: 45% 55% 48% 52%/58% 43% 57% 42%
}

.check-system__grid {
    position: relative;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 95px;
    align-items: center
}

.check-system .hand-kicker--light {
    color: var(--green)
}

.check-system .section-label--light {
    color: var(--green-2)
}

.check-system__copy h2 {
    font-size: clamp(52px, 6.3vw, 88px);
    line-height: 1.03;
    letter-spacing: -.065em;
    margin: 20px 0 26px;
    font-weight: 800
}

.check-system__copy h2 span {
    display: inline;
    position: relative;
    z-index: 0
}

.check-system__copy h2 span::after {
    content: "";
    position: absolute;
    left: -.02em;
    right: -.02em;
    bottom: .08em;
    height: .26em;
    background: var(--yellow);
    z-index: -1;
    transform: rotate(-1deg)
}

.check-system__lead {
    font-size: 17px;
    color: #53615a;
    max-width: 610px;
    margin: 0 0 28px
}

.check-system__statement {
    font: 700 27px/1.28 "Gaegu", cursive;
    color: var(--green);
    margin: 30px 0
}

.check-system__statement strong {
    font-size: 34px;
    color: var(--ink)
}

.check-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 650px
}

.check-benefits span {
    padding: 8px 12px;
    border: 1px dashed rgba(18, 60, 50, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 700;
    color: var(--green)
}

.inspection-demo {
    position: relative;
    min-height: 720px;
    display: grid;
    place-items: center
}

.inspection-note {
    position: absolute;
    right: -4px;
    top: 34px;
    z-index: 5;
    font: 700 22px/.95 "Gaegu", cursive;
    color: var(--green);
    transform: rotate(6deg);
    text-align: center
}

.phone-shell {
    position: relative;
    width: min(390px, 88%);
    background: #102f27;
    border: 2px solid #071e19;
    border-radius: 38px;
    padding: 12px;
    box-shadow: 22px 26px 0 rgba(18, 60, 50, .13), 0 34px 70px rgba(18, 60, 50, .18);
    transform: rotate(1.2deg)
}

.phone-shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 94px;
    height: 19px;
    border-radius: 999px;
    background: #071e19;
    z-index: 5
}

.phone-top {
    height: 55px;
    padding: 18px 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #dcebe4;
    font-size: 8px;
    letter-spacing: .08em
}

.phone-top>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime)
}

.phone-top i {
    font-style: normal;
    letter-spacing: 2px
}

.phone-screen {
    background: #f9faf6;
    border-radius: 27px;
    padding: 22px 17px 18px;
    min-height: 610px;
    color: var(--ink)
}

.inspection-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid #d8dfda;
    padding-bottom: 14px
}

.inspection-meta>div {
    display: grid;
    gap: 2px
}

.inspection-meta small {
    font-size: 8px;
    color: var(--muted)
}

.inspection-meta strong {
    font-size: 13px
}

.status-pill {
    font-size: 8px;
    font-weight: 800;
    background: #e5f3a8;
    color: var(--green);
    padding: 5px 8px;
    border-radius: 999px
}

.inspection-progress {
    padding: 15px 0
}

.inspection-progress>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px
}

.inspection-progress strong {
    font-size: 18px;
    color: var(--green)
}

.inspection-progress>i {
    display: block;
    height: 7px;
    background: #dfe6e1;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 7px
}

.inspection-progress>i>b {
    display: block;
    width: 82%;
    height: 100%;
    background: var(--green);
    border-radius: inherit;
    transition: width .55s ease
}

.room-card {
    background: #fff;
    border: 1px solid #dce2de;
    border-radius: 16px;
    padding: 13px 13px 9px;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(18, 60, 50, .04)
}

.room-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px
}

.room-card__head strong {
    font-size: 12px
}

.room-card__head span {
    font-size: 8px;
    color: var(--muted)
}

.room-card ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.room-card li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 5px;
    border-top: 1px solid #eef1ee;
    padding: 8px 0;
    font-size: 9px
}

.room-card li i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #def0e6;
    color: var(--green);
    font-style: normal;
    font-weight: 900
}

.room-card li em {
    font-style: normal;
    color: #5c7568;
    font-size: 8px
}

.room-card li.needs-work i {
    background: #fff0bd;
    color: #8b6410
}

.room-card li.needs-work em {
    color: #9b6d00;
    font-weight: 800
}

.room-card.is-resolved li.needs-work i {
    background: #def0e6;
    color: var(--green)
}

.room-card.is-resolved li.needs-work em {
    color: #5c7568
}

.room-card.is-resolved .rework-box {
    background: #edf6f0;
    border-color: #bddac9
}

.rework-box {
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed #e1bd53;
    border-radius: 10px;
    background: #fff8da
}

.rework-box small {
    font-size: 7px;
    color: #937217
}

.rework-box p {
    font-size: 9px;
    margin: 3px 0 8px;
    line-height: 1.5
}

.rework-box button {
    border: 0;
    background: var(--green);
    color: #fff;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    padding: 7px 10px;
    cursor: pointer
}

.rework-box button:disabled {
    background: #6b8579;
    cursor: default
}

.phone-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #dfe5e0
}

.phone-action span {
    font-size: 8px;
    color: var(--muted)
}

.phone-action button {
    border: 0;
    border-radius: 999px;
    background: var(--lime);
    color: var(--green);
    padding: 8px 12px;
    font-size: 8px;
    font-weight: 900
}

.check-flow {
    position: relative;
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px
}

.check-flow__item {
    min-width: 0;
    padding: 18px 12px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(18, 60, 50, .18);
    text-align: center;
    border-radius: 12px;
    transition: .3s background, .3s color, .3s transform, .3s border
}

.check-flow__item b {
    display: block;
    font: 400 25px "DM Serif Display", serif;
    color: var(--green);
    margin-bottom: 3px
}

.check-flow__item span {
    font-size: 10px;
    font-weight: 800
}

.check-flow>i {
    font-style: normal;
    color: #759085;
    font-size: 18px
}

.check-flow__item.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: translateY(-5px)
}

.check-flow__item.is-active b {
    color: var(--lime)
}

/* make the signature sections alternate instead of stacking dark blocks */
.promise-scene {
    background: var(--cream);
    color: var(--ink)
}

.promise-scene__bubble {
    background: #dce9e2
}

.promise-scene .section-label--light {
    color: var(--green-2)
}

.promise-title {
    color: var(--green-dark)
}

.promise-title span {
    color: var(--green)
}

.promise-grid p {
    color: #56615b
}

.promise-grid strong {
    color: var(--ink)
}

.promise-check__circle {
    background: var(--green);
    color: var(--lime);
    box-shadow: 8px 8px 0 #cdddce
}

.promise-check__hand {
    color: var(--green)
}

.promise-check>span {
    color: var(--green-dark);
    font-weight: 700
}

/* quote guide */
.quote-guide {
    padding: 170px 0
}

.quote-guide__grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 110px;
    align-items: center
}

.quote-guide__lead {
    max-width: 580px;
    color: #5e6a63;
    font-size: 15px;
    margin-top: 28px
}

.quote-paper {
    position: relative;
    background: #fffdf6;
    border: 1px solid rgba(18, 60, 50, .24);
    padding: 38px 34px 30px;
    box-shadow: 10px 10px 0 #c9dfd2;
    transform: rotate(1deg)
}

.quote-paper__tape {
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%) rotate(-3deg);
    width: 96px;
    height: 29px;
    background: rgba(241, 223, 101, .78)
}

.quote-paper__title {
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--green);
    margin-bottom: 18px
}

.quote-paper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #d8dfda
}

.quote-paper li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #d8dfda;
    padding: 13px 0
}

.quote-paper li b {
    font: 400 22px "DM Serif Display", serif;
    color: var(--green)
}

.quote-paper li span {
    font-size: 13px;
    font-weight: 700
}

.quote-paper p {
    margin: 22px 0 0;
    padding: 13px 15px;
    background: #f3f5ef;
    font-size: 11px;
    line-height: 1.7
}

.quote-paper p strong {
    color: var(--green)
}

@media(max-width:960px) {

    .check-system__grid,
    .quote-guide__grid {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .inspection-demo {
        min-height: auto;
        padding: 20px 0 10px
    }

    .inspection-note {
        right: 5%;
        top: 0
    }

    .check-flow {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }

    .check-flow>i {
        display: none
    }
}

@media(max-width:640px) {
    .check-system {
        padding: 110px 0 75px
    }

    .check-system__copy h2 {
        font-size: 46px
    }

    .check-system__statement {
        font-size: 23px
    }

    .check-system__statement strong {
        font-size: 28px
    }

    .phone-shell {
        width: min(360px, 96%);
        border-radius: 31px;
        padding: 9px;
        transform: none
    }

    .phone-screen {
        min-height: 0;
        padding: 19px 13px 15px;
        border-radius: 23px
    }

    .inspection-note {
        position: static;
        justify-self: end;
        margin: 0 8% 10px 0
    }

    .check-flow {
        grid-template-columns: 1fr 1fr;
        margin-top: 55px
    }

    .check-flow__item {
        padding: 14px 8px
    }

    .quote-guide {
        padding: 125px 0
    }

    .quote-guide__grid {
        gap: 42px
    }

    .quote-paper {
        padding: 32px 22px 24px;
        transform: none
    }
}

/* =========================================================
   DGC DISTINCT VISUAL LANGUAGE
   새로고침과 겹치던 thin-line eyebrow / unicode arrow 문법 제거
   ========================================================= */
.dgc-tab {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-height: 30px;
    padding: 7px 13px 7px 28px;
    border: 1px solid rgba(18, 60, 50, .28);
    background: #fffdf6;
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    border-radius: 4px 12px 4px 10px;
    box-shadow: 3px 3px 0 rgba(18, 60, 50, .09);
    transform: rotate(-.7deg)
}

.dgc-tab::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--lime);
    border: 1px solid var(--green)
}

.dgc-tab::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: -5px;
    width: 18px;
    height: 7px;
    background: rgba(241, 223, 101, .55);
    transform: rotate(-5deg);
    z-index: -1
}

.dgc-tab--light {
    background: var(--lime);
    color: var(--green);
    border-color: var(--lime);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .18)
}

.dgc-tab--light::before {
    background: #fff;
    border-color: var(--green)
}

.dgc-tab--light::after {
    display: none
}

/* legacy eyebrow classes are intentionally neutralized if any remain */
.section-label,
.eyebrow {
    display: none !important
}

.hand-kicker {
    position: relative;
    display: inline-block;
    padding-bottom: 8px
}

.hand-kicker::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 8%;
    bottom: 2px;
    height: 6px;
    border-bottom: 2px solid currentColor;
    border-radius: 50%;
    transform: rotate(-2deg);
    opacity: .8
}

.btn-go {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--lime);
    color: var(--green);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1
}

.sketch-btn--lime .btn-go {
    background: var(--green);
    color: #fff
}

.sketch-btn--light .btn-go {
    background: #fff;
    color: var(--green)
}

.link-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em
}

.text-link {
    border-bottom: 0;
    padding-bottom: 0;
    gap: 9px
}

.text-link::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1px solid var(--green);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--paper)
}

.hero-art__spark {
    position: absolute;
    left: 0;
    top: 74px;
    z-index: 5;
    font-size: 58px;
    color: var(--yellow);
    transform: rotate(-12deg);
    text-shadow: 1px 1px 0 var(--ink)
}

.service-row {
    grid-template-columns: 58px 1fr 1.2fr 76px
}

.service-go {
    justify-self: end;
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 30px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    transition: .25s background, .25s color, .25s transform
}

.service-row:hover .service-go {
    background: var(--lime);
    color: var(--green);
    border-color: var(--lime);
    transform: rotate(-3deg)
}

.service-row--accent::before {
    content: "living care";
    padding: 2px 7px;
    border: 1px dashed currentColor;
    border-radius: 999px;
    right: 84px;
    top: 4px
}

.ba-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    font-size: 10px !important;
    letter-spacing: .12em;
    font-weight: 900;
    color: var(--green) !important
}

.ba-hint .drag-dot {
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--paper)
}

.ba-hint .drag-line {
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: .35
}

.ba-hint b {
    font-size: 9px;
    letter-spacing: .15em
}

.check-flow {
    position: relative
}

.flow-connector {
    display: block !important;
    flex: 1;
    min-width: 28px;
    height: 1px !important;
    background: none !important;
    border-top: 1px dashed rgba(18, 60, 50, .45);
    position: relative
}

.flow-connector::after {
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    border: 1px solid var(--green)
}

.header-cta {
    gap: 9px
}

.header-cta__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    border: 1px solid var(--green)
}

.top-mark {
    display: inline-grid;
    place-items: center;
    margin-left: 8px;
    min-width: 34px;
    height: 21px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 8px;
    letter-spacing: .08em
}

/* quote block gets its own receipt/checklist identity instead of old eyebrow style */
.quote-paper__title {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px !important;
    padding: 5px 9px !important;
    background: var(--green) !important;
    color: #fff !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    letter-spacing: -.01em !important
}

.quote-paper__title::before {
    content: "#";
    color: var(--lime);
    font-weight: 900
}

/* tiny English notes become sticker-like, not arrow/caption language */
.tiny-note {
    padding: 4px 7px;
    border: 1px dashed rgba(18, 60, 50, .35);
    border-radius: 999px;
    background: #fffdf6;
    font-size: 8px;
    letter-spacing: .06em
}

.inspection-note,
.faq-doodle {
    border-bottom: 0 !important
}

.inspection-note::after,
.faq-doodle::after {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    margin-top: 2px;
    border-bottom: 2px solid currentColor;
    border-radius: 50%;
    transform: rotate(-3deg)
}

@media(max-width:760px) {
    .service-row {
        grid-template-columns: 42px 1fr 54px
    }

    .service-go {
        width: 48px;
        height: 28px
    }

    .flow-connector {
        min-width: 18px
    }

    .dgc-tab {
        font-size: 10px;
        padding: 6px 11px 6px 26px
    }
}

/* =========================================================
   DGC BUTTON SYSTEM — CauseHouse-inspired compact CTA language
   Reference idea: compact pill, hard outline, vivid fill, small offset shadow.
   The rest of the DGC visual language stays original.
   ========================================================= */
:root {
    --btn-ink: #10271f;
    --btn-lime: #c9f24a;
    --btn-cream: #fbf7ed;
}

/* Main CTA */
.sketch-btn {
    min-height: 42px;
    padding: 0 18px;
    gap: 8px;
    border: 1.5px solid var(--btn-ink);
    border-radius: 999px;
    background: var(--btn-cream);
    color: var(--btn-ink);
    box-shadow: 2px 3px 0 var(--btn-ink);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1;
    transform: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.sketch-btn::after {
    display: none
}

.sketch-btn:hover {
    transform: translate(1px, 2px);
    box-shadow: 1px 1px 0 var(--btn-ink);
}

.sketch-btn:active {
    transform: translate(2px, 3px);
    box-shadow: 0 0 0 var(--btn-ink);
}

.sketch-btn--dark,
.sketch-btn--lime {
    background: var(--btn-lime);
    color: var(--btn-ink);
    border-color: var(--btn-ink);
}

.sketch-btn--light {
    background: var(--btn-cream);
    color: var(--btn-ink);
    border-color: var(--btn-ink);
}

.sketch-btn.full {
    width: 100%
}

.btn-go {
    display: none !important
}

/* Secondary text CTA becomes the outlined companion button */
.text-link {
    min-height: 42px;
    padding: 0 17px;
    border: 1.5px solid var(--btn-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--btn-ink);
    box-shadow: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -.01em;
    gap: 0;
    transition: background .16s ease, transform .16s ease;
}

.text-link::before {
    display: none !important
}

.text-link:hover {
    background: #fff;
    transform: translateY(-1px)
}

.link-tag {
    display: none !important
}

/* Header button */
.header-cta {
    min-height: 34px;
    padding: 0 15px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--btn-ink) !important;
    border-radius: 999px !important;
    background: var(--btn-lime) !important;
    color: var(--btn-ink) !important;
    box-shadow: 2px 2px 0 var(--btn-ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
    transform: none !important;
    transition: transform .16s ease, box-shadow .16s ease;
}

.header-cta:hover {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0 var(--btn-ink)
}

.header-cta__dot {
    display: none !important
}

/* Tiny actions inside service rows: same family, quieter */
.service-go {
    width: auto;
    min-width: 54px;
    height: 28px;
    padding: 0 10px;
    border: 1.25px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .10em;
    box-shadow: none;
    transform: none;
}

.service-row:hover .service-go {
    background: var(--btn-lime);
    color: var(--btn-ink);
    border-color: var(--btn-ink);
    transform: none;
    box-shadow: 1px 2px 0 rgba(0, 0, 0, .45);
}

/* Contact block buttons need dark-background contrast but keep same identity */
.contact-cta .sketch-btn--light {
    background: #f7f2e7;
    color: var(--btn-ink);
    border-color: var(--btn-ink);
}

.contact-cta .sketch-btn--lime {
    background: var(--btn-lime);
    color: var(--btn-ink);
}

/* Footer control */
.footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.top-mark {
    display: none !important
}

/* In-app inspection controls: related visual DNA without overpowering the mockup */
.rework-box button,
.phone-action button {
    border: 1px solid #17372d;
    border-radius: 999px;
    box-shadow: 1px 2px 0 #17372d;
    font-weight: 900;
}

.rework-box button {
    background: #17372d;
    color: #fff
}

.phone-action button {
    background: var(--btn-lime);
    color: #17372d
}

@media(max-width:760px) {

    .sketch-btn,
    .text-link {
        min-height: 46px;
        padding-inline: 18px;
        font-size: 12px
    }

    .header-cta {
        min-height: 36px
    }
}