/*
Theme Name: FrameMint
Theme URI: https://framemintstudio.com
Author: FrameMint Studios
Author URI: https://framemintstudio.com
Description: Custom lightweight WordPress theme for FrameMint Studios.
Version: 1.0
Text Domain: framemint
*/

/* body {
    margin: 0;
    font-family: Arial, sans-serif;
} */

:root {
    --paper: #faf7f0;
    --paper-deep: #f1eadf;
    --white: #ffffff;
    --forest: #16382c;
    --forest-soft: #1f4c3b;
    --clay: #c85a3c;
    --clay-deep: #a8462f;
    --sage: #d9e5dd;
    --sage-dark: #a6bbae;
    --ink: #1d1d1d;
    --muted: #6f6a61;
    --line: #e5ddd0;
    --gold: #a68a4b;
    --shadow: 0 24px 60px rgba(22, 56, 44, 0.11);
    --radius-xl: 32px;
    --radius-2xl: 44px;
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.serif,
h1,
h2,
h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
}

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

.section {
    padding: 108px 0;
    position: relative;
}

.section-tight {
    padding: 78px 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--forest);
    background: rgba(217, 229, 221, 0.75);
    border: 1px solid rgba(22, 56, 44, 0.1);
}

.eyebrow.dark {
    color: var(--sage);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--clay);
    box-shadow: 0 0 0 6px rgba(200, 90, 60, 0.13);
}

.section-head {
    max-width: 760px;
    margin-bottom: 56px;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-title {
    margin: 16px 0 16px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 0.98;
    color: var(--forest);
    letter-spacing: -0.03em;
}

.section-title span,
.hero-title span {
    color: var(--clay);
    font-style: italic;
}

.section-copy {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(250, 247, 240, 0.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(229, 221, 208, 0.8);
}

.nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--forest);
    box-shadow: 0 16px 34px rgba(22, 56, 44, 0.2);
}

.brand-name {
    color: var(--forest);
    font-size: 24px;
    letter-spacing: -0.02em;
}

.brand-name small {
    color: var(--clay);
    font-size: 1em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    color: #655f57;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nav-links a {
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--forest);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    min-height: 48px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 800;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--clay);
    color: var(--white);
    box-shadow: 0 18px 36px rgba(200, 90, 60, 0.22);
}

.btn-primary:hover {
    background: var(--clay-deep);
}

.btn-forest {
    background: var(--forest);
    color: var(--white);
    box-shadow: 0 18px 36px rgba(22, 56, 44, 0.18);
}

.btn-forest:hover {
    background: #102a21;
}

.btn-ghost {
    background: var(--white);
    color: var(--forest);
    border: 1px solid var(--line);
}

.btn-ghost:hover {
    background: var(--forest);
    color: var(--white);
}

.mobile-toggle {
    display: none;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--forest);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: fixed;
    inset: 78px 0 0;
    background: rgba(250, 247, 240, 0.98);
    z-index: 49;
    padding: 28px 20px 40px;
    border-top: 1px solid var(--line);
}

.mobile-menu.open {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 17px 0;
    color: var(--forest);
    font-weight: 800;
    border-bottom: 1px solid rgba(229, 221, 208, 0.8);
}

.hero {
    position: relative;
    padding: 158px 0 96px;
    overflow: hidden;
}

.hero:before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: min(680px, 60vw);
    height: min(680px, 60vw);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(217, 229, 221, 0.95) 0%, rgba(217, 229, 221, 0.1) 68%, transparent 72%);
    z-index: -1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 72px;
    align-items: center;
}

.hero-title {
    margin: 20px 0 22px;
    font-size: clamp(54px, 7vw, 92px);
    line-height: 0.92;
    color: var(--forest);
    letter-spacing: -0.045em;
}

.hero-copy {
    margin: 0 0 34px;
    max-width: 620px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.75;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--forest);
}

.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--forest);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 999px;
}

.hero-visual {
    position: relative;
    min-height: 560px;
    display: grid;
    grid-template-columns: 1.1fr 0.82fr;
    gap: 20px;
    align-items: stretch;
}

.arch-card {
    border-radius: 148px 148px 28px 28px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.arch-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200, 90, 60, 0.45);
    box-shadow: 0 34px 72px rgba(22, 56, 44, 0.13);
}

