/* Mockup frames and the six concept design systems.
   Desktop canvas = 80em × 50em; phone screen = 20em wide. 1em scales with the frame width
   through container query units, so a mockup looks identical at any size. */

/* ---------- Frames ---------- */
.browser { container-type: inline-size; border-radius: 12px; overflow: hidden; background: #fff; position: relative; }
.browser-bar { font-size: calc(100cqw / 80); height: 2.6em; display: flex; align-items: center; gap: .5em; padding: 0 1.2em; background: #ececea; border-bottom: 1px solid #dcdcd8; }
.browser-bar i { width: .85em; height: .85em; border-radius: 50%; background: #cfcfcb; }
.browser-bar span { margin: 0 auto; background: #fff; border-radius: .5em; padding: .25em 3em; color: #6a6a6a; font: .9em/1.5 var(--mono); white-space: nowrap; }
.mk-canvas { font-size: calc(100cqw / 80); aspect-ratio: 16 / 10; overflow: hidden; position: relative; line-height: 1.35; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0; }
.mk img, .mk video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk video { background: #1a1a1a; }
.mk h4, .mk h5, .mk p, .mk ul, .mk dl, .mk dd, .mk figure, .mk blockquote { margin: 0; }
.mk ul { list-style: none; padding: 0; }
.mk-line { display: block; height: .55em; background: currentColor; opacity: .12; border-radius: .3em; margin: .55em 0; }
.mk-ic { display: inline-flex; }
.mk-ic svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk label { display: block; font-size: .9em; margin-bottom: 1em; color: inherit; }
.mk label i { display: block; height: 3em; border: 1px solid rgba(0, 0, 0, .14); border-radius: .5em; margin-top: .4em; background: #fff; }
.mk label.tall i { height: 7em; }
.phone { container-type: inline-size; aspect-ratio: 9 / 19.5; border-radius: 14% / 6.5%; background: #121212; padding: 2.4%; position: relative; }
.phone .m-screen { font-size: calc(100cqw / 20); width: 100%; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; position: relative; }

/* ---------- 1. Basic — Halden Coffee ---------- */
.mk-basic .mk-canvas { background: #fbf9f6; color: #2a2420; }
.b-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.6em 4em; }
.b-logo { font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }
.b-logo span { font-weight: 400; margin-left: .25em; color: #6f645b; }
.b-nav nav { display: flex; gap: 2.4em; font-size: 1.05em; color: #6d625a; }
.b-nav nav .on { color: #2a2420; box-shadow: inset 0 -2px 0 #5e6f52; }
.b-btn { display: inline-block; background: #2a2420; color: #fff; padding: .8em 1.4em; border-radius: .6em; font-size: 1em; font-weight: 500; }
.b-link { display: inline-flex; gap: .4em; align-items: center; font-weight: 500; color: #5e6f52; }
.b-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5em; padding: 1.5em 4em 2em; align-items: center; }
.b-hero small, .b-about small { color: #5e6f52; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85em; }
.b-hero h4 { font-size: 3.6em; line-height: 1.02; letter-spacing: -.035em; font-weight: 650; margin: .3em 0 .35em; }
.b-hero p { font-size: 1.15em; color: #6d625a; max-width: 24em; }
.b-actions { display: flex; gap: 1.6em; align-items: center; margin-top: 1.8em; }
.b-hero-img { height: 26em !important; border-radius: 1.4em; overflow: hidden; }
.b-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; padding: 0 4em 1.8em; }
.b-info div { background: #fff; border-radius: 1em; padding: 1.2em 1.4em; display: grid; grid-template-columns: auto 1fr; gap: .1em .9em; align-items: center; border: 1px solid #efe9e2; }
.b-info .mk-ic { grid-row: span 2; color: #5e6f52; }
.b-info span { color: #6f645b; font-size: .9em; }
.b-foot { display: flex; justify-content: space-between; padding: 1.5em 4em; border-top: 1px solid #ece6df; font-size: .9em; color: #6f645b; position: absolute; left: 0; right: 0; bottom: 0; }
.b-menu { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4em; padding: 1.5em 4em; }
.b-menu h4, .b-about h4, .b-contact h4 { font-size: 2.8em; letter-spacing: -.03em; font-weight: 650; }
.b-sub { color: #6f645b; margin: .4em 0 1.8em !important; }
.b-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; }
.b-cols h5 { font-size: 1.1em; text-transform: uppercase; letter-spacing: .08em; color: #5e6f52; margin-bottom: 1em; }
.b-item { display: flex; gap: .6em; align-items: baseline; margin: 0 0 1.05em !important; font-size: 1.05em; }
.b-item i { flex: 1; border-bottom: 1.5px dotted #cfc6bd; }
.b-menu-img { height: 34em !important; border-radius: 1.4em; }
.b-about { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; padding: 2em 4em; align-items: center; }
.b-about-img { height: 33em !important; border-radius: 1.4em; }
.b-about h4 { margin: .4em 0 .5em; }
.b-about p { font-size: 1.15em; color: #6d625a; }
.b-about ul { margin-top: 1.6em; display: grid; gap: .9em; font-size: 1.05em; }
.b-about li { display: flex; gap: .7em; align-items: center; }
.b-about li .mk-ic { color: #5e6f52; }
.b-contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4em; padding: 1.5em 4em; }
.b-contact h4 { margin-bottom: .8em; }
.b-map { height: 22em; border-radius: 1.4em; background: #ece8e1; position: relative; overflow: hidden; background-image: linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%), linear-gradient(0deg, transparent 60%, #fff 60%, #fff 64%, transparent 64%), linear-gradient(35deg, transparent 30%, #f7f4ef 30%, #f7f4ef 33%, transparent 33%); }
.b-pin { position: absolute; left: 48%; top: 52%; color: #fff; background: #5e6f52; border-radius: 50%; padding: .6em; transform: translate(-50%, -50%); box-shadow: 0 0 0 .6em rgba(94, 111, 82, .25); }
.b-hours { margin-top: 1.4em; }
.b-hours p { display: flex; justify-content: space-between; padding: .7em 0; border-bottom: 1px solid #ece6df; }

/* ---------- 2. Professional — Meridian Advisory ---------- */
.mk-professional .mk-canvas { background: #fff; color: #0f2342; }
.p-util { display: flex; justify-content: flex-end; gap: 2.2em; padding: .55em 4em; background: #0f2342; color: #b8c4da; font-size: .85em; }
.p-search { display: inline-flex; align-items: center; gap: .3em; }
.p-search .mk-ic svg { width: 1em; height: 1em; }
.p-nav { display: flex; align-items: center; gap: 3.5em; padding: 1.3em 4em; border-bottom: 1px solid #e3e7ee; }
.p-logo { display: flex; align-items: center; gap: .6em; font-weight: 700; letter-spacing: .14em; font-size: 1.1em; }
.p-logo i { width: 1.4em; height: 1.4em; background: linear-gradient(135deg, #2560c4, #0f2342); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
.p-logo span { font-weight: 400; color: #55647a; margin-left: .3em; }
.p-nav nav { display: flex; gap: 2.2em; flex: 1; font-size: 1em; color: #33476a; }
.p-nav nav .on { color: #2560c4; }
.p-nav nav em { font-style: normal; font-size: .7em; opacity: .6; }
.p-btn { display: inline-block; background: #2560c4; color: #fff; padding: .8em 1.4em; border-radius: .3em; font-weight: 500; }
.p-link { display: inline-flex; align-items: center; gap: .4em; color: #2560c4; font-weight: 500; font-size: .95em; }
.p-link .mk-ic svg { width: 1em; height: 1em; }
.p-mega { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 2.5em; padding: 2em 4em; background: #fff; border-bottom: 1px solid #e3e7ee; box-shadow: 0 1.5em 3em -2em rgba(15, 35, 66, .3); position: relative; z-index: 2; }
.p-mega small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .75em; color: #55647a; margin-bottom: .8em; }
.p-mega p { margin: 0 0 .7em !important; font-size: 1em; }
.p-mega-card { background: #f3f5f8; border-radius: .4em; overflow: hidden; display: grid; grid-template-rows: 6.5em auto auto; }
.p-mega-card b, .p-mega-card span { padding: 0 1em; }
.p-mega-card b { padding-top: .8em; font-size: .95em; }
.p-mega-card span { color: #2560c4; font-size: .85em; padding-bottom: .8em; display: flex; gap: .3em; align-items: center; }
.p-mega-card .mk-ic svg { width: 1em; height: 1em; }
.p-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5em; padding: 3em 4em; align-items: center; }
.p-hero small { color: #2560c4; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .85em; }
.p-hero h4 { font-size: 3.2em; line-height: 1.06; letter-spacing: -.03em; font-weight: 650; margin: .35em 0 .4em; }
.p-hero p { font-size: 1.15em; color: #4c5d79; }
.p-actions { display: flex; gap: 1.8em; align-items: center; margin-top: 1.8em; }
.p-hero-img { height: 24em !important; border-radius: .3em; }
.p-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; padding: 2.2em 4em; background: #f3f5f8; }
.p-strip div { display: grid; gap: .5em; }
.p-strip .mk-ic { color: #2560c4; }
.p-foot { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 2em; padding: 2.4em 4em; background: #0f2342; color: #8fa0bd; }
.p-foot b { color: #fff; letter-spacing: .14em; }
.p-foot small { color: #fff; display: block; margin-bottom: .6em; }
.p-crumb { padding: 1.1em 4em; font-size: .85em; color: #55647a; }
.p-crumb em { font-style: normal; margin: 0 .7em; opacity: .5; }
.p-services { display: grid; grid-template-columns: 14em 1fr; gap: 3em; padding: .5em 4em; }
.p-services aside { display: grid; gap: .2em; align-content: start; }
.p-services aside span { padding: .8em 1em; border-left: 2px solid #e3e7ee; color: #4c5d79; }
.p-services aside .on { border-color: #2560c4; background: #f3f5f8; color: #0f2342; font-weight: 600; }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.p-card { border: 1px solid #e3e7ee; border-radius: .4em; padding: 1.6em; display: grid; gap: .6em; }
.p-card .mk-ic { color: #2560c4; }
.p-detail { display: grid; grid-template-columns: 1fr 22em; gap: 4em; padding: .5em 4em; }
.p-detail h4, .p-ind h4, .p-team h4, .p-careers h4, .p-contactpage h4 { font-size: 2.6em; letter-spacing: -.03em; font-weight: 650; }
.p-lede { font-size: 1.3em; color: #4c5d79; margin: .4em 0 1.4em !important; }
.p-detail h5 { font-size: 1.15em; margin: 1.4em 0 .3em; }
.p-detail ul { display: grid; gap: .4em; margin-top: .4em; }
.p-detail li::before, .p-ind li::before { content: '— '; color: #2560c4; }
.p-contact-card { background: #f3f5f8; padding: 2em; border-radius: .4em; align-self: start; display: grid; gap: .6em; }
.p-contact-card small { text-transform: uppercase; letter-spacing: .1em; color: #55647a; font-size: .75em; }
.p-ind, .p-team, .p-insights, .p-careers { padding: .5em 4em; }
.p-tabs { display: flex; gap: .2em; border-bottom: 1px solid #e3e7ee; margin: 1.4em 0 2em; }
.p-tabs span { padding: .8em 1.4em; color: #4c5d79; }
.p-tabs .on { box-shadow: inset 0 -2px 0 #2560c4; color: #0f2342; font-weight: 600; }
.p-ind-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; }
.p-ind-body h5 { font-size: 1.5em; }
.p-ind-body ul { margin-top: 1em; display: grid; gap: .5em; }
.p-ind-body img { height: 22em !important; border-radius: .3em; }
.p-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em 1.6em; margin-top: 1.8em; }
.p-avatar { display: grid; place-items: center; height: 9.5em; background: linear-gradient(160deg, #eef2f8, #d8e0ec); border-radius: .3em; font-size: 2em; font-weight: 600; color: #33476a; margin-bottom: .2em; }
.p-chips { display: flex; gap: .6em; margin-bottom: 1.6em; }
.p-chips span { padding: .5em 1.1em; border: 1px solid #d6dce6; border-radius: 2em; font-size: .9em; }
.p-chips .on { background: #0f2342; color: #fff; border-color: #0f2342; }
.p-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.p-articles article { display: grid; gap: .5em; }
.p-articles img { height: 10em !important; border-radius: .3em; }
.p-articles small { color: #2560c4; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; }
.p-articles article.text { background: #f3f5f8; padding: 1.4em; border-radius: .3em; }
.p-careers h4 { margin-bottom: 1em; }
.p-role { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1em; align-items: center; padding: 1.4em 0; border-bottom: 1px solid #e3e7ee; color: #4c5d79; }
.p-role b { color: #0f2342; font-size: 1.15em; }
.p-contactpage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4em; padding: .5em 4em; }
.p-contactpage h4 { margin-bottom: .8em; }
.p-select { border: 2px solid #2560c4; border-radius: .4em; padding: .7em 1em; margin-bottom: 1em; display: flex; justify-content: space-between; }
.p-select span { color: #55647a; }
.p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.p-office { background: #f3f5f8; padding: 1.6em; border-radius: .4em; margin-bottom: 1em; }

/* ---------- 3. Premium — Aurel ---------- */
.mk-premium .mk-canvas { background: #0d0d0c; color: #efeae2; font-family: 'Geist', -apple-system, Helvetica, sans-serif; font-weight: 300; }
.a-nav { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 2em 4em; z-index: 3; color: #efeae2; }
.a-nav.light { color: #1a1a18; }
.a-nav b { letter-spacing: .6em; font-weight: 400; font-size: 1.25em; margin-left: .6em; }
.a-menu i { display: block; width: 2.2em; height: 1px; background: currentColor; margin: .45em 0; }
.a-enq { border: 1px solid currentColor; padding: .6em 1.5em; border-radius: 2em; font-size: .85em; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.a-full { position: relative; height: 100%; overflow: hidden; }
.a-full > img, .a-split-img > img, .a-full > video, .a-split-img > video { position: absolute; inset: 0; }
.a-kenburns { animation: aKb 22s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes aKb { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.a-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .35)); }
.a-hero-copy { position: absolute; left: 4em; bottom: 6em; z-index: 2; }
.a-hero-copy small, .a-split-text small, .a-gallery-head small, .a-detail small, .a-story small, .a-enquire small { letter-spacing: .32em; text-transform: uppercase; font-size: .8em; opacity: .75; }
.a-hero-copy h4 { font-size: 4.2em; font-weight: 300; line-height: 1.04; letter-spacing: -.025em; margin-top: .35em; }
.a-play { position: absolute; right: 4em; bottom: 6.5em; z-index: 2; display: flex; align-items: center; gap: 1em; font-size: .9em; letter-spacing: .1em; text-transform: uppercase; }
.a-play .mk-ic { border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; padding: 1em; }
.a-play .mk-ic svg { fill: currentColor; stroke: none; }
.a-scroll { position: absolute; left: 50%; bottom: 1.8em; transform: translateX(-50%); z-index: 2; font-size: .75em; letter-spacing: .3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .8em; opacity: .7; }
.a-scroll i { width: 1px; height: 2.6em; background: linear-gradient(currentColor 50%, transparent 50%); background-size: 1px 200%; animation: aScroll 2s linear infinite; }
@keyframes aScroll { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.a-count { position: absolute; right: 4em; top: 50%; z-index: 2; font-size: .8em; letter-spacing: .2em; opacity: .7; }
.a-split { display: grid; grid-template-columns: 1fr 1.25fr; height: 100%; position: relative; }
.a-split-text { padding: 13em 4em 4em; }
.a-split-text h4 { font-size: 2.8em; font-weight: 300; line-height: 1.12; margin: .5em 0 1em; letter-spacing: -.02em; }
.a-line { display: block; height: .45em; background: currentColor; opacity: .16; margin: .7em 0; border-radius: .2em; }
.a-link { display: inline-flex; gap: .6em; align-items: center; margin-top: 1.6em; letter-spacing: .15em; text-transform: uppercase; font-size: .85em; }
.a-split-img { position: relative; overflow: hidden; }
.a-progress { position: absolute; left: 3em; right: 3em; bottom: 3em; height: 1px; background: rgba(255, 255, 255, .3); }
.a-progress i { display: block; height: 100%; width: 40%; background: #fff; }
.a-dark { background: #0d0d0c; height: 100%; position: relative; padding: 9em 4em 3em; }
.a-gallery-head h4 { font-size: 2.6em; font-weight: 300; max-width: 16em; margin-top: .4em; letter-spacing: -.02em; }
.a-gallery { display: flex; gap: 2em; margin-top: 2.6em; }
.a-gallery figure { flex: 0 0 26em; height: 21em; position: relative; overflow: hidden; }
.a-gallery figure:first-child { flex-basis: 32em; }
.a-gallery figcaption { position: absolute; left: 1.2em; bottom: 1em; font-size: 1.05em; display: flex; gap: 1em; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.a-gallery figcaption span { opacity: .6; }
.a-drag { position: absolute; left: 50%; bottom: 2em; transform: translateX(-50%); font-size: .75em; letter-spacing: .3em; opacity: .6; }
.a-light { background: #efeae2; color: #1a1a18; height: 100%; position: relative; padding: 8em 4em 3em; }
.a-light h4 { font-weight: 300; letter-spacing: -.02em; }
.a-detail-img { position: absolute !important; left: 0; top: 0; width: 46% !important; height: 100% !important; }
.a-detail { margin-left: 46%; padding: 3em 0 0 4em; display: grid; gap: 2em; }
.a-detail h4 { font-size: 2.6em; margin: .3em 0 .6em; }
.a-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em 2em; border-top: 1px solid rgba(0, 0, 0, .15); padding-top: 1.4em; }
.a-detail dt { font-size: .75em; letter-spacing: .25em; text-transform: uppercase; opacity: .78; }
.a-detail dd { font-size: 1.3em; margin-top: .2em; }
.a-btn { justify-self: start; display: inline-block; border: 1px solid currentColor; padding: .9em 1.9em; border-radius: 2em; font-size: .85em; letter-spacing: .16em; text-transform: uppercase; }
.a-btn.light { color: #efeae2; }
.a-story { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2em; padding-top: 6em; }
.a-story blockquote { font-size: 2.5em; line-height: 1.25; max-width: 20em; font-weight: 300; letter-spacing: -.015em; }
.a-story-img { width: 26em !important; height: 13em !important; }
.a-journal h4 { font-size: 2.6em; margin-bottom: 1em; }
.a-jgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2em; align-items: end; }
.a-jgrid article { display: grid; gap: .6em; }
.a-jgrid img { height: 16em !important; }
.a-jgrid .big img { height: 24em !important; }
.a-jgrid small { font-size: .75em; letter-spacing: .25em; text-transform: uppercase; opacity: .78; }
.a-jgrid b { font-weight: 400; font-size: 1.2em; }
.a-enquire { display: flex; justify-content: center; text-align: center; }
.a-enquire > div { max-width: 52em; width: 100%; }
.a-enquire h4 { font-size: 3em; font-weight: 300; margin: .3em 0 1.2em; }
.a-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em 2.4em; text-align: left; }
.a-fields label { font-size: .75em; letter-spacing: .25em; text-transform: uppercase; opacity: .85; }
.a-fields label i { height: 2.6em; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .35); border-radius: 0; }
.a-chips { display: flex; gap: .8em; justify-content: center; margin: 2em 0; }
.a-chips span { border: 1px solid rgba(255, 255, 255, .35); padding: .6em 1.3em; border-radius: 2em; font-size: .9em; }
.a-chips .on { background: #efeae2; color: #0d0d0c; }
.a-location { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4em; align-items: center; }
.a-map { position: relative; height: 32em; background: #e5dfd4; overflow: hidden; }
.a-map svg { width: 100%; height: 100%; }
.a-map path { fill: none; stroke: #b9ae9b; stroke-width: 1; }
.a-pin { position: absolute; left: 55%; top: 45%; color: #1a1a18; }
.a-pin .mk-ic svg { width: 2.4em; height: 2.4em; fill: #efeae2; }
.a-travel h4 { font-size: 2.4em; margin-bottom: 1em; }
.a-travel p { display: flex; justify-content: space-between; padding: 1em 0; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.a-press h4, .a-legal h4 { font-size: 2.6em; margin-bottom: 1.2em; }
.a-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.a-logos span { border: 1px solid rgba(0, 0, 0, .14); padding: 2.2em; text-align: center; letter-spacing: .35em; text-transform: uppercase; font-size: .85em; opacity: .55; }
.a-kit { display: flex; align-items: center; gap: 2em; margin-top: 2.4em; padding-top: 2em; border-top: 1px solid rgba(0, 0, 0, .15); }
.a-kit span:not(.a-btn) { flex: 1; opacity: .7; }
.a-legal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; }
.a-legal-cols small { letter-spacing: .25em; text-transform: uppercase; font-size: .75em; opacity: .6; }

/* ---------- 4. E-commerce — Forma Objects ---------- */
.mk-ecommerce .mk-canvas { background: #fff; color: #141414; }
.f-announce { background: #141414; color: #f2f2f2; text-align: center; font-size: .82em; padding: .55em; letter-spacing: .04em; }
.f-nav { display: flex; align-items: center; gap: 3em; padding: 1.1em 3em; border-bottom: 1px solid #ededed; }
.f-nav.simple { justify-content: space-between; }
.f-nav.simple span { display: flex; gap: .5em; align-items: center; color: #555; font-size: .9em; }
.f-logo { letter-spacing: .4em; font-weight: 700; font-size: 1.3em; }
.f-nav nav { display: flex; gap: 2em; flex: 1; font-size: .95em; color: #444; }
.f-tools { display: flex; gap: 1.4em; align-items: center; }
.f-search { display: flex; align-items: center; gap: .6em; background: #f4f3f1; padding: .65em 1.2em; border-radius: 2em; width: 17em; color: #6a6a6a; font-size: .9em; }
.f-search em { font-style: normal; }
.f-search .mk-ic svg { width: 1.1em; height: 1.1em; }
.f-bag { position: relative; }
.f-bag b { position: absolute; top: -.5em; right: -.7em; background: #c4572a; color: #fff; border-radius: 50%; width: 1.5em; height: 1.5em; font-size: .7em; display: grid; place-items: center; }
.f-btn { display: inline-block; background: #141414; color: #fff; padding: .9em 1.7em; border-radius: 2em; font-weight: 500; font-size: .95em; text-align: center; }
.f-btn.ghost { background: none; color: #141414; border: 1px solid #141414; }
.f-hero { position: relative; height: 22em; margin: 1.4em 3em; border-radius: .8em; overflow: hidden; }
.f-hero-img { object-position: 50% 60%; }
.f-hero-copy { position: absolute; left: 3em; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); padding: 2em 2.4em; border-radius: .8em; }
.f-hero-copy small { color: #c4572a; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .8em; }
.f-hero-copy h4 { font-size: 2.6em; line-height: 1.05; letter-spacing: -.03em; font-weight: 600; margin: .3em 0 .8em; max-width: 9em; }
.f-row { padding: 0 3em; }
.f-row-head { display: flex; justify-content: space-between; align-items: center; margin: .4em 0 1em; }
.f-row-head span { display: flex; gap: .4em; align-items: center; font-size: .9em; color: #555; }
.f-row-head .mk-ic svg { width: 1em; height: 1em; }
.f-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; }
.f-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em 1.2em; }
.f-card img { height: 12em !important; background: #f4f3f1; border-radius: .6em; }
.f-grid3 .f-card img { height: 10.5em !important; }
.f-card-meta { display: flex; justify-content: space-between; font-size: .92em; margin-top: .6em; }
.f-card-meta b { font-weight: 600; }
.f-swatches { display: flex; gap: .4em; margin-top: .45em; }
.f-swatches i { width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.f-swatches.big i { width: 2em; height: 2em; }
.f-swatches.big i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #141414; }
.f-collection { display: grid; grid-template-columns: 14em 1fr; gap: 2.5em; padding: 1.5em 3em; }
.f-filters { display: grid; gap: .6em; align-content: start; font-size: .92em; }
.f-filters small { margin-top: 1em; color: #6a6a6a; text-transform: uppercase; font-size: .75em; letter-spacing: .1em; }
.f-filters p { display: flex; gap: .6em; align-items: center; }
.f-filters p i { width: 1.1em; height: 1.1em; border: 1.5px solid #bbb; border-radius: .25em; }
.f-filters p i.on { background: #141414; border-color: #141414; }
.f-range { height: .3em; background: #e3e3e3; border-radius: .2em; position: relative; margin: .6em 0; }
.f-range i { position: absolute; left: 20%; right: 35%; height: 100%; background: #141414; }
.f-col-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1.2em; }
.f-col-head small { color: #6a6a6a; font-size: .85em; }
.f-col-head h4 { font-size: 2em; font-weight: 600; letter-spacing: -.02em; }
.f-sort { border: 1px solid #ddd; border-radius: 2em; padding: .5em 1.1em; font-size: .9em; }
.f-pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5em; padding: 1.8em 3em; }
.f-main { height: 27em !important; background: #f4f3f1; border-radius: .8em; object-fit: contain !important; }
.f-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-top: .8em; }
.f-thumbs img { height: 5.5em !important; border-radius: .5em; background: #f4f3f1; }
.f-thumbs img:first-child { outline: 2px solid #141414; outline-offset: -2px; }
.f-info { display: grid; gap: .8em; align-content: start; }
.f-info small { color: #6a6a6a; font-size: .85em; }
.f-info h4 { font-size: 2.4em; font-weight: 600; letter-spacing: -.025em; }
.f-price { font-size: 1.5em; font-weight: 600; }
.f-info p { color: #555; }
.f-buy { display: flex; gap: 1em; margin-top: .6em; }
.f-buy .f-btn { flex: 1; }
.f-qty { border: 1px solid #ddd; border-radius: 2em; padding: .85em 1.2em; white-space: nowrap; }
.f-acc p { display: flex; justify-content: space-between; padding: 1em 0; border-top: 1px solid #ededed; color: #141414 !important; }
.f-acc em { font-style: normal; }
.f-searchpage { background: #f4f3f1; height: 100%; padding-top: 2.4em; }
.f-searchbox { margin: 0 auto; width: 48em; display: flex; align-items: center; gap: .6em; background: #fff; border-radius: 1em; padding: 1.2em 1.6em; font-size: 1.3em; box-shadow: 0 1em 3em -1.5em rgba(0, 0, 0, .25); }
.f-searchbox b { font-weight: 500; }
.f-searchbox span { margin-left: auto; font-size: .6em; border: 1px solid #ddd; border-radius: .4em; padding: .2em .5em; color: #6a6a6a; }
.f-caret { width: 2px; height: 1.1em; background: #141414; animation: fBlink 1s steps(1) infinite; }
@keyframes fBlink { 50% { opacity: 0; } }
.f-suggest { width: 62.4em; margin: 1em auto 0; background: #fff; border-radius: 1em; padding: 1.4em 2em; }
.f-suggest small { display: block; color: #6a6a6a; text-transform: uppercase; letter-spacing: .1em; font-size: .75em; margin: .6em 0; }
.f-suggest p { display: flex; align-items: center; gap: 1em; padding: .5em 0; }
.f-suggest p img { width: 3.6em !important; height: 3.6em !important; border-radius: .4em; background: #f4f3f1; }
.f-suggest p span { flex: 1; }
.f-suggest p.t span { color: #555; }
.f-suggest mark { background: #f6e1d6; color: inherit; }
.f-bagpage { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3em; padding: 1.8em 3em; }
.f-bagpage h4 { font-size: 2em; font-weight: 600; margin-bottom: .6em; }
.f-line { display: grid; grid-template-columns: 6em 1fr auto auto; gap: 1.5em; align-items: center; padding: 1.1em 0; border-bottom: 1px solid #ededed; }
.f-line img { height: 6em !important; border-radius: .5em; background: #f4f3f1; }
.f-line span { display: block; color: #6a6a6a; font-size: .9em; }
.f-summary { background: #f7f6f4; padding: 1.8em; border-radius: .8em; display: grid; gap: .9em; align-content: start; }
.f-summary p { display: flex; justify-content: space-between; color: #555; gap: 1em; }
.f-summary p.total { color: #141414; font-weight: 600; font-size: 1.2em; padding-top: .9em; border-top: 1px solid #e3e3e3; }
.f-summary p.mini { align-items: center; }
.f-summary p.mini img { width: 3.4em !important; height: 3.4em !important; border-radius: .4em; flex: none; }
.f-summary p.mini span:nth-child(2) { flex: 1; }
.f-checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.5em; padding: 1.8em 3em; }
.f-checkout small { display: block; font-weight: 600; margin: .6em 0 .8em; }
.f-express { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.f-pay { background: #000; color: #fff; padding: .9em; text-align: center; border-radius: .5em; font-weight: 600; }
.f-pay.google { background: #fff; color: #141414; border: 1px solid #ddd; }
.f-or { text-align: center; color: #6a6a6a; font-size: .85em; margin: 1.2em 0 .4em; }
.f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.f-checkout label { margin-bottom: .7em; }
.f-checkout label i { height: 2.7em; }
.f-confirm { text-align: center; padding: 6em 3em; display: flex; flex-direction: column; align-items: center; gap: 1em; }
.f-check { width: 4.5em; height: 4.5em; border-radius: 50%; background: #e8f2ec; color: #1f7a4d; display: grid; place-items: center; }
.f-check svg { width: 2em !important; height: 2em !important; }
.f-confirm h4 { font-size: 2.2em; font-weight: 600; letter-spacing: -.02em; }
.f-confirm p { color: #555; }
.f-confirm-items { display: flex; gap: 1em; margin: 1em 0; }
.f-confirm-items img { width: 7em !important; height: 7em !important; border-radius: .6em; background: #f4f3f1; }
.f-about { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3.5em; padding: 2em 3em; align-items: center; }
.f-about-img { height: 33em !important; border-radius: .8em; }
.f-about small { color: #c4572a; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .8em; }
.f-about h4 { font-size: 2.6em; font-weight: 600; letter-spacing: -.025em; margin: .3em 0 .6em; }
.f-faq { padding: 2em 12em; }
.f-faq h4 { font-size: 2.4em; font-weight: 600; letter-spacing: -.02em; }
.f-tabs { display: flex; gap: .6em; margin: 1.4em 0; }
.f-tabs span { padding: .5em 1.2em; border-radius: 2em; border: 1px solid #ddd; font-size: .9em; }
.f-tabs .on { background: #141414; color: #fff; border-color: #141414; }
.f-q { border-bottom: 1px solid #ededed; padding: 1.2em 0; }
.f-q b { display: flex; justify-content: space-between; font-weight: 500; font-size: 1.05em; }
.f-q em { font-style: normal; color: #6a6a6a; }

/* ---------- 5. Web app — Fieldbook ---------- */
.mk-webapp .mk-canvas { background: #f6f6f8; color: #18181b; font-size: calc(100cqw / 80); }
.w-app { display: grid; grid-template-columns: 15em 1fr; height: 100%; }
.w-side { background: #fff; border-right: 1px solid #ececf0; padding: 1.6em 1.1em; display: flex; flex-direction: column; gap: .25em; font-size: .95em; color: #52525b; }
.w-logo { display: flex; gap: .6em; align-items: center; font-weight: 650; margin: 0 0 1.4em .4em; font-size: 1.1em; color: #18181b; }
.w-logo i { width: 1.5em; height: 1.5em; border-radius: .45em; background: linear-gradient(135deg, #5b4ff5, #a294ff); }
.w-side > span { display: flex; gap: .7em; align-items: center; padding: .6em .8em; border-radius: .5em; }
.w-side > span .mk-ic svg { width: 1.15em; height: 1.15em; }
.w-side > span.on { background: #f0effe; color: #4b3fe0; font-weight: 500; }
.w-org { margin-top: auto; display: flex; gap: .7em; align-items: center; padding: .8em; border-top: 1px solid #ececf0; }
.w-org small { display: block; color: #6b6b74; font-size: .8em; }
.w-av { width: 2.3em; height: 2.3em; border-radius: 50%; background: #e7e4fd; color: #4b3fe0; display: inline-grid; place-items: center; font-size: .8em; font-weight: 650; flex: none; }
.w-av.sm { width: 2em; height: 2em; font-size: .7em; }
.w-app main { padding: 1.5em 2em; overflow: hidden; }
.w-top { display: flex; align-items: center; gap: 1em; margin-bottom: 1.3em; }
.w-top h4 { font-size: 1.6em; font-weight: 650; letter-spacing: -.02em; flex: 1; display: flex; align-items: center; gap: .6em; }
.w-cmd { background: #fff; border: 1px solid #e4e4ea; padding: .55em .9em; border-radius: .6em; width: 21em; color: #6b6b74; display: flex; gap: .5em; align-items: center; font-size: .9em; }
.w-cmd .mk-ic svg { width: 1em; height: 1em; }
.w-cmd kbd { margin-left: auto; font: inherit; font-size: .8em; border: 1px solid #e4e4ea; padding: 0 .4em; border-radius: .3em; }
.w-btn { display: inline-block; background: #5b4ff5; color: #fff; padding: .75em 1.3em; border-radius: .55em; font-weight: 550; text-align: center; }
.w-btn.sm { padding: .55em 1em; font-size: .9em; }
.w-btn.ghost { background: #fff; color: #18181b; border: 1px solid #e4e4ea; }
.w-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; }
.w-kpi { background: #fff; border: 1px solid #ececf0; border-radius: .8em; padding: 1.1em 1.2em; position: relative; }
.w-kpi small { color: #71717a; font-size: .85em; }
.w-kpi b { display: block; font-size: 2em; font-weight: 650; letter-spacing: -.03em; margin-top: .15em; }
.w-kpi em { position: absolute; right: 1.2em; top: 1.1em; font-style: normal; font-size: .8em; color: #1f7a4d; background: #e9f6ef; padding: .1em .5em; border-radius: 1em; }
.w-kpi em.down { color: #1f7a4d; }
.w-dash { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.1em; margin: 1.1em 0; }
.w-panel { background: #fff; border: 1px solid #ececf0; border-radius: .8em; padding: 1.1em 1.3em; }
.w-panel > b { display: block; margin-bottom: .6em; }
.w-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.w-chart { width: 100%; height: 11em; color: #5b4ff5; display: block; }
.w-seg { display: inline-flex; background: #f1f1f4; border-radius: .5em; padding: .2em; font-size: .85em; }
.w-seg i { font-style: normal; padding: .3em .8em; border-radius: .35em; color: #5b5b64; }
.w-seg i.on { background: #fff; color: #18181b; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.w-act { display: flex; align-items: center; gap: .8em; padding: .55em 0; font-size: .92em; border-bottom: 1px solid #f3f3f5; }
.w-act small { margin-left: auto; color: #71717a; font-size: .85em; }
.w-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.w-table th { text-align: left; font-weight: 500; color: #71717a; font-size: .85em; padding: .6em .8em; border-bottom: 1px solid #ececf0; }
.w-table td { padding: .75em .8em; border-bottom: 1px solid #f3f3f5; vertical-align: middle; }
.w-table td b { display: block; font-weight: 550; }
.w-table td small { color: #71717a; font-size: .85em; }
.w-table td .w-av { margin-right: .6em; vertical-align: middle; }
.w-table td:first-child b { display: inline; }
.w-table td:first-child small { display: block; }
.w-pill { display: inline-block; border-radius: 2em; padding: .25em .8em; font-size: .82em; font-weight: 550; }
.w-pill.scheduled { background: #eef0ff; color: #4054c8; }
.w-pill.inprogress { background: #fff4e0; color: #9a5b00; }
.w-pill.overdue { background: #fdeceb; color: #b42318; }
.w-pill.done { background: #e8f5ee; color: #1f7a4d; }
.w-cb { width: 1.1em; height: 1.1em; border: 1.5px solid #c8c8d0; border-radius: .3em; display: inline-block; vertical-align: middle; }
.w-cb.on { background: #5b4ff5; border-color: #5b4ff5; }
.w-filters { display: flex; gap: .6em; margin-bottom: 1.1em; font-size: .9em; }
.w-filters span { padding: .45em 1em; border-radius: 2em; background: #fff; border: 1px solid #e4e4ea; }
.w-filters .on { background: #18181b; color: #fff; border-color: #18181b; }
.w-filters .w-filter-btn { border-radius: .5em; }
.w-filters .w-filter-btn:first-of-type { margin-left: auto; }
.w-tabs { display: flex; gap: 1.8em; border-bottom: 1px solid #e4e4ea; margin-bottom: 1.2em; color: #71717a; }
.w-tabs span { padding: .7em 0; }
.w-tabs .on { color: #18181b; box-shadow: inset 0 -2px 0 #5b4ff5; font-weight: 550; }
.w-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.1em; }
.w-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3em 1.6em; }
.w-dl dt { color: #71717a; font-size: .85em; }
.w-dl dd { font-weight: 550; margin-top: .2em !important; }
.w-tl { display: flex; gap: .8em; align-items: center; padding: .6em 0; font-size: .92em; }
.w-tl i { width: .7em; height: .7em; border-radius: 50%; background: #d4d4dc; flex: none; }
.w-tl.now i { background: #5b4ff5; box-shadow: 0 0 0 .3em #e7e4fd; }
.w-tl small { margin-left: auto; color: #71717a; }
.w-formgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.1em; }
.w-formgrid .w-panel > b { margin-bottom: 1em; }
.w-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.mk-webapp label i { height: 2.6em; border-color: #e4e4ea; }
.mk-webapp label.tall i { height: 6em; }
.mk-webapp label i.sel { position: relative; }
.mk-webapp label i.sel::after { content: '▾'; position: absolute; right: .8em; top: .55em; font-style: normal; color: #71717a; }
.w-toggle { display: flex; gap: .8em; align-items: center; padding: .7em 0; font-size: .95em; }
.w-toggle i { width: 2.4em; height: 1.4em; border-radius: 1em; background: #d6d6dd; position: relative; flex: none; }
.w-toggle i::after { content: ''; position: absolute; top: .2em; left: .2em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.w-toggle i.on { background: #5b4ff5; }
.w-toggle i.on::after { left: 1.2em; }
.w-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.w-col { background: #ededf1; border-radius: .8em; padding: 1em; min-height: 36em; }
.w-col > b small { color: #6b6b74; font-weight: 400; margin-left: .3em; }
.w-tcard { background: #fff; border-radius: .6em; padding: .9em 1em; margin-top: .8em; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.w-tcard .w-av { margin-top: .3em; }
.w-bars { display: flex; align-items: flex-end; gap: .9em; height: 15em; margin-top: 1em; padding-bottom: .4em; border-bottom: 1px solid #ececf0; }
.w-bars i { flex: 1; background: #5b4ff5; border-radius: .3em .3em 0 0; opacity: .85; }
.w-donut { width: 13em; display: block; margin: .8em auto; transform: rotate(-90deg); }
.w-donut circle { fill: none; stroke: #5b4ff5; stroke-width: 6; }
.w-donut circle.b { stroke: #a294ff; }
.w-donut circle.c { stroke: #dcd7ff; }
.w-legend { display: flex; gap: .5em; align-items: center; justify-content: center; font-size: .85em; color: #52525b; }
.w-legend i { width: .8em; height: .8em; border-radius: .2em; background: #5b4ff5; display: inline-block; margin-left: .6em; }
.w-legend i.b { background: #a294ff; } .w-legend i.c { background: #dcd7ff; }
.w-role { border: 1px solid #e4e4ea; border-radius: .4em; padding: .3em .7em; font-size: .9em; }
.w-settings { display: grid; grid-template-columns: 12em 1fr; gap: 1.2em; }
.w-settings nav { display: grid; gap: .2em; align-content: start; }
.w-settings nav span { padding: .6em .9em; border-radius: .5em; color: #52525b; }
.w-settings nav .on { background: #fff; color: #18181b; box-shadow: 0 0 0 1px #ececf0; font-weight: 550; }
.w-auth { height: 100%; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 0%, #ebe8ff, #f6f6f8); }
.w-auth-card { background: #fff; width: 28em; padding: 2.6em; border-radius: 1.1em; box-shadow: 0 1.5em 3em -1.5em rgba(40, 30, 120, .25); display: grid; gap: .4em; }
.w-auth-card h4 { font-size: 1.5em; font-weight: 650; margin: .2em 0 1em; letter-spacing: -.02em; }
.w-auth-card .w-logo { margin: 0; }
.w-auth-card small { text-align: center; color: #5b4ff5; margin-top: .8em; }
.w-or { text-align: center; color: #71717a; font-size: .85em; margin: .6em 0; }

/* ---------- 6. Mobile — Pulse ---------- */
.mk-mobile .m-screen, .phone .m-screen { background: #f6f5f1; color: #161616; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.3; }
.m-status { display: flex; justify-content: space-between; align-items: center; padding: .9em 1.6em .3em; position: relative; z-index: 3; }
.m-status b { font-size: .85em; font-weight: 600; }
.m-status.light { color: #fff; }
.m-island { width: 5.6em; height: 1.65em; background: #000; border-radius: 1em; }
.m-sig { font-size: .55em; letter-spacing: .05em; }
.m-pad { padding: .9em 1.4em; }
.m-screen h4 { font-size: 1.6em; letter-spacing: -.025em; margin: .3em 0 .8em; font-weight: 700; }
.m-muted { color: #6a6760; font-size: .85em; }
.m-btn { display: block; text-align: center; padding: .9em; border-radius: 1em; background: #1b4d3e; color: #fff; margin-top: .7em; font-weight: 600; font-size: .9em; }
.m-btn.light { background: #fff; color: #161616; }
.m-btn.m-black { background: #000; }
.m-btn.outline { background: transparent; border: 1px solid #d6d3cc; color: #161616; }
.m-tabs { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: .7em 0 1.7em; background: rgba(255, 255, 255, .92); border-top: 1px solid #e7e5e0; color: #6f6c65; }
.m-tabs span { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.m-tabs small { font-size: .62em; }
.m-tabs .on { color: #1b4d3e; }
.m-tabs .mk-ic svg { width: 1.3em; height: 1.3em; }
.phone .m-welcome, .m-welcome { color: #fff; }
.m-bg { position: absolute !important; inset: 0; }
.m-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .2)); }
.m-welcome-copy { position: absolute; left: 1.6em; right: 1.6em; bottom: 2.2em; }
.m-logo { font-weight: 800; letter-spacing: -.04em; font-size: 1.3em; }
.m-logo.m-darklogo { color: #1b4d3e; display: block; margin-top: 1.6em; }
.m-welcome h4 { font-size: 2.5em; line-height: 1.02; margin: .4em 0 .3em; }
.m-welcome p { opacity: .85; font-size: .9em; }
.m-dots { display: flex; gap: .35em; margin: 1.2em 0 .6em; }
.m-dots i { width: .4em; height: .4em; border-radius: 1em; background: rgba(255, 255, 255, .4); }
.m-dots i.on { width: 1.3em; background: #fff; }
.m-or { text-align: center; color: #6f6c65; font-size: .8em; margin: .9em 0 .4em; }
.m-fine { display: block; color: #6f6c65; font-size: .7em; margin-top: 1em; text-align: center; }
.phone label { font-size: .8em; margin: .4em 0 0; }
.phone label i { height: 2.8em; border-radius: .8em; border-color: #e1ded7; }
.m-chips { display: flex; gap: .4em; margin-bottom: .6em; }
.m-chips span { padding: .4em .9em; border-radius: 2em; background: #fff; font-size: .78em; border: 1px solid #e7e5e0; }
.m-chips .on { background: #161616; color: #fff; border-color: #161616; }
.m-h { display: block; margin: 1em 0 .1em; font-size: .95em; }
.m-class { margin-top: .7em; background: #fff; border-radius: 1.1em; overflow: hidden; }
.m-class img { height: 7.5em !important; }
.m-class div { padding: .7em .9em .8em; }
.m-class small, .m-row small, .m-note small { display: block; color: #6a6760; font-size: .75em; margin-top: .15em; }
.m-search { background: #fff; border-radius: 1em; padding: .8em 1em; color: #6f6c65; display: flex; gap: .5em; align-items: center; font-size: .85em; border: 1px solid #e7e5e0; }
.m-search .mk-ic svg { width: 1em; height: 1em; }
.m-cats { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: 1em; }
.m-cats div { position: relative; height: 9em; border-radius: 1em; overflow: hidden; }
.m-cats div::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 60%); }
.m-cats b { position: absolute; left: .8em; bottom: .7em; color: #fff; z-index: 1; font-size: .95em; }
.m-cover { position: absolute !important; top: 0; height: 17em !important; }
.m-sheet { position: absolute; top: 15em; bottom: 0; left: 0; right: 0; background: #f6f5f1; border-radius: 1.6em 1.6em 0 0; padding: 1.5em 1.4em; }
.m-sheet h4 { margin: .2em 0 .5em; }
.m-meta { display: flex; gap: .9em; font-size: .75em; color: #6a6760; align-items: center; }
.m-meta span { display: flex; gap: .3em; align-items: center; }
.m-meta .mk-ic svg { width: 1.1em; height: 1.1em; }
.m-teacher { display: flex; gap: .7em; align-items: center; margin: 1.1em 0 .6em; }
.m-teacher small { display: block; color: #6a6760; font-size: .75em; }
.m-av { width: 2.7em; height: 2.7em; border-radius: 50%; background: #dceae3; color: #1b4d3e; display: grid; place-items: center; font-weight: 700; font-size: .8em; flex: none; }
.m-av.lg { width: 5em; height: 5em; font-size: 1.3em; margin: 1em auto .5em; }
.m-line { display: block; height: .45em; background: #161616; opacity: .1; border-radius: .2em; margin: .6em 0; }
.m-sheet .m-btn { position: absolute; left: 1.4em; right: 1.4em; bottom: 2em; }
.m-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; margin-bottom: 1em; }
.m-days span { background: #fff; border-radius: .8em; padding: .55em 0; text-align: center; border: 1px solid #e7e5e0; }
.m-days span.on { background: #1b4d3e; color: #fff; border-color: #1b4d3e; }
.m-days small { display: block; font-size: .65em; opacity: .7; }
.m-days b { font-size: 1.05em; }
.m-slot { background: #fff; border-radius: 1em; padding: .9em 1em; margin-top: .55em; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e7e5e0; }
.m-slot small { color: #6a6760; font-size: .75em; }
.m-slot.on { box-shadow: 0 0 0 2px #1b4d3e; }
.m-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.m-center .m-status { position: absolute; top: 0; left: 0; right: 0; }
.m-center .m-btn { align-self: stretch; margin-left: 1.6em; margin-right: 1.6em; }
.m-check { width: 5em; height: 5em; border-radius: 50%; background: #1b4d3e; color: #fff; display: grid; place-items: center; margin-bottom: .6em; }
.m-check svg { width: 2.4em !important; height: 2.4em !important; }
.m-center h4 { margin: .3em 0 .2em; }
.m-center p { margin-bottom: 1.2em; }
.m-week { display: flex; align-items: flex-end; gap: .6em; height: 9em; background: #fff; border-radius: 1em; padding: 1em; }
.m-week span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3em; }
.m-week i { width: 100%; background: #1b4d3e; border-radius: .3em; min-height: 2px; }
.m-week small { font-size: .62em; color: #6a6760; }
.m-row { display: flex; justify-content: space-between; align-items: center; padding: .95em 0; border-bottom: 1px solid #e7e5e0; font-size: .9em; }
.m-row b { font-weight: 550; }
.m-row.danger b { color: #b3261e; }
.m-note { display: flex; gap: .8em; padding: .9em 0; border-bottom: 1px solid #e7e5e0; font-size: .9em; align-items: center; }
.m-note .mk-ic { width: 2.4em; height: 2.4em; border-radius: .7em; background: #dceae3; color: #1b4d3e; display: grid; place-items: center; flex: none; }
.m-note .mk-ic svg { width: 1.1em; height: 1.1em; }
.m-switch { width: 2.7em; height: 1.6em; border-radius: 1em; background: #d9d6cf; position: relative; }
.m-switch::after { content: ''; position: absolute; top: .2em; left: .2em; width: 1.2em; height: 1.2em; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.m-switch.on { background: #1b4d3e; }
.m-switch.on::after { left: 1.3em; }
.m-profile { text-align: center; }
.m-profile .m-row { text-align: left; }
.m-profile h4 { margin: 0; }
.mk-phoneflow { background: linear-gradient(160deg, #eef0ea, #e1e6df); border-radius: 18px; padding: 5% 4%; }
.m-flow { display: flex; align-items: center; justify-content: center; gap: 2.5%; }
.m-flow .phone { width: 28%; flex: none; box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .35); }
.m-flow .phone:nth-child(3) { transform: translateY(-4%); }
.m-arrow { width: 4%; flex: none; color: #7b8577; }
.m-arrow svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Example copy inside mockups (replaces placeholder bars) */
.mk .mk-p { margin: .35em 0 0; font-size: .88em; line-height: 1.45; opacity: .85; }
.mk .mk-name { display: block; font-weight: 600; font-size: .95em; margin-top: .3em; }
.p-foot .mk-p { opacity: .9; margin-top: .25em; }
.p-people .mk-p { margin-top: .1em; font-size: .8em; }
.p-articles .mk-name { line-height: 1.3; }
.mk .a-p { font-size: 1.05em; line-height: 1.65; opacity: .82; max-width: 30em; }
.a-split-text .a-p { margin-bottom: .6em; }
.mk .m-p { font-size: .78em; line-height: 1.45; color: #5f5d58; margin: .3em 0 0; }
.w-tcard .mk-name { font-size: .9em; margin: 0; }
.w-tcard .mk-p { font-size: .78em; margin: .1em 0 .4em; }

/* Full-height pages: content first, footer at the bottom (no empty space under short pages) */
.mk-page { display: flex; flex-direction: column; min-height: 100%; }
.mk-page > footer:last-child { margin-top: auto; }
.mk-page > .f-searchpage { height: auto; flex: 1; }
.mk-page > .a-light, .mk-page > .a-dark { height: auto; flex: 1; }
.a-page-light { background: #efeae2; }
.a-page-dark { background: #0d0d0c; }
.p-cta { display: flex; align-items: center; justify-content: space-between; gap: 2em; margin: 2.4em 4em; padding: 2em 2.4em; background: #f1f4f9; border-radius: .3em; }
.p-cta small { display: block; color: #2560c4; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4em; }
.p-cta b { font-size: 1.35em; font-weight: 600; }
.p-cta .p-btn { white-space: nowrap; }
.a-foot { display: grid; grid-template-columns: auto 1fr auto; gap: 3em; align-items: center; padding: 2.2em 4em; border-top: 1px solid rgba(26, 26, 24, .14); color: #4a4741; font-size: .85em; background: #efeae2; }
.a-foot b { letter-spacing: .5em; font-weight: 400; color: #1a1a18; }
.a-foot nav { display: flex; gap: 2em; }
.a-foot.dark { background: #0d0d0c; color: #a8a39a; border-top-color: rgba(239, 234, 226, .14); }
.a-foot.dark b { color: #efeae2; }
.a-legal-cols { row-gap: 2.4em; }
.f-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5em; padding: 2.4em 3em; background: #f4f3f1; font-size: .9em; color: #555; }
.f-foot small { display: block; color: #141414; font-weight: 600; margin-bottom: .6em; }
.f-foot div > span { display: block; margin: .3em 0; }
.f-foot-news b { display: block; color: #141414; font-size: 1.2em; margin-bottom: .8em; }
.f-foot-input { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #dedcd8; border-radius: 2em; padding: .5em .5em .5em 1.2em; color: #888; }
.f-foot-input i { font-style: normal; background: #141414; color: #fff; border-radius: 2em; padding: .5em 1.2em; }
.f-foot.simple { display: flex; gap: 2em; justify-content: center; background: #fff; border-top: 1px solid #eee; padding: 1.4em 3em; }
.m-perks { margin-top: 1.6em; }
.m-perks p { display: flex; align-items: center; gap: .6em; font-size: .85em; margin: .7em 0; color: #3a3833; }
.m-perks .mk-ic svg { width: 1.1em; height: 1.1em; color: #1b4d3e; }
.m-foot-note { position: absolute; left: 0; right: 0; bottom: 2.4em; text-align: center; font-size: .85em; color: #6a6760; }
.m-foot-note b { color: #1b4d3e; }
.m-summary { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 1em; padding: .9em 1em; margin-top: 1em; font-size: .9em; }
.m-summary small { display: block; color: #6a6760; font-size: .8em; margin-top: .15em; }
.m-summary span { font-weight: 600; color: #1b4d3e; }
.m-cta { position: absolute; left: 1.4em; right: 1.4em; bottom: 2em; }
.m-confirm-card { align-self: stretch; margin: 0 1.6em 1em; background: #fff; border-radius: 1em; padding: .4em 1em; text-align: left; }
.m-confirm-card div { display: flex; justify-content: space-between; padding: .65em 0; border-bottom: 1px solid #eeece7; font-size: .85em; }
.m-confirm-card div:last-child { border-bottom: 0; }
.m-confirm-card small { color: #6a6760; }
.m-label { display: block; margin: 1.3em 0 .1em; font-size: .7em; text-transform: uppercase; letter-spacing: .08em; color: #6a6760; }

.a-legal-cols { grid-template-columns: repeat(3, 1fr); }
.a-legal .a-p { font-size: 1.1em; line-height: 1.55; }
.a-press-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; margin-top: 2.6em; }
.a-press-contact small { letter-spacing: .25em; text-transform: uppercase; font-size: .75em; opacity: .6; }
.m-stats { display: flex; gap: .6em; margin: .8em 0 .2em; }
.m-stats span { flex: 1; background: #fff; border-radius: .9em; padding: .7em .8em; }
.m-stats b { display: block; font-size: 1.15em; }
.m-stats small { color: #6a6760; font-size: .72em; }

/* 0. STARTER — Kettle & Pipe Plumbing */
.mk-starter .mk-canvas { background: #fbfaf6; color: #10292a; font-family: 'Geist', -apple-system, Helvetica, Arial, sans-serif; }
.s-nav { display: flex; align-items: center; gap: 2.4em; padding: 1.3em 3.2em; background: #fbfaf6; border-bottom: 1px solid #e8e4d8; }
.s-logo { display: flex; align-items: center; gap: .5em; font-size: 1.25em; font-weight: 750; letter-spacing: -.02em; }
.s-logo .mk-ic { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .45em; background: #0f3d3e; color: #f2b632; }
.s-logo .mk-ic svg { width: 1em; height: 1em; }
.s-nav nav { display: flex; gap: 2em; margin-left: auto; font-size: .95em; color: #4c5d5d; }
.s-nav nav .on { color: #10292a; font-weight: 650; box-shadow: inset 0 -.18em 0 #f2b632; }
.s-call { background: #f2b632; color: #10292a; font-weight: 700; padding: .7em 1.2em; border-radius: .5em; font-size: .95em; }
.s-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3em; padding: 3em 3.2em 2.2em; align-items: center; }
.s-hero small, .s-head small, .s-about small, .s-form small { color: #b07a06; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8em; }
.s-hero h4 { font-size: 3.5em; line-height: 1.02; letter-spacing: -.04em; font-weight: 780; margin: .3em 0 .35em; }
.s-p { color: #4c5d5d; font-size: 1.05em; line-height: 1.5; margin: 0; }
.s-actions { display: flex; gap: .8em; margin: 1.6em 0 1.4em; }
.s-btn { display: inline-block; background: #0f3d3e; color: #fff; font-weight: 650; padding: .9em 1.5em; border-radius: .55em; }
.s-btn.ghost { background: transparent; color: #0f3d3e; box-shadow: inset 0 0 0 2px #0f3d3e; }
.s-badges { display: flex; gap: 1.4em; flex-wrap: wrap; font-size: .9em; font-weight: 600; }
.s-badges span { display: flex; align-items: center; gap: .35em; }
.s-badges .mk-ic svg { width: 1.1em; height: 1.1em; color: #1f8a5b; }
.s-hero-art { position: relative; height: 28em; border-radius: 1.4em; overflow: hidden; }
.s-hero-art svg { width: 100%; height: 100%; display: block; }
.s-slot { position: absolute; left: 1.4em; bottom: 1.4em; background: #fff; border-radius: .9em; padding: .9em 1.2em; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .4); }
.s-slot small { display: block; color: #4c5d5d; text-transform: none; letter-spacing: 0; font-weight: 500; }
.s-slot b { font-size: 1.3em; }
.s-strip { display: flex; justify-content: space-around; padding: 1.3em 3.2em; background: #0f3d3e; color: #f4efe0; font-weight: 600; font-size: .95em; }
.s-services { padding: 2.6em 3.2em 2em; }
.s-head h4, .s-about h4, .s-form h4 { font-size: 2.6em; line-height: 1.05; letter-spacing: -.035em; font-weight: 760; margin: .3em 0 .8em; }
.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; }
.s-card { background: #fff; border: 1px solid #e8e4d8; border-radius: 1em; padding: 1.3em 1.4em; }
.s-card .mk-ic { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .6em; background: #fdf3d8; color: #0f3d3e; margin-bottom: .8em; }
.s-card b { display: block; font-size: 1.15em; }
.s-card em { display: block; font-style: normal; color: #1f8a5b; font-weight: 700; margin: .2em 0 .5em; }
.s-card .s-p { font-size: .9em; }
.s-note { display: flex; align-items: center; gap: .7em; margin-top: 1.4em; padding: 1em 1.3em; background: #fdf3d8; border-radius: .8em; font-size: .95em; }
.s-about { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3.4em; padding: 3em 3.2em 2.4em; align-items: center; }
.s-portrait { height: 32em; border-radius: 1.4em; background: linear-gradient(160deg, #164e4f, #0f3d3e 60%); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8em; position: relative; }
.s-portrait span { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 4.4em; height: 4.4em; border-radius: 50%; background: #f2b632; color: #0f3d3e; display: grid; place-items: center; font-size: 2em; font-weight: 750; }
.s-portrait b { font-size: 1.4em; }
.s-portrait small { color: #cfe0dd; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .95em; }
.s-sub { display: block; margin: 1.6em 0 .8em; }
.s-areas { display: flex; flex-wrap: wrap; gap: .6em; }
.s-areas span { display: flex; align-items: center; gap: .3em; background: #fff; border: 1px solid #e8e4d8; border-radius: 2em; padding: .45em .9em; font-size: .9em; }
.s-areas .mk-ic svg { width: 1em; height: 1em; color: #b07a06; }
.s-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3em; padding: 2.6em 3.2em 2.2em; }
.s-form label { display: block; font-size: .9em; font-weight: 600; margin-bottom: .9em; }
.s-form .s-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.s-form .s-btn { margin-top: .4em; }
.s-info { display: flex; flex-direction: column; gap: 1.1em; }
.s-callcard { background: #0f3d3e; color: #fff; border-radius: 1em; padding: 1.4em 1.6em; }
.s-callcard small { color: #f2b632; text-transform: uppercase; letter-spacing: .1em; font-size: .75em; font-weight: 700; }
.s-callcard b { display: block; font-size: 2em; letter-spacing: -.02em; margin: .2em 0; }
.s-callcard span { color: #cfe0dd; font-size: .9em; }
.s-map { position: relative; flex: 1; min-height: 14em; border-radius: 1em; overflow: hidden; }
.s-map svg { width: 100%; height: 100%; display: block; }
.s-pin { position: absolute; left: 45%; top: 40%; width: 2.6em; height: 2.6em; border-radius: 50%; background: #f2b632; display: grid; place-items: center; box-shadow: 0 .6em 1.2em -.4em rgba(0, 0, 0, .4); }
.s-foot { display: flex; justify-content: space-between; gap: 2em; padding: 1.4em 3.2em; border-top: 1px solid #e8e4d8; font-size: .85em; color: #4c5d5d; background: #f4f1e8; }
.s-foot b { color: #10292a; }

/* 4b. APP STARTER — Hearth Home Cleaning client portal */
.mk-appstarter .mk-canvas { background: #fbf6f1; color: #2b211d; font-family: 'Geist', -apple-system, Helvetica, Arial, sans-serif; }
.hs-page { background: #fbf6f1; }
.hs-top { display: flex; align-items: center; gap: 3em; padding: 1.2em 3em; background: #fff; border-bottom: 1px solid #efe4da; }
.hs-logo { display: flex; align-items: center; gap: .5em; font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; }
.hs-logo i { width: 1.3em; height: 1.3em; border-radius: .4em .4em .4em 0; background: #e8644a; }
.hs-logo em { font-style: normal; font-size: .6em; background: #2b211d; color: #fff; border-radius: 2em; padding: .2em .7em; margin-left: .2em; }
.hs-logo.light { color: #fff; }
.hs-logo.light i { background: #fff; }
.hs-top nav { display: flex; gap: .4em; }
.hs-top nav span { padding: .5em 1em; border-radius: 2em; color: #7a6a61; font-size: .95em; }
.hs-top nav .on { background: #fdeae5; color: #c4462d; font-weight: 600; }
.hs-user { margin-left: auto; display: flex; align-items: center; gap: .6em; font-size: .95em; }
.hs-user i, .hs-av { font-style: normal; width: 2.2em; height: 2.2em; border-radius: 50%; background: #f4d9c9; display: grid; place-items: center; font-size: .8em; font-weight: 700; color: #7a3d26; }
.hs-btn { display: inline-block; background: #e8644a; color: #fff; font-weight: 600; padding: .85em 1.4em; border-radius: .8em; text-align: center; }
.hs-btn.sm { padding: .5em .9em; font-size: .85em; }
.hs-p { color: #f8e3dc; font-size: 1.1em; margin: 0; }
.hs-auth { display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; }
.hs-auth-art { background: linear-gradient(150deg, #e8644a, #c4462d); color: #fff; padding: 4em; display: flex; flex-direction: column; justify-content: center; }
.hs-auth-art h4 { font-size: 3.2em; line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin: 1em 0 .5em; }
.hs-auth-list { display: flex; flex-direction: column; gap: .8em; margin-top: 2em; font-weight: 500; }
.hs-auth-list span { display: flex; align-items: center; gap: .6em; }
.hs-auth-list .mk-ic svg { width: 1.2em; height: 1.2em; }
.hs-auth-form { padding: 4em 5em; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.hs-auth-form h5 { font-size: 2em; font-weight: 700; margin: 0 0 1.2em; letter-spacing: -.02em; }
.hs-auth-form label { display: block; font-size: .95em; font-weight: 600; margin-bottom: 1em; }
.hs-auth-form label i { border-color: #e6d8cc; border-radius: .7em; }
.hs-auth-form small { margin-top: 1.4em; color: #7a6a61; font-size: .9em; }
.hs-auth-form b { color: #c4462d; }
.hs-book { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.6em; padding: 2.4em 3em; flex: 1; }
.hs-step { color: #c4462d; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78em; }
.hs-book h4, .hs-list h4, .hs-inv h4 { font-size: 2.2em; font-weight: 700; letter-spacing: -.03em; margin: .25em 0 .8em; }
.hs-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.hs-option { background: #fff; border: 1.5px solid #efe4da; border-radius: 1em; padding: 1.2em; }
.hs-option.on { border-color: #e8644a; box-shadow: 0 0 0 3px #fdeae5; }
.hs-option b { display: block; font-size: 1.05em; }
.hs-option small { color: #7a6a61; }
.hs-label { display: block; margin: 1.6em 0 .7em; font-size: .95em; }
.hs-days { display: flex; gap: .6em; flex-wrap: wrap; }
.hs-days span { background: #fff; border: 1.5px solid #efe4da; border-radius: .7em; padding: .7em 1.1em; font-size: .9em; font-weight: 500; }
.hs-days .on { background: #2b211d; border-color: #2b211d; color: #fff; }
.hs-summary { background: #fff; border-radius: 1.2em; padding: 1.6em; border: 1px solid #efe4da; display: flex; flex-direction: column; gap: .2em; align-self: start; }
.hs-summary > b { font-size: 1.2em; margin-bottom: .6em; }
.hs-summary div { display: flex; justify-content: space-between; padding: .7em 0; border-bottom: 1px solid #f3eae2; font-size: .95em; }
.hs-summary div small { color: #7a6a61; }
.hs-summary .hs-btn { margin-top: 1.2em; }
.hs-fine { color: #7a6a61; text-align: center; margin-top: .6em; font-size: .85em; }
.hs-list, .hs-invoices, .hs-owner { padding: 2.4em 3em; flex: 1; }
.hs-list-head { display: flex; justify-content: space-between; align-items: center; }
.hs-list-head h4 { margin: 0; }
.hs-tabs { display: flex; gap: .5em; margin: 1.4em 0 1em; }
.hs-tabs span { padding: .45em 1em; border-radius: 2em; background: #f3eae2; font-size: .9em; color: #7a6a61; }
.hs-tabs .on { background: #2b211d; color: #fff; }
.hs-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.4em; align-items: center; background: #fff; border: 1px solid #efe4da; border-radius: 1em; padding: 1em 1.3em; margin-bottom: .8em; }
.hs-row small { display: block; color: #7a6a61; font-size: .88em; margin-top: .15em; }
.hs-date { width: 3.6em; text-align: center; background: #fdeae5; border-radius: .7em; padding: .4em 0; color: #c4462d; }
.hs-date b { display: block; font-size: 1.4em; line-height: 1; }
.hs-date small { color: #c4462d; margin: 0; }
.hs-pill { font-size: .8em; font-weight: 600; padding: .35em .9em; border-radius: 2em; }
.hs-pill.confirmed, .hs-pill.paid, .hs-pill.done { background: #e4f3ea; color: #1d7a46; }
.hs-pill.requested { background: #fff3d6; color: #8a5a00; }
.hs-pill.due { background: #fdeae5; color: #c4462d; }
.hs-more { color: #c4462d; font-weight: 600; font-size: .9em; }
.hs-invoices { display: grid; grid-template-columns: 1fr 1.8fr; gap: 2.6em; align-items: start; }
.hs-due { background: #2b211d; color: #fff; border-radius: 1.2em; padding: 1.8em; display: flex; flex-direction: column; gap: .5em; }
.hs-due small { color: #d9c9be; }
.hs-due b { font-size: 2.6em; letter-spacing: -.03em; }
.hs-due span:not(.hs-btn) { color: #d9c9be; font-size: .95em; margin-bottom: 1em; }
.hs-inv h4 { margin-top: 0; }
.hs-inv .hs-row { grid-template-columns: 1fr auto auto auto; }
.hs-amt { font-size: 1.05em; }
.hs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-bottom: 2em; }
.hs-kpis div { background: #fff; border: 1px solid #efe4da; border-radius: 1em; padding: 1.2em 1.4em; }
.hs-kpis small { color: #7a6a61; display: block; }
.hs-kpis b { font-size: 1.8em; letter-spacing: -.02em; }
.hs-owner .hs-row { grid-template-columns: auto 1fr auto auto; }

.hs-days .on.soft { background: #fdeae5; border-color: #e8644a; color: #c4462d; }
.hs-days small { color: inherit; opacity: .75; margin-left: .3em; }
.hs-note { background: #fff; border: 1.5px solid #efe4da; border-radius: .8em; padding: .9em 1.1em; color: #7a6a61; font-size: .92em; }
.hs-plan { display: flex; align-items: center; gap: 1.1em; background: #fdeae5; border-radius: 1em; padding: 1.1em 1.3em; margin-top: 1.2em; }
.hs-plan .mk-ic svg { width: 1.6em; height: 1.6em; color: #c4462d; }
.hs-plan div { flex: 1; }
.hs-plan small { display: block; color: #7a6a61; font-size: .88em; margin-top: .15em; }
.hs-card { background: #fff; border: 1px solid #efe4da; border-radius: 1.2em; padding: 1.4em 1.6em; margin-top: 1em; display: flex; flex-direction: column; gap: .3em; }
.hs-card small { color: #7a6a61; }
.hs-card b { font-size: 1.2em; }
.hs-card span { color: #7a6a61; font-size: .9em; }

/* Starter v2: photography */
.s-hero2 { position: relative; height: 34em; overflow: hidden; }
.s-hero-img { position: absolute; inset: 0; }
.s-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 30, 31, .92) 0%, rgba(8, 30, 31, .7) 45%, rgba(8, 30, 31, .1) 100%); }
.s-hero-copy { position: relative; color: #fff; padding: 4.2em 3.2em 0; max-width: 40em; }
.s-hero-copy small { color: #f2b632; }
.s-hero-copy h4 { font-size: 3.9em; line-height: 1; letter-spacing: -.045em; font-weight: 780; margin: .3em 0 .4em; }
.s-lede { color: #d6e4e2; font-size: 1.15em; line-height: 1.5; margin: 0; max-width: 30em; }
.s-btn.yellow { background: #f2b632; color: #10292a; }
.s-btn.glass { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.s-hero2 .s-slot { left: auto; right: 3.2em; bottom: 2.2em; }
.s-trust { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-bottom: 1px solid #e8e4d8; }
.s-trust span { display: flex; align-items: center; justify-content: center; gap: .55em; padding: 1.4em 1em; font-weight: 650; font-size: .95em; border-right: 1px solid #efebe0; }
.s-trust span:last-child { border-right: 0; }
.s-trust .mk-ic svg { width: 1.25em; height: 1.25em; color: #b07a06; }
.s-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; }
.s-photo-card { position: relative; height: 15em; border-radius: 1em; overflow: hidden; }
.s-photo-card > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4em 1.2em 1em; background: linear-gradient(transparent, rgba(8, 30, 31, .9)); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; }
.s-photo-card b { font-size: 1.2em; }
.s-photo-card em, .s-mini em { font-style: normal; font-weight: 700; color: #f2b632; }
.s-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; margin-top: 1.1em; }
.s-mini div { background: #fff; border: 1px solid #e8e4d8; border-radius: .9em; padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: .3em; }
.s-mini em { color: #1f8a5b; }
.s-about2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.4em; padding: 2.6em 3.2em 2.2em; align-items: center; }
.s-about2 small { color: #b07a06; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8em; }
.s-about2 h4 { font-size: 2.6em; line-height: 1.05; letter-spacing: -.035em; font-weight: 760; margin: .3em 0 .6em; }
.s-about-photo { position: relative; height: 34em; border-radius: 1.4em; overflow: hidden; }
.s-since { position: absolute; left: 1.2em; bottom: 1.2em; background: #f2b632; color: #10292a; border-radius: .9em; padding: .9em 1.2em; display: flex; flex-direction: column; }
.s-since b { font-size: 1.4em; }
.s-since small { color: #10292a !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 1.6em 0 .4em; }
.s-stats div { border-top: 3px solid #f2b632; padding-top: .7em; }
.s-stats b { display: block; font-size: 1.9em; letter-spacing: -.03em; }
.s-stats small { color: #4c5d5d !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: .9em !important; }
.s-about2 .s-areas span { padding: .45em 1em; }
.s-photo-cta { position: relative; flex: 1; min-height: 14em; border-radius: 1em; overflow: hidden; }
.s-photo-cta > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 3em 1.4em 1.2em; background: linear-gradient(transparent, rgba(8, 30, 31, .92)); color: #fff; }
.s-photo-cta b { display: block; font-size: 1.2em; }
.s-photo-cta small { color: #d6e4e2; }
.s-photo-cta { flex: none; height: 17em; min-height: 0; }