.hero-arch {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mock-product {
    flex: 1;
    min-height: 380px;
    background:
        radial-gradient(circle at 68% 34%, rgba(200, 90, 60, 0.18), transparent 22%),
        linear-gradient(145deg, #e5eee8, #cbdad1);
    padding: 26px;
    display: grid;
    place-items: center;
}

.mock-frame {
    width: 100%;
    height: 100%;
    min-height: 330px;
    border: 2px dashed rgba(22, 56, 44, 0.18);
    border-radius: 116px 116px 22px 22px;
    display: grid;
    place-items: center;
    text-align: center;
    color: rgba(22, 56, 44, 0.64);
    padding: 30px;
}

.mock-frame strong {
    display: block;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    line-height: 1.55;
}

.mock-caption {
    padding: 24px 26px 28px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

.mock-line {
    height: 9px;
    border-radius: 999px;
    background: #eee9df;
}

.mock-line.w70 {
    width: 70%;
}

.mock-line.w42 {
    width: 42%;
}

.side-stack {
    display: grid;
    gap: 20px;
}

.side-card {
    border-radius: 34px;
    padding: 26px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.side-card.dark {
    background: var(--forest);
    color: var(--white);
}

.side-card.light {
    background: var(--white);
    color: var(--forest);
}

.side-card.clay {
    background: var(--clay);
    color: var(--white);
}

.side-card small {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    font-weight: 800;
    opacity: 0.68;
}

.side-card strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
}

.side-card p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.65;
    opacity: 0.72;
}

.category-band {
    background: var(--forest);
    color: var(--white);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.category-band:before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border: 92px solid rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    right: -210px;
    top: -280px;
}

.category-title {
    position: relative;
    margin: 0 0 32px;
    text-align: center;
    color: var(--sage);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.chip-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 18px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.chip:hover {
    transform: translateY(-4px);
    background: var(--clay);
    border-color: var(--clay);
}

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

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

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.service-card {
    padding: 34px 28px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-bubble {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--forest);
    background: var(--sage);
    margin-bottom: 24px;
    transition: background 0.24s ease, color 0.24s ease, transform 0.24s ease;
}

.arch-card:hover .icon-bubble,
.soft-card:hover .icon-bubble {
    background: var(--clay);
    color: var(--white);
    transform: scale(1.06);
}

.card-title {
    margin: 0 0 14px;
    color: var(--forest);
    font-size: 28px;
    line-height: 1.05;
}

.card-copy {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
}

.dark-section {
    background: var(--forest);
    color: var(--white);
    overflow: hidden;
}

.dark-section .section-title {
    color: var(--white);
}

.dark-section .section-copy {
    color: rgba(217, 229, 221, 0.72);
}

.why-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 64px;
    align-items: center;
}

.why-list {
    display: grid;
    gap: 18px;
}

.why-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 24px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
}

.why-item h3 {
    margin: 0 0 8px;
    color: var(--white);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.why-item p {
    margin: 0;
    color: rgba(217, 229, 221, 0.64);
    font-size: 14px;
    line-height: 1.65;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.value-card {
    min-height: 200px;
    padding: 28px;
    border-radius: 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow);
}

.value-card.white {
    background: var(--white);
    color: var(--forest);
}

.value-card.clay {
    background: var(--clay);
    color: var(--white);
}

.value-card.glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.value-card strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    margin-top: 20px;
}

.value-card small {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

.pricing-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 36px;
    padding: 30px;
    box-shadow: 0 16px 38px rgba(22, 56, 44, 0.06);
}

.price-card.featured {
    border: 2px solid var(--clay);
    box-shadow: 0 28px 58px rgba(200, 90, 60, 0.18);
    transform: translateY(-12px);
}

.tag {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--sage);
    color: var(--forest);
}

.featured .tag {
    background: var(--clay);
    color: var(--white);
}

.price-card h3 {
    margin: 18px 0 14px;
    color: var(--forest);
    font-size: 34px;
    line-height: 1;
}

.price {
    margin-bottom: 18px;
    color: var(--forest);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.price span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.price-card p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 12px;
}

.check-list li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    color: #4d4943;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.check-list i {
    color: var(--clay);
    width: 18px;
    height: 18px;
}

.price-card .btn {
    margin-top: auto;
    width: 100%;
}

.note-box {
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.58);
    border-radius: 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.market-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 50px;
    align-items: start;
}

.pricing-table {
    display: grid;
    gap: 16px;
}

.table-card {
    padding: 28px;
    border-radius: 34px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 16px 38px rgba(22, 56, 44, 0.06);
}

.table-card h3 {
    margin: 0 0 18px;
    color: var(--forest);
    font-size: 30px;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(229, 221, 208, 0.8);
    align-items: center;
}

.table-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.table-row strong {
    color: var(--forest);
    font-size: 15px;
}

.table-row small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
}

.table-row b {
    color: var(--clay);
    font-size: 18px;
    white-space: nowrap;
}

.process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    position: relative;
}

.process:before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 40px;
    border-top: 2px dashed rgba(22, 56, 44, 0.18);
}

.process-step {
    position: relative;
    text-align: center;
    padding: 0 8px;
}

.step-no {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: var(--white);
    color: var(--forest);
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border: 9px solid var(--paper);
    box-shadow: 0 14px 34px rgba(22, 56, 44, 0.1);
    font-weight: 900;
}

.process-step:nth-child(3) .step-no {
    background: var(--clay);
    color: var(--white);
}

.process-step h3 {
    margin: 0 0 8px;
    color: var(--forest);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 900;
}

.process-step p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.work-card {
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 0;
    background: transparent;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(22, 56, 44, 0.08);
}

.work-thumb {
    min-height: 260px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
    position: relative;
    background: linear-gradient(135deg, var(--forest), var(--clay));
}

.work-thumb:before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 26px;
}

.work-thumb.ai {
    background: linear-gradient(135deg, #16382c, #608a73);
}

.work-thumb.static {
    background: linear-gradient(135deg, #c85a3c, #e4a571);
}

.work-thumb.ugc {
    background: linear-gradient(135deg, #1d1d1d, #725245);
}

.work-thumb.festive {
    background: linear-gradient(135deg, #a68a4b, #c85a3c);
}

.work-thumb.marketplace {
    background: linear-gradient(135deg, #16382c, #a68a4b);
}

.work-thumb.reels {
    background: linear-gradient(135deg, #793e31, #16382c);
}

.work-thumb h3,
.work-thumb p {
    position: relative;
    z-index: 1;
}

.work-thumb h3 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1;
    color: var(--white);
}

.work-thumb p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
}

.work-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--white);
    padding: 18px 20px;
    color: var(--forest);
    font-weight: 900;
    font-size: 13px;
}

.soft-card {
    padding: 30px;
    border-radius: 34px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 16px 38px rgba(22, 56, 44, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.soft-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.testimonial-card p {
    margin: 0 0 26px;
    color: #4e4a44;
    font-size: 17px;
    line-height: 1.75;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 13px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--forest);
    font-weight: 900;
}

.testimonial-author strong {
    display: block;
    color: var(--forest);
}

.testimonial-author small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    font-size: 12px;
}

.faq-wrap {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 52px;
    align-items: start;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(22, 56, 44, 0.045);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    text-align: left;
    color: var(--forest);
    font-weight: 900;
}

.faq-answer {
    display: none;
    padding: 0 24px 22px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

.faq-item.open .faq-answer {
    display: block;
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 58px;
    align-items: center;
}

.contact-links {
    display: grid;
    gap: 18px;
    margin-top: 36px;
}

.contact-link {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
    color: var(--white);
}

.contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--clay);
}

.contact-link small {
    display: block;
    color: rgba(217, 229, 221, 0.58);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.contact-link strong {
    display: block;
    margin-top: 5px;
    font-size: 22px;
}

.form-card {
    padding: 34px;
    border-radius: 40px;
    background: var(--white);
    color: var(--forest);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.field {
    display: grid;
    gap: 8px;
}

.field.full {
    grid-column: 1 / -1;
}

label {
    color: #847a70;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #ede5da;
    background: #fbf8f3;
    border-radius: 18px;
    padding: 15px 16px;
    color: var(--forest);
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

textarea {
    resize: vertical;
    min-height: 112px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(200, 90, 60, 0.65);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(200, 90, 60, 0.12);
}

.footer {
    padding: 76px 0 36px;
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.9fr;
    gap: 42px;
    margin-bottom: 50px;
}

.footer p {
    margin: 18px 0 22px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 420px;
}

.footer h4 {
    margin: 0 0 18px;
    color: #81776d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.footer li,
.footer a {
    color: var(--forest);
    font-size: 14px;
    font-weight: 800;
}

.footer a:hover {
    color: var(--clay);
}

.socials {
    display: flex;
    gap: 10px;
}

.socials a {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--forest);
    border: 1px solid var(--line);
    background: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: #9a9084;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(22, 56, 44, 0.72);
    backdrop-filter: blur(12px);
}

.modal.open {
    display: grid;
}

.modal-box {
    width: min(900px, 100%);
    max-height: 88vh;
    overflow: auto;
    background: var(--paper);
    border-radius: 34px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.24);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border-bottom: 1px solid var(--line);
}

.modal-head h3 {
    margin: 0;
    color: var(--forest);
    font-size: 34px;
}

.modal-close {
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--forest);
    color: var(--white);
    cursor: pointer;
}

.modal-gallery {
    padding: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gallery-card {
    min-height: 190px;
    border-radius: 24px;
    padding: 18px;
    display: flex;
    align-items: flex-end;
    color: var(--white);
    font-weight: 900;
    background: linear-gradient(135deg, var(--forest), var(--clay));
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.72s ease, transform 0.72s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1120px) {
    .nav-links {
        display: none;
    }

    .mobile-toggle {
        display: grid;
        place-items: center;
    }

    .hero-grid,
    .why-grid,
    .market-grid,
    .faq-wrap,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 520px;
        max-width: 720px;
    }

    .grid-4,
    .pricing-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .price-card.featured {
        transform: none;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, var(--container));
    }

    .section {
        padding: 76px 0;
    }

    .hero {
        padding: 128px 0 70px;
    }

    .hero-actions {
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .nav-actions .btn {
        display: none;
    }

    .hero-visual {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .side-stack {
        grid-template-columns: 1fr;
    }

    .hero-arch {
        min-height: 520px;
    }

    .mock-product {
        min-height: 320px;
    }

    .grid-4,
    .grid-3,
    .grid-2,
    .pricing-wrap,
    .portfolio-grid,
    .value-grid,
    .form-grid,
    .footer-grid,
    .modal-gallery {
        grid-template-columns: 1fr;
    }

    .process {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process:before {
        display: none;
    }

    .form-card {
        padding: 24px;
        border-radius: 28px;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .contact-link strong {
        font-size: 18px;
    }

    .section-title,
    .hero-title {
        letter-spacing: -0.025em;
    }
}

/* Fluent Forms styling inside FrameMint contact section
.framemint-form-wrap .fluentform {
  width: 100%;
}

.framemint-form-wrap .ff-el-group {
  margin-bottom: 18px;
}

.framemint-form-wrap .ff-el-input--label label,
.framemint-form-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(209, 222, 216, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.framemint-form-wrap input,
.framemint-form-wrap select,
.framemint-form-wrap textarea {
  width: 100%;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  outline: none !important;
  box-shadow: none !important;
}

.framemint-form-wrap input::placeholder,
.framemint-form-wrap textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.framemint-form-wrap select option {
  color: #16382C;
}

.framemint-form-wrap .ff-el-form-check {
  margin-bottom: 8px;
}

.framemint-form-wrap .ff-el-form-check label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.framemint-form-wrap input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.framemint-form-wrap .ff-btn-submit {
  width: 100%;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--clay) !important;
  color: #ffffff !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.25s ease;
}

.framemint-form-wrap .ff-btn-submit:hover {
  background: #ffffff !important;
  color: var(--forest) !important;
}

.framemint-form-wrap .ff-message-success {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  padding: 16px 18px;
} */

/* =========================================
   FrameMint Fluent Forms - Light Card Styling
   ========================================= */

.ff-light-form,
.ff-light-form .fluentform,
.ff-light-form .fluentform_wrapper,
.ff-light-form form.frm-fluent-form {
  width: 100%;
}

/* Remove excess default spacing */
.ff-light-form .ff-el-group {
  margin-bottom: 18px !important;
}

/* Labels */
.ff-light-form .ff-el-input--label label,
.ff-light-form .ff-el-group label,
.ff-light-form label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: rgba(22, 56, 44, 0.72) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

/* Main input fields */
.ff-light-form .ff-el-form-control,
.ff-light-form input[type="text"],
.ff-light-form input[type="email"],
.ff-light-form input[type="url"],
.ff-light-form input[type="tel"],
.ff-light-form input[type="number"],
.ff-light-form select,
.ff-light-form textarea {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  border: 1px solid #E5E1DA !important;
  background-color: #FAF8F4 !important;
  color: #16382C !important;
  -webkit-text-fill-color: #16382C !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

/* Placeholder */
.ff-light-form .ff-el-form-control::placeholder,
.ff-light-form input::placeholder,
.ff-light-form textarea::placeholder {
  color: rgba(22, 56, 44, 0.35) !important;
  -webkit-text-fill-color: rgba(22, 56, 44, 0.35) !important;
}

/* Focus */
.ff-light-form .ff-el-form-control:focus,
.ff-light-form input:focus,
.ff-light-form select:focus,
.ff-light-form textarea:focus {
  border-color: var(--clay) !important;
  background-color: #ffffff !important;
  color: #16382C !important;
  -webkit-text-fill-color: #16382C !important;
  box-shadow: 0 0 0 3px rgba(200, 90, 60, 0.16) !important;
}

/* Dropdown option text */
.ff-light-form select option {
  color: #16382C !important;
  background: #ffffff !important;
}

/* Required asterisk */
.ff-light-form .ff-el-is-required.asterisk-right label::after,
.ff-light-form .ff-el-is-required label::after {
  color: var(--clay) !important;
}

/* Checkbox group */
.ff-light-form .ff-el-form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* Checkbox input */
.ff-light-form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: auto !important;
  margin: 2px 0 0 0 !important;
  accent-color: var(--clay) !important;
  flex-shrink: 0 !important;
}

/* Checkbox labels */
.ff-light-form .ff-el-form-check label,
.ff-light-form .ff-el-form-check-label,
.ff-light-form .ff-el-form-check-label span {
  margin: 0 !important;
  color: rgba(22, 56, 44, 0.78) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Submit button */
.ff-light-form .ff-btn-submit,
.ff-light-form button[type="submit"],
.ff-light-form input[type="submit"] {
  width: 100% !important;
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--clay) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 18px 35px -18px rgba(200, 90, 60, 0.75) !important;
}

.ff-light-form .ff-btn-submit:hover,
.ff-light-form button[type="submit"]:hover,
.ff-light-form input[type="submit"]:hover {
  background: var(--forest) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-2px);
}

/* Error message */
.ff-light-form .error,
.ff-light-form .text-danger,
.ff-light-form .ff-el-is-error .text-danger {
  color: #C85A3C !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

.ff-light-form .ff-el-is-error .ff-el-form-control {
  border-color: #C85A3C !important;
}

/* Success message */
.ff-light-form .ff-message-success,
.ff-light-form .ff_success_message {
  border-radius: 18px !important;
  border: 1px solid rgba(22, 56, 44, 0.12) !important;
  background: #E8F0ED !important;
  color: #16382C !important;
  padding: 16px 18px !important;
  font-weight: 700 !important;
}

/* Remove weird internal margins */
.ff-light-form .ff-el-form-top,
.ff-light-form .ff-el-form-bottom {
  margin: 0 !important;
}

/* Fix radio/checkbox containers */
.ff-light-form .ff-el-input--content {
  margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 640px) {
  .ff-light-form .ff-el-form-control,
  .ff-light-form input,
  .ff-light-form select,
  .ff-light-form textarea {
    font-size: 14px !important;
    padding: 13px 16px !important;
  }

  .ff-light-form .ff-btn-submit {
    font-size: 15px !important;
  }
}

/* =========================================
   FrameMint Mobile Responsive Fixes
   Add at the very bottom of style.css
   ========================================= */

@media (max-width: 767px) {

  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    width: 100% !important;
  }

  /* General section spacing */
  section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  section[class*="pt-32"],
  section[class*="pt-40"],
  section[class*="lg:pt-48"] {
    padding-top: 104px !important;
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Container padding */
  section,
  nav > div,
  footer,
  footer > div,
  .px-6,
  .px-4 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Nav cleanup */
  nav {
    height: auto !important;
  }

  nav .h-20 {
    height: 64px !important;
  }

  nav .text-2xl {
    font-size: 22px !important;
  }

  nav .w-10,
  nav .h-10 {
    width: 36px !important;
    height: 36px !important;
  }

  /* Hero grid should fully stack */
  .grid {
    min-width: 0 !important;
  }

  .grid > * {
    min-width: 0 !important;
  }

  /* Hero badge fix */
  .inline-flex {
    max-width: 100% !important;
  }

  .inline-flex.text-\[10px\],
  .inline-flex[class*="text-[10px]"] {
    white-space: normal !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
  }

  /* Hero heading mobile */
  h1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  h3 {
    line-height: 1.15 !important;
  }

  p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* Hero CTAs */
  .flex.flex-col.sm\:flex-row,
  .flex.flex-col.sm\:row {
    width: 100% !important;
  }

  a[href="#contact"],
  a[href="#plans"],
  a[href="#services"] {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .px-10 {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .py-5 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Hero visual cards */
  .arch-card {
    border-radius: 56px 56px 22px 22px !important;
  }

  .rounded-\[40px\] {
    border-radius: 26px !important;
  }

  .rounded-\[50px\],
  .rounded-\[60px\] {
    border-radius: 30px !important;
  }

  /* Avoid sticky behavior on mobile */
  .lg\:sticky {
    position: static !important;
  }

  /* Category chips */
  .brand-chip {
    padding: 12px 16px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  /* Service / work / value cards */
  .p-10 {
    padding: 24px !important;
  }

  .p-8 {
    padding: 22px !important;
  }

  .p-6 {
    padding: 18px !important;
  }

  .gap-20 {
    gap: 48px !important;
  }

  .gap-16 {
    gap: 40px !important;
  }

  .gap-12 {
    gap: 32px !important;
  }

  .gap-8 {
    gap: 24px !important;
  }

  /* Force important 2-column layouts to 1 column on mobile */
  #why .grid.grid-cols-2,
  #portfolio .grid.grid-cols-2,
  footer .grid,
  .grid.md\:grid-cols-4,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Pricing cards */
  #plans .scale-110,
  #plans .scale-105 {
    transform: none !important;
  }

  #plans .arch-card {
    min-height: auto !important;
  }

  #plans {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }

  #plans .absolute.-top-5,
  #plans .absolute.-top-4 {
    top: -14px !important;
    font-size: 8px !important;
    padding: 6px 12px !important;
    letter-spacing: 0.12em !important;
  }

  /* Portfolio cards */
  #portfolio .aspect-\[3\/4\],
  #portfolio .aspect-square,
  #portfolio .aspect-\[4\/5\] {
    min-height: 260px !important;
  }

  /* FAQ */
  [data-faq-toggle] {
    gap: 12px !important;
  }

  [data-faq-toggle] span,
  [data-faq-toggle] h4,
  [data-faq-toggle] p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Contact section */
  #contact h2 {
    font-size: 36px !important;
  }

  #contact .text-2xl {
    font-size: 18px !important;
    word-break: break-word !important;
  }

  #contact .w-16,
  #contact .h-16 {
    width: 48px !important;
    height: 48px !important;
  }

  /* Fluent form mobile */
  .ff-light-form .ff-el-group {
    margin-bottom: 16px !important;
  }

  .ff-light-form .ff-el-form-control,
  .ff-light-form input,
  .ff-light-form select,
  .ff-light-form textarea {
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .ff-light-form .ff-btn-submit {
    min-height: 52px !important;
    font-size: 14px !important;
  }

  /* Footer */
  footer {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  footer .flex {
    flex-wrap: wrap !important;
  }

  footer .justify-between {
    justify-content: flex-start !important;
  }

  footer .text-\[10px\],
  footer [class*="text-[10px]"] {
    letter-spacing: 0.12em !important;
    line-height: 1.6 !important;
  }

  footer ul {
    margin-top: 0 !important;
  }

  /* Prevent long words from breaking layout */
  h1,
  h2,
  h3,
  h4,
  p,
  a,
  span,
  li {
    overflow-wrap: break-word !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  h1 {
    font-size: 38px !important;
  }

  h2 {
    font-size: 31px !important;
  }

  section,
  nav > div,
  footer,
  footer > div,
  .px-6,
  .px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .brand-chip {
    padding: 10px 14px !important;
  }
}