/* ============ 05-friendly.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* Friendly notice bar */
.welcome{background:var(--ink);color:var(--cream);padding:0.6rem 0;text-align:center;font-size:0.875rem;font-weight:500}
.welcome .emo{display:inline-block;margin-right:0.4rem;font-size:1rem}
.welcome a{color:var(--peach);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600;margin-left:0.5rem}
/* Nav */
nav{padding:1.5rem 0;background:var(--bg);position:sticky;top:0;z-index:50}
.nav-i{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:0.5rem;font-weight:800;font-size:1.375rem;letter-spacing:-0.02em}
.logo .leaf{width:32px;height:32px;background:var(--coral);border-radius:50% 50% 50% 0;transform:rotate(45deg);display:inline-block;position:relative}
.logo .leaf::after{content:'';position:absolute;width:4px;height:4px;background:var(--cream);border-radius:50%;top:50%;left:30%;transform:translate(-50%,-50%) rotate(-45deg)}
.nav-l{display:flex;gap:2rem;list-style:none;font-size:0.9375rem;font-weight:600}
.nav-l a{color:var(--ink);transition:color 0.2s}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.7rem 1.25rem;background:var(--ink);color:var(--cream);border-radius:14px;font-weight:700;font-size:0.875rem;transition:transform 0.2s,background 0.2s}
.nav-cta:hover{background:var(--coral);transform:translateY(-2px)}
@media(max-width:768px){.nav-l{display:none}}
/* Hero */
.hero{padding:5rem 0 6rem;position:relative;overflow:hidden}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;z-index:0;opacity:0.5}
.hero::before{width:300px;height:300px;background:var(--peach);top:-100px;right:-50px;filter:blur(40px)}
.hero::after{width:240px;height:240px;background:var(--mint);bottom:-50px;left:-80px;filter:blur(50px)}
.hero-i{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.tag-line{display:inline-flex;align-items:center;gap:0.5rem;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0.5rem 1rem;font-size:0.8125rem;font-weight:700;margin-bottom:1.5rem;box-shadow:3px 3px 0 var(--ink)}
.tag-line .dot{width:8px;height:8px;background:var(--coral);border-radius:50%}
h1{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-0.03em;margin-bottom:1.5rem;color:var(--ink)}
h1 .hl{position:relative;display:inline-block}
h1 .hl::after{content:'';position:absolute;left:-2%;right:-2%;bottom:8%;height:35%;background:var(--peach);z-index:-1;border-radius:4px}
h1 .scribble{font-family:'Caveat',cursive;color:var(--coral);font-weight:700;display:inline-block;transform:rotate(-4deg);font-size:0.85em}
.lede{font-size:1.125rem;color:var(--ink-2);max-width:520px;margin-bottom:2rem;line-height:1.65}
.lede strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 65%,var(--peach) 65%);padding:0 0.15rem}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-p{padding:1rem 1.875rem;background:var(--coral);color:#fff;border-radius:14px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:0.5rem;box-shadow:5px 5px 0 var(--ink);transition:all 0.15s;border:2px solid var(--ink)}
.btn-p:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-p:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-s{padding:1rem 1.5rem;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;font-weight:700;font-size:1rem;transition:all 0.15s;box-shadow:5px 5px 0 var(--ink)}
.btn-s:hover{background:var(--mint);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.hero-illust{position:relative;display:flex;justify-content:center;align-items:center;min-height:400px}
.illust-card{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:1.5rem;box-shadow:8px 8px 0 var(--ink);position:relative;width:280px;transform:rotate(-3deg)}
.illust-card .pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;background:var(--coral);border:2px solid var(--ink);border-radius:50%;box-shadow:2px 2px 0 var(--ink)}
.illust-card h4{font-size:0.875rem;font-weight:800;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:space-between}
.illust-card .stamp{font-size:0.625rem;background:var(--mint);padding:0.15rem 0.5rem;border-radius:999px;border:1.5px solid var(--ink);font-weight:700}
.illust-card .lines{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}
.illust-card .line{height:8px;background:var(--peach);border-radius:4px}
.illust-card .line.w70{width:70%}
.illust-card .line.w50{width:50%}
.illust-card .line.w85{width:85%}
.illust-card .footer{display:flex;justify-content:space-between;align-items:center;padding-top:0.75rem;border-top:2px dashed var(--ink)}
.illust-card .footer .who{font-size:0.75rem;font-weight:700}
.illust-card .footer .heart{font-size:1.25rem}
.illust-card-2{position:absolute;top:30%;right:-10%;background:var(--mint);border:2px solid var(--ink);border-radius:18px;padding:1rem 1.25rem;font-size:0.8125rem;font-weight:700;box-shadow:4px 4px 0 var(--ink);transform:rotate(5deg)}
.illust-card-2::before{content:'';position:absolute;left:-12px;bottom:8px;width:0;height:0;border:8px solid transparent;border-right-color:var(--mint);border-left:none}
.illust-stamp{position:absolute;bottom:0;left:10%;font-family:'Caveat',cursive;font-size:1.75rem;color:var(--coral);font-weight:700;transform:rotate(-12deg)}
@media(max-width:900px){.hero-i{grid-template-columns:1fr}.hero-illust{order:-1}}
/* Marquee */
.marquee{padding:2rem 0;background:var(--ink);color:var(--cream);overflow:hidden;border-top:3px solid var(--coral);border-bottom:3px solid var(--coral)}
.mar-track{display:flex;gap:3rem;white-space:nowrap;animation:scroll 30s linear infinite;font-size:1.125rem;font-weight:700}
.mar-track span{display:inline-flex;align-items:center;gap:1rem}
.mar-track .star{color:var(--coral);font-size:1.5rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Section heading */
.sh{text-align:center;margin-bottom:4rem;position:relative}
.sh .scribble{font-family:'Caveat',cursive;color:var(--coral);font-size:1.5rem;font-weight:700;display:inline-block;transform:rotate(-3deg);margin-bottom:0.5rem}
.sh h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-0.025em;line-height:1.1;color:var(--ink);max-width:680px;margin:0.5rem auto 1rem}
.sh h2 em{font-style:normal;background:linear-gradient(transparent 60%,var(--peach) 60%);padding:0 0.15rem}
.sh p{color:var(--ink-2);max-width:520px;margin:0 auto;font-size:1rem;line-height:1.6}
/* Services */
.svc-sec{padding:6rem 0;background:var(--paper)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.svc-card{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1.75rem;transition:all 0.2s;position:relative;box-shadow:5px 5px 0 var(--ink);text-decoration:none;color:inherit;display:block}
.svc-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.svc-card .ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.svc-card.c1 .ico{background:var(--peach)}
.svc-card.c2 .ico{background:var(--mint)}
.svc-card.c3 .ico{background:var(--rose)}
.svc-card.c4 .ico{background:#ffe066}
.svc-card.c5 .ico{background:#b8e0d2}
.svc-card.c6 .ico{background:#ffc4b8}
.svc-card.c7 .ico{background:#d4b8ff}
.svc-card.c8 .ico{background:#ffb3c1}
.svc-card a{text-decoration:none;color:inherit;display:block;height:100%}
.svc-card.linkable{cursor:pointer}
.svc-card.linkable:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.svc-card.linkable .more{margin-top:1rem;font-size:.875rem;font-weight:700;color:var(--coral);display:inline-flex;align-items:center;gap:.25rem;opacity:0;transition:opacity .2s,gap .2s}
.svc-card.linkable:hover .more{opacity:1;gap:.5rem}
.svc-card h3{font-size:1.25rem;font-weight:800;margin-bottom:0.5rem;letter-spacing:-0.015em}
.svc-card p{color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
/* Why us */
.why{padding:6rem 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.why-c{background:var(--cream);border:2px solid var(--ink);border-radius:20px;padding:2rem;text-align:center;transition:transform 0.2s;box-shadow:5px 5px 0 var(--ink)}
.why-c:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.why-c .big{font-size:3rem;display:block;margin-bottom:1rem}
.why-c h4{font-size:1.125rem;font-weight:800;margin-bottom:0.5rem;letter-spacing:-0.015em}
.why-c p{color:var(--ink-2);font-size:0.9375rem;line-height:1.55}
@media(max-width:768px){.why-grid{grid-template-columns:1fr}}
/* Testimonials */
.testi{padding:6rem 0;background:var(--paper)}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.t-card{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem;position:relative;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s}
.t-card:hover{transform:rotate(-1deg)}
.t-card:nth-child(2):hover{transform:rotate(1deg)}
.t-card .stars{color:#fbbf24;font-size:1.125rem;margin-bottom:0.75rem;letter-spacing:0.1em}
.t-card .text{font-size:1.0625rem;line-height:1.6;color:var(--ink);margin-bottom:1.5rem;font-weight:500}
.t-card .who{display:flex;align-items:center;gap:0.75rem;padding-top:1rem;border-top:2px dashed var(--ink)}
.t-card .av{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:0.9375rem}
.t-card:nth-child(1) .av{background:var(--coral)}
.t-card:nth-child(2) .av{background:var(--teal)}
.t-card .name{font-weight:800;font-size:0.9375rem}
.t-card .role{font-size:0.8125rem;color:var(--ink-2)}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}}
/* Process */
.proc{padding:6rem 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.s-c{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1.75rem;text-align:center;position:relative;box-shadow:5px 5px 0 var(--ink)}
.s-c .n{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--cream);font-weight:800;font-size:1.125rem;margin:0 auto 1rem;border:2px solid var(--ink)}
.s-c:nth-child(2) .n{background:var(--coral)}
.s-c:nth-child(3) .n{background:var(--teal)}
.s-c:nth-child(4) .n{background:#fbbf24;color:var(--ink)}
.s-c h4{font-size:1rem;font-weight:800;margin-bottom:0.4rem;letter-spacing:-0.01em}
.s-c p{font-size:0.875rem;color:var(--ink-2);line-height:1.55}
@media(max-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
/* CTA */
.cta-sec{padding:6rem 0}
.cta-card{background:var(--coral);border:3px solid var(--ink);border-radius:32px;padding:4.5rem 3rem;text-align:center;color:#fff;position:relative;box-shadow:12px 12px 0 var(--ink);overflow:hidden}
.cta-card::before{content:'☕';position:absolute;font-size:8rem;opacity:0.15;top:-1rem;left:1rem;transform:rotate(-15deg)}
.cta-card::after{content:'✏️';position:absolute;font-size:7rem;opacity:0.15;bottom:-1rem;right:1rem;transform:rotate(15deg)}
.cta-i{position:relative;z-index:1}
.cta-i .scribble{font-family:'Caveat',cursive;color:#fff;font-size:1.75rem;font-weight:700;margin-bottom:0.5rem;display:inline-block;transform:rotate(-3deg)}
.cta-i h2{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem}
.cta-i p{font-size:1.125rem;max-width:480px;margin:0 auto 2rem;opacity:0.95;line-height:1.5}
.cta-i .btn-w{padding:1.125rem 2.25rem;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:16px;font-weight:800;font-size:1rem;display:inline-flex;align-items:center;gap:0.5rem;box-shadow:6px 6px 0 var(--ink);transition:all 0.15s}
.cta-i .btn-w:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
/* Footer */
footer{padding:4rem 0 2rem;background:var(--bg);border-top:2px dashed var(--ink)}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.foot-brand .logo{margin-bottom:1rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.9375rem;font-weight:800;color:var(--ink);margin-bottom:1rem}
.foot-c a{display:block;font-size:0.875rem;color:var(--ink-2);margin-bottom:0.5rem;font-weight:500;transition:color 0.2s}
.foot-c a:hover{color:var(--coral)}
.copy{padding-top:2rem;border-top:2px dashed var(--ink);display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--ink-2);font-weight:500;flex-wrap:wrap;gap:1rem}
.copy .made{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--coral);font-weight:700}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ 05-friendly.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ 05-friendly.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ about.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3;--lavender:#d4b8ff;--yellow:#ffe066}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* HERO */
.hero{padding:4rem 0 3rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-120px;width:380px;height:380px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.5}
.hero::after{content:'';position:absolute;bottom:-60px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.3}
.hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1rem}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.eye{display:inline-block;font-family:'Caveat',cursive;font-size:1.625rem;color:var(--coral);font-weight:700;transform:rotate(-3deg);margin-bottom:0.5rem}
h1{font-size:clamp(2.25rem,6vw,4rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem}
h1 em{font-style:italic;color:var(--coral)}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:1.5rem;max-width:620px;margin-left:auto;margin-right:auto}
/* STORY */
.story{padding:3rem 0 5rem}
.story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
.story-text h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem}
.story-text h2 em{font-style:italic;color:var(--coral)}
.story-text .lbl{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem}
.story-text p{font-size:1.0625rem;color:var(--ink-2);margin-bottom:1.125rem;max-width:560px}
.story-text p strong{color:var(--ink);font-weight:700}
.story-text p em{font-style:italic;color:var(--coral);font-weight:600;font-style:normal;background:linear-gradient(transparent 65%,rgba(255,122,89,0.3) 65%);padding:0 0.1em}
.story-art{position:relative;display:flex;align-items:center;justify-content:center;padding:2rem}
.story-photo{aspect-ratio:1;background:linear-gradient(135deg,var(--coral),var(--coral-d),var(--ink));border-radius:32px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);max-width:380px;width:100%;position:relative;overflow:hidden;transform:rotate(-2deg);display:flex;align-items:flex-end;padding:2rem;color:#fff}
.story-photo::before{content:'';position:absolute;top:1.5rem;right:1.5rem;width:60px;height:60px;background:var(--yellow);border-radius:50%;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.story-photo::after{content:'';position:absolute;top:30%;left:1.5rem;width:50px;height:50px;background:var(--mint);border-radius:50%;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.photo-cap{position:relative;z-index:1;font-family:'Caveat',cursive;font-size:2.25rem;line-height:1;transform:rotate(2deg)}
.photo-cap small{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.8125rem;font-weight:600;opacity:0.85;margin-top:0.25rem;letter-spacing:0.05em;text-transform:uppercase}
@media(max-width:768px){.story-grid{grid-template-columns:1fr;gap:2rem}}
/* VALUES */
.values{padding:5rem 0;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sh{text-align:center;max-width:720px;margin:0 auto 3rem}
.sh .lbl{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem}
.sh h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2)}
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.val{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1.75rem;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s}
.val:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.val .ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.625rem;margin-bottom:1rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.val.v1 .ico{background:var(--peach)}
.val.v2 .ico{background:var(--mint)}
.val.v3 .ico{background:var(--rose)}
.val.v4 .ico{background:var(--lavender)}
.val.v5 .ico{background:var(--yellow)}
.val.v6 .ico{background:#b8e0d2}
.val h3{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:0.4rem}
.val p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TEAM */
.team{padding:5rem 0}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:3rem}
.member{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1.75rem;text-align:center;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s}
.member:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans';font-weight:800;font-size:2.25rem;color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.member.m1 .avatar{background:linear-gradient(135deg,var(--coral),var(--coral-d))}
.member.m2 .avatar{background:linear-gradient(135deg,#8b5cf6,var(--lavender))}
.member.m3 .avatar{background:linear-gradient(135deg,var(--teal),#06b6d4)}
.member.m4 .avatar{background:linear-gradient(135deg,#ec4899,#f97316)}
.member h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:0.15rem}
.member .role{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--coral);margin-bottom:0.875rem}
.member .bio{font-size:0.875rem;color:var(--ink-2);line-height:1.55;margin-bottom:1rem}
.member .socials{display:flex;gap:0.5rem;justify-content:center}
.member .socials a{width:32px;height:32px;border-radius:8px;background:var(--bg);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:0.875rem;transition:all 0.15s}
.member .socials a:hover{background:var(--coral);color:#fff;transform:translateY(-1px)}
/* TIMELINE */
.timeline{padding:5rem 0;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.tl-list{max-width:760px;margin:3rem auto 0;position:relative;padding-left:2.5rem}
.tl-list::before{content:'';position:absolute;left:14px;top:8px;bottom:8px;width:3px;background:var(--coral);border-radius:2px}
.tl-row{position:relative;margin-bottom:2rem}
.tl-row::before{content:'';position:absolute;left:-2.5rem;top:0.3rem;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--coral);display:flex;align-items:center;justify-content:center}
.tl-row .yr{font-family:'Caveat',cursive;font-size:1.625rem;color:var(--coral);font-weight:700;display:inline-block;margin-bottom:0.25rem;transform:rotate(-2deg)}
.tl-row h4{font-size:1.1875rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:0.4rem}
.tl-row p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55;max-width:560px}
/* STATS */
.stats{padding:5rem 0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.stat{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:1.75rem 1.25rem;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.stat .num{font-size:clamp(2rem,3.5vw,3rem);font-weight:800;letter-spacing:-0.025em;line-height:1;margin-bottom:0.25rem;color:var(--ink)}
.stat .num .accent{color:var(--coral)}
.stat .lbl{font-size:0.8125rem;color:var(--ink-2);font-weight:600;letter-spacing:0.05em;text-transform:uppercase}
@media(max-width:768px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
/* CTA */
.cta{padding:5rem 1.5rem;text-align:center}
.cta-card{background:linear-gradient(135deg,var(--ink),#3d2515);border:3px solid var(--ink);border-radius:32px;padding:4rem 2.5rem;max-width:880px;margin:0 auto;color:var(--cream);position:relative;overflow:hidden;box-shadow:10px 10px 0 var(--coral)}
.cta-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.5}
.cta-card::after{content:'';position:absolute;bottom:-60px;left:-60px;width:200px;height:200px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.3}
.cta-card .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.25rem;transform:rotate(-2deg);position:relative}
.cta-card h2{font-size:clamp(1.875rem,4vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:#fff;margin-bottom:1rem;position:relative}
.cta-card h2 em{font-style:italic;color:var(--coral)}
.cta-card p{font-size:1.0625rem;opacity:0.85;margin-bottom:2rem;max-width:520px;margin-left:auto;margin-right:auto;position:relative}
.btn-coral{padding:0.875rem 1.75rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--cream);box-shadow:5px 5px 0 var(--cream);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem;position:relative;text-decoration:none}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px;margin-top:0.75rem}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ about.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ about.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ blog.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3;--lavender:#d4b8ff;--yellow:#ffe066}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a{transition:color 0.15s}
.nav-l a.cur{color:var(--coral);font-weight:700}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 3rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.5;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-60px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.3;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.eye{display:inline-block;font-family:'Caveat',cursive;font-size:1.625rem;color:var(--coral);font-weight:700;transform:rotate(-3deg);margin-bottom:0.5rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem}
h1 em{font-style:italic;color:var(--coral)}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.tags{display:inline-flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-top:1rem}
.tag{padding:0.4rem 0.875rem;background:#fff;border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:all 0.15s;box-shadow:2px 2px 0 var(--ink)}
.tag:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.tag.active{background:var(--ink);color:var(--cream)}
/* FEATURED POST */
.featured{padding:2rem 0 4rem}
.feat-card{background:#fff;border:3px solid var(--ink);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;box-shadow:8px 8px 0 var(--ink);transition:transform 0.2s}
.feat-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.feat-img{background:linear-gradient(135deg,var(--coral),var(--coral-d) 60%,var(--ink));display:flex;align-items:center;justify-content:center;padding:3rem;position:relative;overflow:hidden;min-height:340px}
.feat-img::before{content:'';position:absolute;top:1rem;right:1rem;width:80px;height:80px;background:var(--yellow);border-radius:50%;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.feat-img .emoji{font-size:5rem;position:relative;z-index:1;text-shadow:0 4px 12px rgba(0,0,0,0.3)}
.feat-body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.feat-meta{display:flex;gap:0.75rem;font-size:0.8125rem;color:var(--ink-2);margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.feat-meta .pill{padding:0.25rem 0.75rem;background:var(--coral);color:#fff;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:0.6875rem}
.feat-meta .cat{padding:0.25rem 0.75rem;background:var(--cream);border:1px solid var(--ink);border-radius:999px;font-weight:600;font-size:0.75rem}
.feat-body h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.feat-body p{font-size:1rem;color:var(--ink-2);margin-bottom:1.5rem}
.feat-cta{display:inline-flex;align-items:center;gap:0.4rem;font-weight:700;color:var(--coral);font-size:0.9375rem}
.feat-cta:hover{gap:0.6rem;color:var(--coral-d)}
.feat-author{margin-top:auto;padding-top:1.25rem;border-top:2px dashed rgba(45,27,14,0.15);display:flex;align-items:center;gap:0.75rem;font-size:0.8125rem;color:var(--ink-2)}
.author-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.875rem}
@media(max-width:768px){.feat-card{grid-template-columns:1fr}.feat-img{min-height:220px}.feat-body{padding:1.75rem}}
/* POSTS GRID */
section.posts{padding:2rem 0 5rem}
.sh{margin-bottom:2.5rem;display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sh h3{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;letter-spacing:-0.02em}
.sh h3 em{font-style:italic;color:var(--coral)}
.sh .count{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--ink-2);transform:rotate(-2deg)}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.5rem}
.post{background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s;display:flex;flex-direction:column}
.post:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.post-img{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden}
.post-img.p1{background:linear-gradient(135deg,var(--peach),var(--rose))}
.post-img.p2{background:linear-gradient(135deg,var(--mint),var(--teal))}
.post-img.p3{background:linear-gradient(135deg,var(--lavender),#9b87f5)}
.post-img.p4{background:linear-gradient(135deg,var(--yellow),var(--peach))}
.post-img.p5{background:linear-gradient(135deg,var(--cream),var(--peach));color:var(--ink)}
.post-img.p6{background:linear-gradient(135deg,var(--rose),var(--coral));color:#fff}
.post-img.p7{background:linear-gradient(135deg,var(--mint),var(--yellow));color:var(--ink)}
.post-img.p8{background:linear-gradient(135deg,var(--lavender),var(--mint));color:var(--ink)}
.post-img.p9{background:linear-gradient(135deg,var(--cream),var(--yellow));color:var(--ink)}
.post-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.post-meta{display:flex;gap:0.625rem;font-size:0.75rem;color:var(--ink-2);margin-bottom:0.75rem;align-items:center;flex-wrap:wrap}
.post-meta .cat{padding:0.2rem 0.625rem;background:var(--cream);border:1px solid var(--ink);border-radius:999px;font-weight:700;font-size:0.6875rem}
.post-meta .read{display:inline-flex;align-items:center;gap:0.2rem}
.post h4{font-size:1.1875rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.625rem}
.post p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55;margin-bottom:1.25rem;flex:1}
.post-foot{display:flex;align-items:center;justify-content:space-between;font-size:0.8125rem;color:var(--ink-2);margin-top:auto}
.post-foot .arrow{color:var(--coral);font-weight:700;font-size:1.125rem}
/* PAGINATION */
.pagination{display:flex;justify-content:center;align-items:center;gap:0.5rem;margin-top:3rem}
.pg{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:2px solid var(--ink);font-weight:700;cursor:pointer;font-size:0.9375rem;transition:all 0.15s}
.pg:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.pg.active{background:var(--ink);color:var(--cream)}
.pg.disabled{opacity:0.3;cursor:not-allowed}
/* NEWSLETTER */
.newsletter{padding:4rem 0;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.newsletter::before{content:'';position:absolute;top:-80px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.35}
.newsletter::after{content:'';position:absolute;bottom:-80px;right:-80px;width:260px;height:260px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.news-inner{position:relative;max-width:680px;margin:0 auto;text-align:center}
.news-inner .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.news-inner h2{font-size:clamp(1.875rem,4vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:#fff;margin-bottom:1rem}
.news-inner h2 em{font-style:italic;color:var(--coral)}
.news-inner p{font-size:1.0625rem;opacity:0.85;margin-bottom:2rem}
.news-form{display:flex;gap:0.75rem;max-width:480px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--cream);border-radius:12px;font-family:inherit;font-size:0.9375rem;color:var(--ink)}
.news-form button{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border:2px solid var(--cream);border-radius:12px;font-weight:700;font-size:0.9375rem;cursor:pointer;font-family:inherit;transition:all 0.15s}
.news-form button:hover{background:var(--coral-d);transform:translateY(-1px)}
.news-note{margin-top:1rem;font-size:0.8125rem;opacity:0.65}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ blog.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ blog.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ blog-post-homepage-copy.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3;--lavender:#d4b8ff;--yellow:#ffe066}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:780px;margin:0 auto;padding:0 1.5rem}
/* HERO */
.post-hero{padding:3rem 0 1.5rem;text-align:center;position:relative;overflow:hidden}
.post-hero::before{content:'';position:absolute;top:-100px;right:-120px;width:380px;height:380px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.5}
.post-hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:280px;height:280px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.3}
.post-hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.post-cat{display:inline-block;padding:0.4rem 0.875rem;background:#fff;border:2px solid var(--ink);border-radius:999px;font-size:0.75rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem;color:var(--ink)}
h1 em{font-style:italic;color:var(--coral)}
.post-meta{display:inline-flex;align-items:center;gap:1rem;font-size:0.875rem;color:var(--ink-2);flex-wrap:wrap;justify-content:center}
.post-meta .author{display:flex;align-items:center;gap:0.5rem}
.post-meta .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.75rem;border:2px solid var(--ink)}
.post-meta strong{color:var(--ink);font-weight:700}
.post-meta .dot{opacity:0.4}
/* FEATURED IMAGE */
.post-art{padding:2rem 0 3rem}
.post-art-card{aspect-ratio:21/9;background:linear-gradient(135deg,var(--coral),var(--coral-d) 50%,var(--ink));border:3px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:2rem}
.post-art-card::before{content:'';position:absolute;top:2rem;right:2rem;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.post-art-card::after{content:'';position:absolute;bottom:2rem;left:2rem;width:70px;height:70px;background:var(--mint);border-radius:50%;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.post-art-card .emoji{font-size:5rem;position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3))}
/* BODY LAYOUT — sidebar + article */
.post-body{padding:1rem 0 4rem}
.post-grid{display:grid;grid-template-columns:240px 1fr;gap:3rem;align-items:start;max-width:1100px;margin:0 auto;padding:0 1.5rem}
.post-sidebar{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1.25rem;font-size:0.875rem}
.toc{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.125rem;box-shadow:3px 3px 0 var(--ink)}
.toc h5{font-size:0.6875rem;font-weight:800;letter-spacing:0.1em;color:var(--ink-2);text-transform:uppercase;margin-bottom:0.625rem}
.toc ul{list-style:none;padding:0}
.toc li{padding:0.25rem 0;border-left:2px solid transparent;padding-left:0.625rem;font-size:0.875rem;color:var(--ink-2);line-height:1.4;transition:all 0.15s;cursor:pointer}
.toc li:hover{color:var(--coral);border-color:var(--coral)}
.toc li.active{color:var(--ink);font-weight:700;border-color:var(--coral)}
.share{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1rem;box-shadow:3px 3px 0 var(--ink);text-align:center}
.share h5{font-size:0.6875rem;font-weight:800;letter-spacing:0.1em;color:var(--ink-2);text-transform:uppercase;margin-bottom:0.625rem}
.share-row{display:flex;justify-content:center;gap:0.5rem}
.share-row a{width:34px;height:34px;border-radius:8px;background:var(--bg);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:0.875rem;transition:all 0.15s}
.share-row a:hover{background:var(--coral);color:#fff;transform:translateY(-2px)}
/* Article content */
.article{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:2.75rem;box-shadow:6px 6px 0 var(--ink)}
.article .lede{font-family:'Lora',Georgia,serif;font-size:1.25rem;color:var(--ink);line-height:1.55;margin-bottom:2rem;font-weight:500;padding-bottom:1.5rem;border-bottom:2px dashed rgba(45,27,14,0.15);font-style:italic}
.article .lede strong{font-style:normal;background:linear-gradient(transparent 65%,var(--peach) 65%);padding:0 0.1em;font-weight:600}
.article h2{font-size:1.75rem;font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:2.75rem 0 1rem;color:var(--ink);scroll-margin-top:5rem}
.article h2 .num{display:inline-block;font-family:'Caveat',cursive;color:var(--coral);font-size:1.875rem;font-weight:700;margin-right:0.5rem;transform:rotate(-3deg)}
.article h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em;margin:2rem 0 0.75rem;color:var(--ink)}
.article p{font-family:'Lora',Georgia,serif;font-size:1.0625rem;line-height:1.75;color:var(--ink);margin-bottom:1.25rem}
.article p strong{font-weight:600;color:var(--ink)}
.article p em{font-style:italic;color:var(--coral);font-weight:500}
.article a:not(.btn){color:var(--coral);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.article a:not(.btn):hover{color:var(--coral-d)}
.article ul,.article ol{padding-left:1.5rem;margin-bottom:1.5rem;font-family:'Lora',serif;font-size:1.0625rem;line-height:1.75}
.article li{margin-bottom:0.5rem;color:var(--ink)}
.article li::marker{color:var(--coral);font-weight:700}
/* Blockquote */
.article blockquote{margin:2rem 0;padding:1.5rem 2rem;background:var(--cream);border-left:5px solid var(--coral);border-radius:0 14px 14px 0;font-family:'Lora',serif;font-style:italic;font-size:1.1875rem;color:var(--ink);line-height:1.5;position:relative}
.article blockquote::before{content:'\201C';position:absolute;top:0.5rem;left:0.875rem;font-family:'Lora',serif;font-size:3.5rem;color:var(--coral);line-height:1;opacity:0.4}
.article blockquote p{font-family:'Lora',serif;font-style:italic;font-size:inherit;color:var(--ink);margin-bottom:0}
.article blockquote cite{display:block;margin-top:0.75rem;font-size:0.875rem;color:var(--ink-2);font-style:normal;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif}
/* Callout box */
.callout{background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:1.5rem;margin:2rem 0;display:flex;gap:1rem;box-shadow:3px 3px 0 var(--ink)}
.callout .ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);flex-shrink:0}
.callout.tip .ico{background:var(--yellow)}
.callout.warning .ico{background:var(--rose)}
.callout.note .ico{background:var(--mint)}
.callout h4{font-size:1rem;font-weight:800;margin-bottom:0.25rem;font-family:'Plus Jakarta Sans',sans-serif}
.callout p{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.9375rem;line-height:1.6;color:var(--ink);margin-bottom:0}
/* Example block (good vs bad) */
.example{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.ex{border:2px solid var(--ink);border-radius:14px;padding:1.25rem;font-family:'Lora',serif;font-size:1rem;line-height:1.55;box-shadow:3px 3px 0 var(--ink)}
.ex .lbl{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.2rem 0.5rem;border-radius:999px;font-weight:800;margin-bottom:0.75rem}
.ex.bad{background:#fff5f5}
.ex.bad .lbl{background:#fee2e2;color:#b91c1c}
.ex.good{background:#f0fdf4}
.ex.good .lbl{background:#dcfce7;color:#15803d}
/* TAGS + AUTHOR */
.post-tags{margin:2.5rem 0 0;display:flex;gap:0.5rem;flex-wrap:wrap}
.post-tag{padding:0.3rem 0.75rem;background:var(--bg);border:1.5px solid var(--ink);border-radius:999px;font-size:0.75rem;font-weight:700;color:var(--ink);text-decoration:none;transition:all 0.15s}
.post-tag:hover{background:var(--ink);color:var(--cream)}
.author-card{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:1.75rem;margin-top:3rem;display:flex;gap:1.25rem;align-items:center;box-shadow:5px 5px 0 var(--ink)}
.author-card .avatar-lg{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);flex-shrink:0}
.author-card .a-text{flex:1}
.author-card .a-text h4{font-size:1.125rem;font-weight:800;margin-bottom:0.125rem}
.author-card .a-text .a-role{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--coral);margin-bottom:0.5rem}
.author-card .a-text p{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.9375rem;color:var(--ink-2);line-height:1.55;margin-bottom:0.625rem}
.author-card .a-socials{display:flex;gap:0.4rem}
.author-card .a-socials a{width:30px;height:30px;border-radius:7px;background:var(--bg);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:0.8125rem;transition:all 0.15s}
.author-card .a-socials a:hover{background:var(--coral);color:#fff;transform:translateY(-1px)}
/* RELATED POSTS */
.related-section{padding:5rem 0;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.rel-h{text-align:center;margin-bottom:3rem;max-width:620px;margin:0 auto 3rem}
.rel-h .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.25rem;transform:rotate(-2deg)}
.rel-h h2{font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1}
.rel-h h2 em{font-style:italic;color:var(--coral)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.rel-card{background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s;display:flex;flex-direction:column}
.rel-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.rel-img{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:3rem}
.rel-img.r1{background:linear-gradient(135deg,var(--mint),var(--teal))}
.rel-img.r2{background:linear-gradient(135deg,var(--lavender),#9b87f5)}
.rel-img.r3{background:linear-gradient(135deg,var(--yellow),var(--peach))}
.rel-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.rel-cat{font-size:0.6875rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:0.5rem}
.rel-card h4{font-size:1.0625rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.625rem}
.rel-card p{font-size:0.875rem;color:var(--ink-2);line-height:1.55;flex:1}
.rel-card .arrow{margin-top:0.875rem;font-size:0.875rem;color:var(--coral);font-weight:700}
/* NEWSLETTER */
.news{padding:4rem 0;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.news::before{content:'';position:absolute;top:-80px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.4}
.news::after{content:'';position:absolute;bottom:-80px;right:-80px;width:260px;height:260px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.news-inner{position:relative;max-width:560px;margin:0 auto;text-align:center}
.news-inner h2{font-size:clamp(1.625rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:#fff;margin-bottom:0.875rem}
.news-inner h2 em{font-style:italic;color:var(--coral)}
.news-inner p{font-size:1rem;opacity:0.85;margin-bottom:1.75rem}
.news-form{display:flex;gap:0.625rem;max-width:440px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--cream);border-radius:12px;font-family:inherit;font-size:0.9375rem;color:var(--ink)}
.news-form button{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border:2px solid var(--cream);border-radius:12px;font-weight:700;font-size:0.9375rem;cursor:pointer;font-family:inherit;transition:all 0.15s}
.news-form button:hover{background:var(--coral-d);transform:translateY(-1px)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
/* ============ RESPONSIVE ============ */
@media(max-width:900px){
.post-grid{grid-template-columns:1fr;gap:1.5rem;padding:0 1rem}
.post-sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:0.75rem;order:2}
.toc,.share{flex:1;min-width:240px}
.article{padding:1.5rem;border-radius:18px}
.article h2{font-size:1.5rem;margin:2rem 0 0.75rem}
.article p,.article ul,.article ol{font-size:1rem;line-height:1.7}
.article .lede{font-size:1.125rem}
.post-art{padding:1rem 0 2rem}
.post-art-card{aspect-ratio:16/10;border-radius:18px;padding:1.25rem;box-shadow:6px 6px 0 var(--ink)}
.post-art-card::before{width:60px;height:60px;top:1rem;right:1rem}
.post-art-card::after{width:50px;height:50px;bottom:1rem;left:1rem}
.post-art-card .emoji{font-size:3.5rem}
.example{grid-template-columns:1fr}
.rel-grid{grid-template-columns:1fr;gap:1rem}
.author-card{flex-direction:column;text-align:center;padding:1.5rem}
.author-card .a-socials{justify-content:center}
.foot-g{grid-template-columns:1fr 1fr;gap:2rem}
.foot-brand{grid-column:span 2}
}
@media(max-width:600px){
.post-hero{padding:1.5rem 0 1rem}
.crumb{font-size:0.8125rem}
.post-meta{font-size:0.8125rem;gap:0.5rem;flex-direction:column}
.post-meta .dot{display:none}
}
/* ============ blog-post-homepage-copy.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ blog-post-homepage-copy.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ contact.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3;--lavender:#d4b8ff;--yellow:#ffe066}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-l a.cur{color:var(--coral);font-weight:700}
.nav-cta{padding:0.625rem 1.125rem;background:var(--coral);color:#fff;border-radius:999px;font-size:0.875rem;font-weight:700;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:3rem 0 1.5rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.5;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1rem}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.eye{display:inline-block;font-family:'Caveat',cursive;font-size:1.625rem;color:var(--coral);font-weight:700;transform:rotate(-3deg);margin-bottom:0.25rem}
h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:0.875rem}
h1 em{font-style:italic;color:var(--coral)}
.lede{font-size:1.0625rem;color:var(--ink-2);margin-bottom:1rem;max-width:540px;margin-left:auto;margin-right:auto}
/* QUOTE BUILDER */
.builder{padding:1.5rem 0 4rem}
.builder-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
@media(max-width:900px){.builder-grid{grid-template-columns:1fr}}
.stepper-card{background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
/* Progress bar */
.progress{padding:1rem 1.5rem 0.75rem;border-bottom:2px solid rgba(45,27,14,0.08)}
.progress-bar{display:flex;gap:0.4rem}
.progress-step{flex:1;height:6px;border-radius:3px;background:rgba(45,27,14,0.12);transition:background 0.3s}
.progress-step.done{background:var(--coral)}
.progress-step.active{background:var(--ink)}
.progress-label{display:flex;justify-content:space-between;align-items:center;margin-top:0.6rem;font-size:0.75rem;color:var(--ink-2);font-weight:600;text-transform:uppercase;letter-spacing:0.06em}
.progress-label .pct{color:var(--coral);font-weight:800}
/* Step container */
.steps{position:relative;min-height:460px}
.step{display:none;padding:2rem 2rem 1.5rem;animation:slideIn 0.3s ease}
.step.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.step-h{margin-bottom:1.5rem}
.step-h .num{display:inline-block;font-family:'Caveat',cursive;font-size:1.25rem;color:var(--coral);font-weight:700;transform:rotate(-3deg);margin-bottom:0.1rem}
.step-h h2{font-size:1.5rem;font-weight:800;letter-spacing:-0.015em;line-height:1.15;margin-bottom:0.3rem}
.step-h h2 em{font-style:italic;color:var(--coral)}
.step-h p{font-size:0.9375rem;color:var(--ink-2)}
/* Service grid */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0.75rem}
.svc-opt{background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:1.125rem 1rem;cursor:pointer;transition:all 0.15s;text-align:left;position:relative;display:flex;flex-direction:column;gap:0.4rem;min-height:120px}
.svc-opt:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.svc-opt.selected{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--coral);transform:translate(-2px,-2px)}
.svc-opt .em{font-size:1.625rem;line-height:1}
.svc-opt .ttl{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;line-height:1.15}
.svc-opt .sub{font-size:0.75rem;color:var(--ink-2);line-height:1.4;margin-top:auto}
.svc-opt.selected .sub{color:rgba(255,244,227,0.7)}
.svc-opt .check{position:absolute;top:0.6rem;right:0.6rem;width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;display:none;align-items:center;justify-content:center;font-size:0.8125rem;font-weight:800;border:2px solid var(--ink)}
.svc-opt.selected .check{display:flex}
/* Volume — number stepper + slider */
.vol-card{background:var(--bg);border:2px solid var(--ink);border-radius:18px;padding:1.5rem;margin-bottom:1rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.vol-card .icon{width:48px;height:48px;border-radius:12px;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);flex-shrink:0}
.vol-card .name-block{flex:1;min-width:140px}
.vol-card .name{font-size:1rem;font-weight:800;line-height:1.2}
.vol-card .unit{font-size:0.75rem;color:var(--ink-2);font-weight:600}
.stepper{display:flex;align-items:center;gap:0.4rem;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0.2rem;box-shadow:2px 2px 0 var(--ink)}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:1.25rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.stepper button:hover{background:var(--coral);color:#fff}
.stepper input{width:50px;text-align:center;border:0;background:transparent;font-family:inherit;font-size:1.0625rem;font-weight:800;color:var(--ink)}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Frequency chips */
.freq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.625rem}
.freq-opt{background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:1rem 1.125rem;cursor:pointer;transition:all 0.15s;text-align:left;position:relative}
.freq-opt:hover{background:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.freq-opt.selected{background:var(--coral);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}
.freq-opt .em{font-size:1.25rem;display:block;margin-bottom:0.25rem}
.freq-opt .ttl{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em}
.freq-opt .sub{font-size:0.75rem;color:var(--ink-2);margin-top:0.15rem}
.freq-opt.selected .sub{color:rgba(255,255,255,0.85)}
.freq-opt .savings{position:absolute;top:-10px;right:8px;background:var(--yellow);color:var(--ink);font-size:0.625rem;font-weight:800;padding:0.15rem 0.5rem;border-radius:999px;border:2px solid var(--ink);text-transform:uppercase;letter-spacing:0.05em}
/* Timeline chips */
.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.625rem}
.time-opt{background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:1rem 1.125rem;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:0.625rem}
.time-opt:hover{background:#fff}
.time-opt.selected{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--coral);transform:translate(-2px,-2px)}
.time-opt .em{font-size:1.25rem}
.time-opt .ttl{font-size:0.9375rem;font-weight:700;line-height:1.2}
/* Details form */
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;margin-bottom:0.875rem}
.det-grid.full{grid-template-columns:1fr}
.field{display:flex;flex-direction:column}
.field label{font-size:0.75rem;font-weight:700;color:var(--ink);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.05em}
.field label .req{color:var(--coral)}
.field input,.field textarea{padding:0.75rem 0.875rem;background:var(--bg);border:2px solid var(--ink);border-radius:10px;font-family:inherit;font-size:0.9375rem;color:var(--ink);transition:all 0.15s}
.field input:focus,.field textarea:focus{outline:none;background:#fff;box-shadow:3px 3px 0 var(--ink);transform:translate(-1.5px,-1.5px)}
.field textarea{resize:vertical;min-height:90px}
/* Summary on final step */
.summary{background:var(--cream);border:2px dashed var(--ink);border-radius:14px;padding:1.25rem;margin-bottom:1.25rem}
.summary h3{font-size:0.875rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.75rem;color:var(--ink)}
.summary .row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;border-bottom:1px dashed rgba(45,27,14,0.2);font-size:0.9375rem}
.summary .row:last-child{border-bottom:0;padding-top:0.75rem;font-weight:800;color:var(--coral);font-size:1.0625rem}
.summary .row .lbl{color:var(--ink-2)}
/* Step nav buttons */
.step-nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 2rem;background:var(--paper);border-top:2px solid var(--ink);gap:1rem}
.btn{padding:0.75rem 1.5rem;border-radius:12px;font-weight:700;font-size:0.9375rem;cursor:pointer;font-family:inherit;border:2px solid var(--ink);transition:all 0.15s;background:#fff;color:var(--ink)}
.btn.primary{background:var(--coral);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.btn.primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn.secondary{background:#fff;color:var(--ink)}
.btn.secondary:hover{background:var(--cream)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn:disabled:hover{transform:none}
/* PRICE PREVIEW SIDEBAR */
.price-card{position:sticky;top:5rem;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:1.75rem;box-shadow:8px 8px 0 var(--ink)}
.price-card .hand{display:block;font-size:1.25rem;color:var(--coral);margin-bottom:0.1rem;transform:rotate(-2deg)}
.price-card h3{font-size:1.0625rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:1.25rem}
.price-amount{font-size:2.875rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink);line-height:1;margin-bottom:0.1rem}
.price-amount .from{font-size:0.875rem;font-weight:500;color:var(--ink-2);margin-right:0.3rem}
.price-amount .gbp{color:var(--coral)}
.price-range{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price-note{font-family:'Caveat',cursive;font-size:1.0625rem;color:var(--coral);font-weight:600;transform:rotate(-1deg);display:inline-block;margin-bottom:1.5rem}
.price-list{list-style:none;padding:0;margin-bottom:1.5rem}
.price-list li{padding:0.4rem 0;border-bottom:1px dashed rgba(45,27,14,0.12);font-size:0.875rem;display:flex;justify-content:space-between;color:var(--ink)}
.price-list li:last-child{border-bottom:0}
.price-list li .v{color:var(--ink-2);font-weight:600}
.price-list li.empty{color:var(--muted);font-style:italic;justify-content:flex-start;padding:0.4rem 0}
.price-incl{padding-top:0.75rem;border-top:2px solid var(--ink)}
.price-incl h4{font-size:0.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);margin-bottom:0.625rem}
.price-incl ul{list-style:none;padding:0}
.price-incl li{font-size:0.8125rem;color:var(--ink-2);padding:0.2rem 0;display:flex;gap:0.4rem}
.price-incl li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
/* Success state */
.success{display:none;text-align:center;padding:3rem 2rem}
.success.show{display:block}
.success .big{font-size:5rem;margin-bottom:1rem}
.success h2{font-size:2rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:0.75rem}
.success h2 em{font-style:italic;color:var(--coral)}
.success p{font-size:1.0625rem;color:var(--ink-2);max-width:440px;margin:0 auto 1.5rem}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem;margin-top:3rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ contact.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ contact.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-copywriting.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-copywriting.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-copywriting.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-content-writing.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-content-writing.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-content-writing.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-blog-writing.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-blog-writing.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-blog-writing.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-article-writing.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-article-writing.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-article-writing.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-guest-posts.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-guest-posts.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-guest-posts.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-product-descriptions.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-product-descriptions.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-product-descriptions.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-social-media.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-social-media.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-social-media.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ service-pr-writing.html ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fef8ef;--paper:#fffaf2;--ink:#2d1b0e;--ink-2:#7c4a2d;--muted:#a98363;--coral:#ff7a59;--coral-d:#e85a3b;--teal:#2aa3a3;--mint:#9be4d0;--peach:#ffd4b8;--rose:#ffb5a7;--cream:#fff4e3}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
.hand{font-family:'Caveat',cursive}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
/* NAV — matches T5 */
nav{padding:1.25rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid rgba(45,27,14,0.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav-l{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-l li{font-size:0.9375rem;font-weight:500}
.nav-l a:hover{color:var(--coral)}
.nav-cta{padding:0.625rem 1.125rem;background:var(--ink);color:var(--cream);border-radius:999px;font-size:0.875rem;font-weight:600;border:2px solid var(--ink);transition:all 0.15s}
.nav-cta:hover{background:var(--coral);border-color:var(--coral);color:#fff}
@media(max-width:768px){.nav-l li{display:none}.nav-l li.always{display:list-item}}
/* HERO */
.hero{padding:4rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.crumb{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem;font-weight:500}
.crumb a:hover{color:var(--coral)}
.crumb .sep{margin:0 0.5rem;opacity:0.4}
.crumb .cur{color:var(--coral);font-weight:600}
.svc-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.875rem;background:var(--peach);border:2px solid var(--ink);border-radius:999px;font-size:0.8125rem;font-weight:600;margin-bottom:1.25rem;box-shadow:3px 3px 0 var(--ink)}
.svc-tag .em{font-size:1rem}
h1{font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.5rem}
h1 em{font-style:italic;color:var(--coral)}
h1 .underline{position:relative;display:inline-block}
h1 .underline::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:8px;background:var(--coral);border-radius:4px;z-index:-1;opacity:0.35}
.lede{font-size:1.1875rem;color:var(--ink-2);margin-bottom:2rem;max-width:540px}
.lede strong{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
.btn-coral{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-coral:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d)}
.btn-outline{padding:0.875rem 1.5rem;background:#fff;color:var(--ink);border-radius:12px;font-weight:700;font-size:0.9375rem;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hero-meta{display:flex;gap:2rem;margin-top:2.5rem;font-size:0.875rem;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:0.4rem;color:var(--ink-2)}
.hero-meta .em{font-size:1.125rem}
.hero-art{position:relative;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(2deg)}
.hero-art::before{content:'';position:absolute;top:1rem;right:1rem;width:50px;height:50px;background:var(--coral);border-radius:50%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero-art::after{content:'';position:absolute;bottom:1.25rem;left:1.25rem;width:35px;height:35px;background:var(--mint);border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.art-doc{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:1.25rem;position:relative;transform:rotate(-4deg);max-width:80%}
.art-doc .ln{height:8px;background:var(--ink);border-radius:4px;margin-bottom:0.5rem;opacity:0.85}
.art-doc .ln.s{width:40%}
.art-doc .ln.m{width:75%}
.art-doc .ln.coral{background:var(--coral)}
.art-doc .stamp{position:absolute;bottom:-12px;right:-12px;background:var(--coral);color:#fff;font-weight:800;padding:0.4rem 0.75rem;border:2px solid var(--ink);border-radius:8px;font-size:0.75rem;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero-art{max-width:340px;margin:0 auto}}
/* SECTION HEADER */
.sh{margin-bottom:2.5rem}
.sh .lbl{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.25rem;transform:rotate(-2deg)}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.75rem}
.sh h2 em{font-style:italic;color:var(--coral)}
.sh p{font-size:1.0625rem;color:var(--ink-2);max-width:600px}
section{padding:4.5rem 0}
.section-light{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* INCLUDES — what you get */
.includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.inc{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:4px 4px 0 var(--ink)}
.inc .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--peach)}
.inc.alt-1 .ico{background:var(--mint)}
.inc.alt-2 .ico{background:#ffe066}
.inc.alt-3 .ico{background:var(--rose)}
.inc.alt-4 .ico{background:#d4b8ff}
.inc h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.inc p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55}
/* TYPES — what we write */
.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-top:2rem}
.type{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:600;font-size:0.9375rem;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s}
.type:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.type .em{font-size:1.25rem;flex-shrink:0}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;position:relative}
.process::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0,var(--coral) 8px,transparent 8px,transparent 16px);z-index:0}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:1.5rem 1.25rem 1.25rem;text-align:center;position:relative;z-index:1;box-shadow:4px 4px 0 var(--ink)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;margin:0 auto 0.875rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:1.0625rem;font-weight:700;margin-bottom:0.4rem}
.step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.process::before{display:none}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.price{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:2rem 1.75rem;box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column}
.price.featured{background:var(--cream);transform:scale(1.03)}
.price.featured::before{content:'most popular ✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.3rem 0.75rem;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.price h4{font-size:1.125rem;font-weight:700;margin-bottom:0.5rem}
.price .price-tag{font-size:2.25rem;font-weight:800;margin-bottom:0.25rem;letter-spacing:-0.02em}
.price .price-tag .from{font-size:0.875rem;font-weight:500;color:var(--ink-2)}
.price .price-sub{font-size:0.875rem;color:var(--ink-2);margin-bottom:1.25rem}
.price ul{list-style:none;padding:0;margin-bottom:1.5rem;flex:1}
.price li{display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;font-size:0.9375rem;color:var(--ink-2)}
.price li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0}
.price li.x{color:var(--muted);text-decoration:line-through}
.price li.x::before{content:'✕';color:var(--muted)}
.price .btn-coral,.price .btn-outline{width:100%;justify-content:center;text-align:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}}
/* FAQ */
.faq{max-width:780px;margin:2.5rem auto 0}
.q{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:0.875rem;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.q summary{padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.5rem;font-weight:800;color:var(--coral);transition:transform 0.2s}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 1.5rem 1.25rem;color:var(--ink-2);font-size:0.9375rem;line-height:1.6}
.q .a strong{color:var(--ink)}
/* RELATED */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.rel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--ink);transition:all 0.15s;display:block}
.rel:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.rel .em{font-size:1.5rem;display:block;margin-bottom:0.5rem}
.rel h5{font-size:0.9375rem;font-weight:700;margin-bottom:0.25rem}
.rel p{font-size:0.8125rem;color:var(--ink-2);line-height:1.5}
/* FINAL CTA */
.fcta{background:var(--ink);color:var(--cream);text-align:center;padding:5rem 1.5rem;border-radius:0;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.3}
.fcta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25}
.fcta .inner{position:relative;max-width:680px;margin:0 auto}
.fcta .hand{display:block;font-size:1.5rem;color:var(--coral);margin-bottom:0.5rem;transform:rotate(-2deg)}
.fcta h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;color:#fff}
.fcta h2 em{font-style:italic;color:var(--coral)}
.fcta p{font-size:1.0625rem;opacity:0.85;margin-bottom:1.75rem}
.fcta .btn-coral{background:var(--coral);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.fcta .btn-coral:hover{box-shadow:6px 6px 0 var(--cream)}
/* FOOTER */
footer{background:var(--paper);border-top:2px solid var(--ink);padding:3rem 0 2rem}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-brand img{margin-bottom:0.75rem}
.foot-brand p{font-size:0.875rem;color:var(--ink-2);line-height:1.6;max-width:280px}
.foot-c h5{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:1rem}
.foot-c a{display:block;color:var(--ink-2);font-size:0.9375rem;padding:0.25rem 0;transition:color 0.15s}
.foot-c a:hover{color:var(--coral)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid rgba(45,27,14,0.1)}
@media(max-width:768px){.foot-g{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
/* ============ service-pr-writing.html ============ */
/* ============ MOBILE OPTIMIZATION ============ */
/* Prevents horizontal scroll, tightens spacing,
scales typography down on small screens. */
@media (max-width: 768px) {
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
/* Containers — tighter padding on mobile */
.wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
.narrow { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Mega menu — reduce padding so logo + burger fit */
.mm-i { gap: 0.75rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
.mm-logo img { height: 42px !important; }
/* Typography — scale down big headings */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; word-break: break-word; }
h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; word-break: break-word; }
h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }
.lede, .hero-lede { font-size: 1rem !important; line-height: 1.6 !important; }
/* Hero padding */
.hero, .post-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.hero-meta { gap: 0.875rem !important; margin-top: 1.5rem !important; }
.hero-strip { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; gap: 0.75rem !important; }
/* Hide decorative floating bits on small screens to reduce overflow */
.float { display: none !important; }
.hero-art, .story-art { padding: 0 !important; }
.hero-illust { min-height: auto !important; padding: 1rem 0 !important; }
.illust-card-2 { right: 0 !important; }
.illust-stamp { display: none !important; }
/* Welcome bar (T5) — break properly */
.welcome { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; line-height: 1.4 !important; }
.welcome a { display: inline-block !important; margin-top: 0.25rem !important; }
/* CTAs / buttons — full-width-friendly, wrap nicely */
.cta-row, .hero-buttons, .cta-buttons { gap: 0.5rem !important; }
.btn-p, .btn-s, .btn-coral, .btn-outline { padding: 0.75rem 1.125rem !important; font-size: 0.875rem !important; }
.btn-coral { box-shadow: 3px 3px 0 var(--ink) !important; }
.btn-outline { box-shadow: 3px 3px 0 var(--ink) !important; }
/* Service / value / card grids — fully single-column on small mobile */
.svc-grid, .val-grid, .includes-grid, .types-grid, .rel-grid, .posts-grid,
.tests-grid, .team-grid, .stat-grid, .price-grid, .freq-grid, .time-grid,
.det-grid, .form-row, .reports-grid {
grid-template-columns: 1fr !important;
}
.form-row.full { grid-template-columns: 1fr !important; }
/* Quote builder — single col, full width */
.builder-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.price-card { position: static !important; padding: 1.25rem !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.stepper-card { box-shadow: 4px 4px 0 var(--ink) !important; }
.step { padding: 1.25rem !important; }
.step-nav { padding: 1rem 1.25rem !important; gap: 0.5rem !important; }
.step-nav .btn { padding: 0.625rem 1rem !important; font-size: 0.875rem !important; }
.stepper button { width: 30px !important; height: 30px !important; font-size: 1.125rem !important; }
/* Hero illustration cards (T5) — scale + recenter */
.illust-card { width: 100% !important; max-width: 280px !important; transform: rotate(-2deg) !important; }
.illust-card-2 { position: static !important; transform: rotate(2deg) !important; display: inline-block !important; margin-top: 0.75rem !important; }
/* Hero art (service pages) */
.hero-art { max-width: 280px !important; margin: 0 auto !important; padding: 1.25rem !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.hero-art::before { width: 36px !important; height: 36px !important; }
.hero-art::after { width: 26px !important; height: 26px !important; }
/* About story photo — smaller */
.story-photo { max-width: 280px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
/* Stats — 2 cols on mobile */
.stats .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero-meta { flex-direction: column !important; align-items: flex-start !important; }
.hero-meta .stat { min-width: 0 !important; }
/* Process — single col, hide dashed line */
.process { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.process::before { display: none !important; }
/* Footer */
.foot-g { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.foot-brand { grid-column: span 1 !important; }
.foot-bot { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
/* About hero — smaller circle backgrounds */
.hero::before, .hero::after, .post-hero::before, .post-hero::after { width: 200px !important; height: 200px !important; }
/* Marquee — smaller font */
.marquee, .mar-track { font-size: 0.9375rem !important; }
.mar-track { gap: 1.5rem !important; }
.mar-track .star { font-size: 1.125rem !important; }
/* CTA section / final CTA card */
.cta-card { padding: 2.5rem 1.5rem !important; border-radius: 20px !important; box-shadow: 6px 6px 0 var(--coral) !important; }
/* Section padding */
section { padding: 3rem 0 !important; }
.builder { padding: 1rem 0 2rem !important; }
/* Sticky elements — release sticky on small screens to avoid overlap */
.post-sidebar { position: static !important; flex-direction: column !important; gap: 0.75rem !important; }
.toc, .share { width: 100% !important; }
/* Article (blog post) */
.article { padding: 1.5rem !important; border-radius: 18px !important; }
.article h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; }
.article h2 .num { font-size: 1.5rem !important; }
.article p, .article ul, .article ol { font-size: 1rem !important; line-height: 1.7 !important; }
.article .lede { font-size: 1.0625rem !important; }
.article blockquote { padding: 1.125rem 1.25rem !important; font-size: 1.0625rem !important; }
.example { grid-template-columns: 1fr !important; }
.author-card { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
.author-card .a-socials { justify-content: center !important; }
/* Featured blog card */
.feat-card { grid-template-columns: 1fr !important; }
.feat-img { min-height: 180px !important; padding: 1.5rem !important; }
.feat-img .emoji { font-size: 3.5rem !important; }
.feat-body { padding: 1.5rem !important; }
/* Contact form sidebar */
.contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.form-card { padding: 1.5rem !important; box-shadow: 5px 5px 0 var(--ink) !important; }
/* About story */
.story-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.office-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
/* Reduce decorative shadows that take space */
.feat-card, .stepper-card, .form-card { box-shadow: 4px 4px 0 var(--ink) !important; }
/* Service detail page extras */
.pay-card, .pay-btn { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
/* T5 specific overflow fixes */
.illust-card-2 { display: none !important; } /* hide secondary chat bubble on mobile */
.welcome { white-space: normal !important; }
.hero-i { padding: 0 !important; }
.hero-illust .illust-card { max-width: calc(100vw - 3rem) !important; transform: rotate(-2deg) !important; }
/* Headlines with highlight spans */
h1 .hl, h1 .scribble { display: inline !important; word-break: break-word; }
/* All section paddings should be tighter on mobile */
.hero { padding: 2rem 0 !important; }
/* T5 service/value/feature/etc grids that have desktop columns */
.svc-grid, .why-grid, .how-grid, .test-grid { grid-template-columns: 1fr !important; }
/* Marquee scrolling speed slower / smaller on mobile */
.marquee { padding: 1rem 0 !important; }
.mar-track { animation-duration: 40s !important; font-size: 0.875rem !important; gap: 1rem !important; }
}
/* Extra-small (under 400px) */
@media (max-width: 400px) {
h1 { font-size: 1.625rem !important; }
.mm-logo img { height: 36px !important; }
.mm-burger { width: 38px !important; height: 38px !important; }
.article { padding: 1.125rem !important; }
.hero-meta { font-size: 0.8125rem !important; }
.crumb { font-size: 0.75rem !important; }
}
/* ============ service-pr-writing.html ============ */
.mm-nav{padding:1.125rem 0;position:sticky;top:0;background:rgba(254,248,239,0.92);backdrop-filter:blur(14px);z-index:100;border-bottom:1px solid rgba(45,27,14,0.08)}
.mm-i{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.mm-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.mm-list{display:flex;list-style:none;align-items:center;gap:1.5rem;margin:0;padding:0}
.mm-list > li{position:relative;font-size:0.9375rem;font-weight:500}
.mm-list > li > a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.2rem;border-radius:6px;transition:color 0.15s}
.mm-list > li > a:hover{color:var(--coral)}
.mm-list > li > a.cur{color:var(--coral);font-weight:700}
.mm-list > li > a .arrow{display:inline-block;font-size:0.75rem;line-height:1;transition:transform 0.2s;opacity:0.7}
.mm-list > li.open > a .arrow{transform:rotate(180deg)}
.mm-pill{padding:0.7rem 1.4rem;background:var(--coral);color:#fff !important;border-radius:14px;font-size:0.9375rem;font-weight:700;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;text-decoration:none}
.mm-pill::after{content:'→';font-size:0.9375rem;line-height:1}
.mm-pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--coral-d);color:#fff !important}
.mm-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:920px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);opacity:0;pointer-events:none;transition:all 0.22s ease;padding:1.5rem;z-index:200}
.mm-list > li.open > .mm-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mm-panel::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-top:3px solid var(--ink)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr 0.85fr;gap:1.5rem}
.mm-col h5{font-size:0.6875rem;font-weight:800;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem}
.mm-item{display:flex;gap:0.75rem;padding:0.625rem;border-radius:12px;text-decoration:none;color:var(--ink);align-items:flex-start;transition:all 0.15s;margin-bottom:0.3rem}
.mm-item:hover{background:var(--cream);transform:translateX(2px)}
.mm-item .mm-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mm-item .mm-ico.c1{background:var(--peach)}
.mm-item .mm-ico.c2{background:var(--mint)}
.mm-item .mm-ico.c3{background:var(--rose)}
.mm-item .mm-ico.c4{background:#ffe066}
.mm-item .mm-ico.c5{background:#b8e0d2}
.mm-item .mm-ico.c6{background:#ffc4b8}
.mm-item .mm-ico.c7{background:#d4b8ff}
.mm-item .mm-ico.c8{background:#ffb3c1}
.mm-item .mm-text{display:flex;flex-direction:column;min-width:0}
.mm-item strong{font-size:0.9375rem;font-weight:800;letter-spacing:-0.01em;display:block;line-height:1.2;margin-bottom:0.1rem}
.mm-item span.d{font-size:0.75rem;color:var(--ink-2);line-height:1.4}
.mm-feat{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border-radius:16px;padding:1.25rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;position:relative;overflow:hidden}
.mm-feat::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:var(--yellow);border-radius:50%;border:2px solid var(--ink);opacity:0.95}
.mm-feat .mm-hand{font-family:'Caveat',cursive;font-size:1.125rem;color:var(--yellow);transform:rotate(-2deg);display:inline-block;margin-bottom:0.25rem;position:relative;z-index:1}
.mm-feat h4{font-size:1.125rem;font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin-bottom:0.5rem;position:relative;z-index:1}
.mm-feat p{font-size:0.8125rem;opacity:0.9;line-height:1.45;margin-bottom:1rem;position:relative;z-index:1}
.mm-feat .mm-feat-cta{background:#fff;color:var(--ink);padding:0.5rem 0.875rem;border-radius:999px;font-weight:700;font-size:0.8125rem;text-decoration:none;border:2px solid var(--ink);align-self:flex-start;transition:transform 0.15s;position:relative;z-index:1}
.mm-feat .mm-feat-cta:hover{transform:translateY(-1px)}
.mm-burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;flex-shrink:0}
.mm-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.mm-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-burger.open span:nth-child(2){opacity:0}
.mm-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
.mm-list{position:fixed;inset:73px 0 0 0;background:var(--bg);flex-direction:column;align-items:stretch;padding:1.5rem;gap:0.5rem;overflow-y:auto;border-top:2px solid var(--ink);transform:translateX(100%);transition:transform 0.25s ease;z-index:90}
.mm-list.open{transform:translateX(0)}
.mm-list > li{width:100%}
.mm-list > li > a{padding:0.875rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;justify-content:space-between;width:100%}
.mm-pill{justify-content:center !important}
.mm-panel{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border:0;padding:0.75rem 0 0;background:transparent;opacity:1;pointer-events:auto;display:none}
.mm-panel::before{display:none}
.mm-list > li.open > .mm-panel{display:block}
.mm-grid{grid-template-columns:1fr;gap:0.5rem}
.mm-burger{display:flex}
}
/* ============ PAGE-SCOPED OVERRIDES (collision cleanup) ============ */
/* Section heading is a centered block by default; blog index variant scoped below */
.sh{display:block;text-align:center;justify-content:initial;align-items:initial;flex-wrap:initial;gap:initial;max-width:720px;margin:0 auto 3rem;position:relative}
/* Blog index: .sh inside section.posts is a flex row with count badge */
body.blog section.posts .sh{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;text-align:left;max-width:none;margin:0 0 2.5rem}
/* Home: force 4-col services grid (kills contact-form .svc-grid bleed) */
body.home .svc-grid, body.page-id-4 .svc-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:960px){body.home .svc-grid, body.page-id-4 .svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.home .svc-grid, body.page-id-4 .svc-grid{grid-template-columns:1fr}}
/* Home: 4-step process grid at natural height (kills contact .steps min-height bleed) */
body.home .steps, body.page-id-4 .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;min-height:0;position:relative}
@media(max-width:768px){body.home .steps, body.page-id-4 .steps{grid-template-columns:repeat(2,1fr)}}
/* Home + service + single-post hero is left-aligned (kills contact .hero text-align:center bleed) */
body.home .hero, body.page-id-4 .hero, body.single-service .hero, body.single-post .hero{text-align:left}
/* ============ HAND-DRAWN ICON SYSTEM ============ */
.ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:-0.2em;color:currentColor;flex-shrink:0}
.svc-card .ico, .mm-ico .ico{width:1.6em;height:1.6em;vertical-align:middle}
.svc-opt .em .ico, .freq-opt .em .ico, .time-opt .em .ico{width:1.6em;height:1.6em}
.s-c .n .ico{color:#fff;width:1.4em;height:1.4em}
.feat-cta .ico, .btn .ico{width:1em;height:1em;vertical-align:-0.15em}
.ico path, .ico circle, .ico rect, .ico ellipse{vector-effect:non-scaling-stroke}
/* Service hero: lede left-aligned (kills margin-auto bleed from contact .lede) */
body.single-service .hero .lede, body.home .hero .lede{margin-left:0;margin-right:0;text-align:left}
/* Also kill margin-auto on hero-meta inside service hero for consistency */
body.single-service .hero .hero-meta{margin-left:0;margin-right:0}
/* Contact form .steps is a block container (.step children show/hide via JS),
not a 4-col grid like the home page's process steps. Reset the leak from L135. */
body.page-id-7 .steps{display:block;grid-template-columns:none;gap:0}
/* Contact form .step is the form step container, not a service-process diagram
card. Reset all the service-page .step properties that leaked over. */
body.page-id-7 .step{
background:transparent; border:0; border-radius:0; box-shadow:none;
text-align:left; position:relative; z-index:auto;
padding:2rem 2rem 1.5rem;
}
/* ============ TWEMOJI ICON SYSTEM ============ */
/* All emoji icons are now CDN-loaded Twemoji ![]()
tags with class="twe".
Sized contextually: large in badge containers (.svc-card .ico, .mm-ico,
.post-img, .feat-img, .svc-opt .em), inline-baseline elsewhere. */
.twe{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}
/* Badge / circle containers — fill ~60-70% of the parent box */
.svc-card .ico .twe, .mm-ico .twe, .val .ico .twe, .inc .ico .twe,
.feat-img .twe, .post-img .twe, .rel-img .twe{
width:60%;height:60%;vertical-align:middle
}
/* Form-button "em" containers (svc-opt / freq-opt / time-opt) — emoji is bigger */
.svc-opt .em .twe, .freq-opt .em .twe, .time-opt .em .twe{
width:1.8em;height:1.8em;vertical-align:middle
}
/* CTA buttons + inline elements */
.btn-coral .twe, .btn-p .twe, .btn .twe, .feat-cta .twe{
width:1.1em;height:1.1em;vertical-align:-0.15em
}
/* Hero meta items + count badges */
.hero-meta .twe, .sh .count .twe, .item .em .twe{
width:1.1em;height:1.1em;vertical-align:-0.15em
}
/* Service hero svc-tag pill */
.svc-tag .em .twe{width:1.1em;height:1.1em;vertical-align:-0.15em}
/* Steps (home page 4-step process) circular number badge */
.s-c .n .twe{width:60%;height:60%;vertical-align:middle}
/* Disable the old hand-drawn .ico rule (only matched our injected svgs, none left now).
The bare .ico selector is still used by parent containers (.svc-card .ico etc.)
so we don't reset it here — only the svg-specific bits. */
svg.ico, img.ico{display:none}
/* ============ TESTIMONIALS SLIDER ============ */
/* Wraps the .testi-track with prev/next arrows. The track is a native
horizontal scroll container with snap points — smooth on touch + arrows. */
.testi-slider{position:relative;padding:0 0 1.5rem}
.testi-track{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0.5rem 0.25rem 1rem}
.testi-track::-webkit-scrollbar{display:none}
.testi-slider .t-card{flex:0 0 calc(50% - 0.75rem);scroll-snap-align:start;min-width:0;margin:0}
@media(max-width:760px){.testi-slider .t-card{flex:0 0 calc(100% - 0.5rem)}}
/* Arrows */
.testi-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform 0.15s,box-shadow 0.15s;z-index:3;font-family:inherit}
.testi-nav:hover{background:var(--coral);color:#fff;transform:translateY(-50%) translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.testi-nav.prev{left:-22px}
.testi-nav.next{right:-22px}
.testi-nav:disabled{opacity:0.35;cursor:not-allowed}
@media(max-width:760px){.testi-nav{display:none}}
/* Dots */
.testi-dots{display:flex;gap:0.5rem;justify-content:center;margin-top:1.25rem}
.testi-dots button{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:transparent;padding:0;cursor:pointer;transition:background 0.2s;font-size:0;line-height:0}
.testi-dots button.active{background:var(--coral)}
.testi-dots button:hover{background:var(--coral)}
/* Slightly tone down the t-card hover wobble in slider context */
.testi-slider .t-card:hover{transform:none}
/* ============ HOME CTA DECORATIONS ============ */
/* Restore the cup + pencil decorative art that gets clobbered by the
about-page .cta-card::before/::after redefinition at L503. Uses Twemoji
background-image so the visual is consistent with the rest of the icon set.
Scoped to body.home/page-id-4 so it doesn't bleed onto about's CTA. */
body.home .cta-card::before,
body.page-id-4 .cta-card::before{
content:'';
position:absolute;top:0.5rem;left:1rem;
width:9rem;height:9rem;
background:url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/2615.svg') no-repeat center / contain;
opacity:0.18;
transform:rotate(-15deg);
pointer-events:none
}
body.home .cta-card::after,
body.page-id-4 .cta-card::after{
content:'';
position:absolute;bottom:0.5rem;right:1rem;
width:8rem;height:8rem;
background:url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/270f.svg') no-repeat center / contain;
opacity:0.22;
transform:rotate(15deg);
pointer-events:none
}
/* ============ MOBILE FIXES (round 2) ============ */
/* Reduce 'Made with ❤️' footer line by 25% (1.25rem → 0.9375rem) */
.foot-bot span[style*="Caveat"]{font-size:0.9375rem !important}
/* Mobile menu: bump z-index above any sticky-content shadows, ensure it actually shows */
@media(max-width:900px){
.mm-nav{z-index:1000;position:sticky;top:0}
.mm-list{z-index:1000 !important;background:var(--bg) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
.mm-list.open{display:flex !important}
body.mm-open{overflow:hidden}
}
/* Mobile hero: add horizontal padding to the wrap and stop the first fold touching edges */
@media(max-width:760px){
.wrap{padding-left:1.25rem !important;padding-right:1.25rem !important}
.hero{padding-left:0 !important;padding-right:0 !important}
.hero .wrap{padding-top:1.5rem;padding-bottom:2.5rem}
.hero-i, .hero-inner, .hero-grid{padding-left:0;padding-right:0}
.hero-grid{grid-template-columns:1fr !important;gap:2rem !important}
.hero-illust{display:none} /* hide the over-engineered illustration card on mobile */
body.home .hero h1, body.page-id-4 .hero h1{font-size:clamp(1.85rem,7.5vw,2.6rem) !important;word-wrap:break-word}
}
/* Home services grid: smaller cards on mobile (2-col, tighter padding) */
@media(max-width:760px){
body.home .svc-grid, body.page-id-4 .svc-grid{grid-template-columns:repeat(2,1fr) !important;gap:0.75rem !important}
body.home .svc-card, body.page-id-4 .svc-card{padding:1rem 0.875rem !important;box-shadow:3px 3px 0 var(--ink) !important;border-radius:14px !important}
body.home .svc-card h3{font-size:1rem !important;margin-bottom:0.3rem !important}
body.home .svc-card p{font-size:0.8125rem !important;line-height:1.45 !important;margin-bottom:0.5rem !important}
body.home .svc-card .ico, body.home .svc-card > .ico{width:40px !important;height:40px !important;font-size:1.25rem !important;border-radius:10px !important;margin-bottom:0.6rem !important;box-shadow:2px 2px 0 var(--ink) !important}
body.home .svc-card .more{font-size:0.75rem !important}
}
@media(max-width:400px){
body.home .svc-grid, body.page-id-4 .svc-grid{grid-template-columns:1fr !important}
}
/* Why Sage as a horizontal slider on mobile */
@media(max-width:760px){
body.home .why-grid, body.page-id-4 .why-grid{
display:flex !important;flex-direction:row !important;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
gap:0.875rem;
padding:0.5rem 1.25rem 1.25rem;
margin:0 -1.25rem; /* bleed into wrap padding for nice edge */
scrollbar-width:none;
}
body.home .why-grid::-webkit-scrollbar{display:none}
body.home .why-c{flex:0 0 78%;scroll-snap-align:start;margin:0}
}
/* Footer mobile: 'What we do' + 'Sage' side-by-side, brand row above full-width, contact below full-width */
@media(max-width:768px){
footer .foot-g{grid-template-columns:1fr 1fr !important;gap:1.5rem !important}
footer .foot-brand{grid-column:1 / -1 !important}
/* If there's a 4th column ('Get in touch'), also full-width */
}
/* ============ MOBILE FIXES (round 3) ============ */
/* Stop the marquee + over-wide sections from pushing horizontal scroll on mobile */
html,body{overflow-x:hidden;max-width:100vw}
@media(max-width:760px){
.marquee, .marquee .mar-track{overflow:hidden}
/* H1/H2 hardening: prevent text-cropping by allowing wrap and capping size */
.hero h1, header h1{font-size:clamp(1.65rem,7vw,2.4rem) !important;line-height:1.1 !important;word-wrap:break-word;hyphens:auto}
.sh h2{font-size:clamp(1.5rem,6.5vw,2rem) !important;line-height:1.15 !important;word-wrap:break-word;padding:0 0.5rem}
.sh p{padding:0 0.5rem}
section .wrap, footer .wrap{padding-left:1.25rem !important;padding-right:1.25rem !important;max-width:100%}
}
/* Footer 2-col on mobile — stronger specificity */
@media(max-width:768px){
body footer .foot-g{display:grid !important;grid-template-columns:1fr 1fr !important;gap:1.25rem !important}
body footer .foot-g .foot-brand{grid-column:1 / -1 !important}
/* 'What we do' (1st .foot-c) + 'Sage' (2nd .foot-c) side-by-side */
body footer .foot-g .foot-c:nth-of-type(1),
/* Get in touch (3rd .foot-c) full-width below */
}
/* Footer mobile fix v2: use :nth-child instead of :nth-of-type
(.foot-brand and .foot-c are all divs — nth-of-type counts by tag) */
@media(max-width:768px){
body footer .foot-g{display:grid !important;grid-template-columns:1fr 1fr !important;gap:1.25rem !important}
body footer .foot-g > :nth-child(1){grid-column:1 / -1 !important} /* foot-brand */
body footer .foot-g > :nth-child(2){grid-column:auto !important} /* What we do */
body footer .foot-g > :nth-child(3){grid-column:auto !important} /* Sage */
body footer .foot-g > :nth-child(4){grid-column:1 / -1 !important} /* Get in touch */
}
/* ============ STICKY HEADER FIX ============ */
/* overflow-x:hidden on body breaks position:sticky (body becomes the scrolling
container). Use overflow-x:clip — same visual effect, sticky still works.
Falls back to scroll on browsers without clip support. */
html, body{overflow-x:clip !important; max-width:100% !important}
/* Force sticky to stick — fights any later overflow:hidden in ancestors */
.mm-nav{position:-webkit-sticky !important; position:sticky !important; top:0 !important; z-index:1000 !important}
/* ============ FOOTER MOBILE FIX v3 ============ */
/* All foot-c default to single-col placement; only foot-brand and the LAST
foot-c span the row. This is the simplest possible expression and the most
specific so it wins regardless of source order. */
@media(max-width:768px){
body footer .foot-g{display:grid !important;grid-template-columns:1fr 1fr !important;gap:1.25rem 1rem !important}
body footer .foot-g .foot-brand{grid-column:1 / -1 !important}
body footer .foot-g .foot-c{grid-column:auto / auto !important}
body footer .foot-g .foot-c:last-of-type{grid-column:1 / -1 !important}
}
/* ============ MENU OPEN: DON'T LOCK BODY SCROLL ============ */
/* Earlier I set body.mm-open{overflow:hidden} to prevent scroll-through when
the mobile menu is open. Side-effect: body scroll position jumps to top.
The menu is a position:fixed inset:73px 0 0 0 panel anyway — it already
covers the page below the header. Body lock unnecessary; remove it. */
body.mm-open{overflow:auto !important}
/* ============ BLOG: DARK NEWSLETTER + PAGINATION ============ */
.newsletter-dark{background:var(--ink);padding:5rem 0;position:relative;overflow:hidden;margin-top:3rem;color:var(--cream)}
.newsletter-dark::before{content:'';position:absolute;top:-60px;left:-60px;width:240px;height:240px;background:radial-gradient(circle,var(--coral) 0%,transparent 70%);opacity:0.35;pointer-events:none}
.newsletter-dark::after{content:'';position:absolute;bottom:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.25;pointer-events:none}
.newsletter-dark .news-inner{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1}
.newsletter-dark .hand{display:block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;margin-bottom:0.4rem;transform:rotate(-2deg)}
.newsletter-dark h2{font-size:clamp(1.875rem,4vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:#fff;margin-bottom:1rem}
.newsletter-dark h2 em{font-style:italic;color:var(--coral);font-weight:800}
.newsletter-dark > .wrap > .news-inner > p{font-size:1.0625rem;color:rgba(255,244,227,0.78);line-height:1.6;margin:0 auto 1.5rem;max-width:560px}
.newsletter-dark .news-form{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:0.9rem}
.newsletter-dark .news-form input{flex:1 1 280px;max-width:340px;padding:0.85rem 1.1rem;border:2px solid var(--ink);background:#fff;border-radius:12px;font-size:0.9375rem;font-family:inherit;color:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,0.4)}
.newsletter-dark .news-form input:focus{outline:none;border-color:var(--coral)}
.newsletter-dark .news-form button{padding:0.85rem 1.4rem;background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:12px;font-size:0.9375rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:3px 3px 0 rgba(0,0,0,0.4);transition:transform 0.15s,box-shadow 0.15s}
.newsletter-dark .news-form button:hover{background:var(--coral-d);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,0.4)}
.newsletter-dark .news-fine{font-size:0.8125rem !important;color:rgba(255,244,227,0.55) !important;margin:0 !important}
.newsletter-dark .news-fine a{color:rgba(255,244,227,0.85);text-decoration:underline}
@media(max-width:560px){
.newsletter-dark{padding:3rem 0}
.newsletter-dark .news-form input, .newsletter-dark .news-form button{flex:1 1 100%;max-width:none}
}
/* Pagination — pill numbered buttons */
nav.pagination{display:flex;justify-content:center;align-items:center;gap:0.5rem;margin-top:2.5rem;flex-wrap:wrap}
nav.pagination .page-link, nav.pagination .page-link a, nav.pagination .page-link span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 0.75rem;border-radius:50%;background:transparent;color:var(--ink);text-decoration:none;font-weight:700;font-size:0.9375rem;border:2px solid transparent;transition:background 0.15s,border-color 0.15s}
nav.pagination .page-link a:hover{border-color:var(--ink);background:#fff}
nav.pagination .page-link span.current, nav.pagination .page-link .current{background:var(--ink) !important;color:var(--cream) !important;border-color:var(--ink) !important;box-shadow:3px 3px 0 var(--coral)}
nav.pagination .page-link .dots{border:0;background:transparent;color:var(--ink-2)}
/* ============ FOOTER MOBILE: FINAL ATTEMPT ============ */
/* The 'Sage' column kept rendering full-width despite multiple rules. Likely
cause: a more-specific cascade source from one of the per-page sections.
Use the most specific selector possible: direct sibling positional. */
@media(max-width:768px){
footer .foot-g{display:grid !important;grid-template-columns:1fr 1fr !important;gap:1.25rem 1rem !important}
footer .foot-g > .foot-brand{grid-column:1 / -1 !important;grid-row:1 !important}
footer .foot-g > .foot-c{grid-column:span 1 !important; grid-row:auto !important; min-width:0}
footer .foot-g > .foot-c:last-child{grid-column:1 / -1 !important}
}
/* ============ MOBILE MENU POSITIONING FIX ============ */
/* Root cause: .mm-nav has backdrop-filter, which makes it a containing-block
for fixed-position descendants. So .mm-list's "position:fixed; inset:73px 0 0 0"
was anchoring to .mm-nav (sticky), not the viewport — when scrolled, the menu
appeared above the viewport. Drop backdrop-filter on mobile so position:fixed
on .mm-list resolves against the viewport again. */
@media(max-width:900px){
.mm-nav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--bg) !important}
.mm-list{position:fixed !important;top:73px !important;left:0 !important;right:0 !important;bottom:0 !important;inset:73px 0 0 0 !important}
}
/* Ensure mobile menu .open state wins the slide-in transform */
@media(max-width:900px){
.mm-list{transform:translateX(100%) !important;transition:transform 0.25s ease !important}
.mm-list.open{transform:translateX(0) !important}
}
/* ============ MOBILE MENU — FINAL CLEAN REWRITE ============ */
/* Goals:
- Header stays sticky at top
- Burger click only toggles menu (never navigates, never scrolls page)
- Drawer is a fullscreen overlay below the sticky header (top:73px)
- Slide-in from the right with translateX
- Mega-menu sub-panel: single column, bigger touch targets
- "What we do" parent acts as an accordion (no href navigation) */
@media (max-width: 900px) {
/* Header: ensure it stays sticky and on top */
nav.mm-nav{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:var(--bg) !important;
z-index:1000 !important;
}
/* Burger sits to the right of the logo */
.mm-burger{display:flex !important; margin-left:auto}
/* Drawer — fullscreen overlay below the header */
ul.mm-list#mmList{
position:fixed !important;
top:73px !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
margin:0 !important;
padding:1.25rem !important;
background:var(--bg) !important;
border-top:2px solid var(--ink);
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:0.5rem !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
transform:translateX(100%) !important;
transition:transform 0.25s ease !important;
z-index:999 !important;
visibility:hidden;
pointer-events:none;
}
ul.mm-list#mmList.open{
transform:translateX(0) !important;
visibility:visible;
pointer-events:auto;
}
/* Top-level items inside the drawer — big tap targets */
ul.mm-list#mmList > li{width:100%; list-style:none}
ul.mm-list#mmList > li > a{
display:flex !important;
justify-content:space-between;
align-items:center;
padding:1rem 1.1rem !important;
background:#fff;
border:2px solid var(--ink);
border-radius:12px;
font-weight:700;
font-size:1.0625rem;
color:var(--ink);
text-decoration:none;
}
ul.mm-list#mmList > li > a.mm-pill{
background:var(--coral) !important;
color:#fff !important;
justify-content:center !important;
box-shadow:3px 3px 0 var(--ink);
}
ul.mm-list#mmList > li > a.cur{background:var(--cream)}
/* Mega menu sub-panel inside drawer: stacked, accordion-style */
ul.mm-list#mmList .mm-panel{
position:static !important;
transform:none !important;
min-width:0 !important;
width:100% !important;
box-shadow:none !important;
border:0 !important;
padding:0.5rem 0 0 !important;
background:transparent !important;
opacity:1 !important;
pointer-events:auto !important;
margin-top:0.5rem;
display:none;
}
ul.mm-list#mmList > li.open > .mm-panel{display:block}
ul.mm-list#mmList .mm-grid{
display:flex !important;
flex-direction:column !important;
gap:0.5rem !important;
}
ul.mm-list#mmList .mm-col{display:contents}
ul.mm-list#mmList .mm-col h5{
font-size:0.6875rem;
font-weight:800;
color:var(--ink-2);
text-transform:uppercase;
letter-spacing:0.1em;
margin:0.5rem 0.25rem 0.25rem;
order:0;
}
ul.mm-list#mmList .mm-item{
display:flex !important;
align-items:center;
gap:0.75rem;
padding:0.75rem 0.875rem !important;
background:var(--cream);
border:1.5px solid var(--ink);
border-radius:10px;
text-decoration:none;
color:var(--ink);
width:100%;
min-height:54px;
}
ul.mm-list#mmList .mm-item .mm-ico{
width:34px !important; height:34px !important;
border-radius:8px;
display:flex;align-items:center;justify-content:center;
background:#fff;border:1.5px solid var(--ink);
flex-shrink:0;
}
ul.mm-list#mmList .mm-item .mm-text strong{font-size:0.9375rem;font-weight:800;display:block;line-height:1.2}
ul.mm-list#mmList .mm-item .mm-text .d{font-size:0.75rem;color:var(--ink-2);line-height:1.35;display:block;margin-top:0.15rem}
ul.mm-list#mmList .mm-feat{display:none} /* hide the "not sure?" promo card on mobile, too dense */
/* Caret rotates on open */
ul.mm-list#mmList > li > a .arrow{transition:transform 0.2s; opacity:0.7}
ul.mm-list#mmList > li.open > a .arrow{transform:rotate(180deg)}
}
/* Lock body scroll while drawer is open — but preserve scroll position via JS-set custom prop */
body.mm-open{position:relative}
/* ============ MOBILE MENU — FULLSCREEN OVERLAY VARIANT ============ */
/* Earlier attempt relied on sticky header staying visible above the drawer.
On real mobile (Safari/iOS especially) the sticky breaks when scrolled +
drawer opens. Better solution: drawer goes top:0 → bottom:0 (full screen),
takes its OWN logo + close X from the parent .mm-nav (which is below it). */
@media (max-width: 900px) {
ul.mm-list#mmList{
top:0 !important;
padding-top:5rem !important; /* room for the close button + logo header */
}
/* When drawer is open, force its own top bar (clone the logo via ::before) */
ul.mm-list#mmList::before{
content:'';
position:absolute;top:0;left:0;right:0;height:73px;
background:var(--bg);
border-bottom:1px solid rgba(45,27,14,0.08);
z-index:1;
}
/* Burger (which becomes the X close icon when .open) needs to sit ABOVE
the drawer so it remains tappable. Keep it stuck in the corner. */
.mm-nav .mm-burger{
position:fixed !important;
top:14px !important;
right:1rem !important;
z-index:1100 !important; /* above the drawer */
}
/* Logo also needs to stay above when menu open — keep it visible */
body.mm-open .mm-nav .mm-logo{
position:fixed !important;
top:11px !important;
left:1rem !important;
z-index:1100 !important;
}
/* Restore burger to normal position when menu is closed */
body:not(.mm-open) .mm-nav .mm-burger{
position:static !important;
}
/* The .mm-nav itself doesn't need to be sticky once we have a fullscreen
drawer — just normal flow, will scroll out naturally. The burger stays
visible via position:fixed when menu is open. But for the default
(non-menu) state we still want a sticky header. So: keep sticky baseline,
drawer covers it when open. */
}
/* ============ MOBILE: TIGHTER HOME SVC-CARDS ============ */
/* User feedback: 8 service boxes have too much height/whitespace on mobile.
Tighten paragraph (max 2 lines, smaller line-height), shrink icon, drop
the "Learn more →" tail. */
@media(max-width:760px){
body.home .svc-card, body.page-id-4 .svc-card{
padding:0.875rem 0.75rem !important;
border-radius:12px !important;
}
body.home .svc-card .ico, body.home .svc-card > .ico{
width:34px !important;height:34px !important;
font-size:1rem !important;border-radius:8px !important;
margin-bottom:0.5rem !important;box-shadow:2px 2px 0 var(--ink) !important;
}
body.home .svc-card h3{font-size:0.9375rem !important;margin-bottom:0.25rem !important;letter-spacing:-0.01em}
body.home .svc-card p{
font-size:0.75rem !important;line-height:1.4 !important;
margin-bottom:0.5rem !important;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
body.home .svc-card .more{display:none !important} /* "Learn more →" not needed on mobile */
}
/* ============ MOBILE: CONTACT FORM SVC OPTIONS 2 PER ROW ============ */
@media(max-width:760px){
body.page-id-7 .step .svc-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:0.5rem !important;
}
body.page-id-7 .svc-opt{
padding:0.875rem 0.625rem !important;
min-height:0 !important;
}
body.page-id-7 .svc-opt .em{font-size:1.375rem !important;margin-bottom:0.1rem}
body.page-id-7 .svc-opt .ttl{font-size:0.875rem !important}
body.page-id-7 .svc-opt .sub{font-size:0.6875rem !important;line-height:1.3}
}
/* Why-Sage slider: small left gutter so the first card isn't flush against the edge */
@media(max-width:760px){
body.home .why-grid, body.page-id-4 .why-grid{
padding-left:1.25rem !important;
scroll-padding-left:1.25rem !important;
}
}
/* ============ MENU OPEN: SOLID HEADER BAR ============ */
/* When the drawer is open and content scrolls inside it, menu items would
appear through the logo's transparent PNG. Solid bar at top of viewport
sits ABOVE the drawer (z:999) but BELOW the logo/X (z:1100) — hides any
content scrolling underneath. */
@media (max-width: 900px) {
body.mm-open::before{
content:'';
position:fixed;top:0;left:0;right:0;height:73px;
background:var(--bg);
border-bottom:1px solid rgba(45,27,14,0.08);
z-index:1050;
pointer-events:none;
}
/* Kill the drawer's own ::before — redundant now and was getting trapped
in the drawer's stacking context. */
ul.mm-list#mmList::before{display:none !important}
}
/* ============ MOBILE MENU — DEFINITIVE FIX ============ */
/* Simpler approach: when menu is open, .mm-nav itself becomes fixed at top
of viewport with high z-index. The drawer then sits BELOW it (top:73px).
No more pseudo-elements, no more z-index ladders. The header is the header. */
@media (max-width: 900px) {
/* Reset all my earlier fixed-positioning hacks on logo/X */
body.mm-open .mm-nav .mm-logo,
body:not(.mm-open) .mm-nav .mm-logo{position:static !important;left:auto !important;top:auto !important;z-index:auto !important}
body.mm-open .mm-nav .mm-burger,
body:not(.mm-open) .mm-nav .mm-burger{position:static !important;top:auto !important;right:auto !important;z-index:auto !important}
/* When menu open: pin the entire .mm-nav at top of viewport, on top of everything */
body.mm-open nav.mm-nav{
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important;
z-index:1100 !important;
background:var(--bg) !important;
border-bottom:1px solid rgba(45,27,14,0.08);
}
/* Reserve space so the rest of the page doesn't jump up under the fixed nav */
body.mm-open{padding-top:73px}
/* Drawer sits below the fixed header */
ul.mm-list#mmList{
top:73px !important; /* below the now-fixed header */
padding-top:1.25rem !important;
}
/* Kill the previous overlay bar — no longer needed since .mm-nav is the bar */
body.mm-open::before{display:none !important}
ul.mm-list#mmList::before{display:none !important}
}
/* ============================================================
BLOG INDEX — pixel-match to design screenshots
home.php uses: .blog-hero, .blog-cards, .blog-pagination,
.post-top, .post-emoji, .newsletter-dark
============================================================ */
/* Provide lavender/yellow vars at root in case earlier blocks missed them */
:root{--lavender:#d4b8ff;--yellow:#ffe066}
/* HERO — tighter, centered, with chip row */
.blog-hero{padding:3rem 0 2.5rem;text-align:center}
.blog-hero .hero-inner{max-width:780px;margin:0 auto}
.blog-hero .crumb{font-size:0.8125rem;color:var(--ink-2);margin-bottom:1rem}
.blog-hero .eye{font-family:'Caveat',cursive;color:var(--coral);font-size:1.375rem;display:inline-block;transform:rotate(-2deg);margin-bottom:0.5rem}
.blog-hero h1{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin:0.25rem 0 1.25rem;color:var(--ink)}
.blog-hero h1 em{font-style:italic;color:var(--coral);font-weight:800}
.blog-hero .lede{color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:640px;margin:0 auto 1.75rem}
.blog-hero .tags{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center}
.blog-hero .tag{display:inline-flex;align-items:center;padding:0.5rem 1rem;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:0.8125rem;font-weight:600;text-decoration:none;transition:all 0.15s}
.blog-hero .tag:hover{background:var(--cream)}
.blog-hero .tag.active{background:var(--ink);color:#fff}
/* GRID SECTION */
.blog-grid-section{padding:1rem 0 3rem;background:transparent}
.blog-grid-section .wrap{max-width:1200px}
/* 3-up grid, gap matches design */
.posts-grid.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:0}
/* CARD — soft modern style, NOT the hard ink-offset shadow */
.post.blog-card{background:#fff;border:0;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(45,27,14,0.06),0 8px 24px rgba(45,27,14,0.08);transition:transform 0.2s ease,box-shadow 0.2s ease;text-decoration:none;color:inherit}
.post.blog-card:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(45,27,14,0.08),0 16px 32px rgba(45,27,14,0.12)}
/* Top coloured gradient panel — full-bleed, ~140px tall, centred emoji */
.post.blog-card .post-top{height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.post.blog-card .post-top.p1{background:linear-gradient(135deg,#ffd4b8,#ffb5a7)}
.post.blog-card .post-top.p2{background:linear-gradient(135deg,#cfe8ff,#d4b8ff)}
.post.blog-card .post-top.p3{background:linear-gradient(135deg,#fde68a,#fbbf77)}
.post.blog-card .post-top.p4{background:linear-gradient(135deg,#9be4d0,#6fd4b8)}
.post.blog-card .post-top.p5{background:linear-gradient(135deg,#ffe066,#ffd4b8)}
.post.blog-card .post-top.p6{background:linear-gradient(135deg,#ffb5a7,#ff7a59)}
.post.blog-card .post-top.p7{background:linear-gradient(135deg,#d4b8ff,#9be4d0)}
.post.blog-card .post-top.p8{background:linear-gradient(135deg,#fff4e3,#ffe066)}
.post.blog-card .post-top.p9{background:linear-gradient(135deg,#9be4d0,#cfe8ff)}
.post.blog-card .post-emoji{font-size:3rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08))}
.post.blog-card .post-emoji img,
.post.blog-card .post-emoji svg{width:3rem;height:3rem;display:block}
/* Body */
.post.blog-card .post-body{padding:1.25rem 1.25rem 1.125rem;display:flex;flex-direction:column;flex:1;background:#fff}
.post.blog-card .post-meta{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.875rem;font-size:0.75rem;color:var(--ink-2)}
.post.blog-card .post-meta .cat{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;background:#fff;border:1.5px solid var(--coral);color:var(--coral);border-radius:999px;font-weight:700;font-size:0.6875rem;letter-spacing:0.01em}
.post.blog-card .post-meta .read{color:var(--ink-2);font-weight:500}
.post.blog-card h4{font-size:1.1875rem;font-weight:800;letter-spacing:-0.015em;line-height:1.25;color:var(--ink);margin:0 0 0.625rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post.blog-card p{font-size:0.9375rem;color:var(--ink-2);line-height:1.55;margin:0 0 1.125rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.post.blog-card .post-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:0.5rem;font-size:0.8125rem;color:var(--ink-2)}
.post.blog-card .post-foot .post-date{font-weight:500}
.post.blog-card .post-foot .arrow{color:var(--coral);font-size:1.125rem;font-weight:700;transition:transform 0.15s}
.post.blog-card:hover .post-foot .arrow{transform:translateX(3px)}
/* PAGINATION — small dark circles, current page filled */
.pagination.blog-pagination{display:flex;justify-content:center;align-items:center;gap:0.375rem;margin:3rem 0 0;padding:0}
.pagination.blog-pagination .page-link{display:inline-flex}
.pagination.blog-pagination .page-link a,
.pagination.blog-pagination .page-link span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;background:transparent;color:var(--ink);text-decoration:none;font-weight:600;font-size:0.875rem;border:1.5px solid transparent;box-shadow:none;transition:all 0.15s}
.pagination.blog-pagination .page-link a:hover{background:var(--cream);border-color:transparent}
.pagination.blog-pagination .page-link span.current,
.pagination.blog-pagination .page-link .current{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;box-shadow:none !important}
.pagination.blog-pagination .page-link .dots{color:var(--ink-2);border:0;background:transparent}
.pagination.blog-pagination .page-link a.prev,
.pagination.blog-pagination .page-link a.next{color:var(--ink-2);font-size:1.125rem;line-height:1}
/* NEWSLETTER DARK SECTION — matches screenshot exactly */
.newsletter-dark{background:#2d1b0e;color:#fff;padding:4.5rem 1rem;position:relative;overflow:hidden;margin-top:1rem}
.newsletter-dark::before{content:'';position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,122,89,0.25) 0%,transparent 70%);pointer-events:none}
.newsletter-dark::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,122,89,0.18) 0%,transparent 70%);pointer-events:none}
.newsletter-dark .wrap{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.newsletter-dark .news-inner{text-align:center}
.newsletter-dark .hand{display:inline-block;font-family:'Caveat',cursive;color:var(--coral);font-size:1.375rem;margin-bottom:0.75rem;transform:rotate(-1deg)}
.newsletter-dark h2{font-size:clamp(1.875rem,3.6vw,2.625rem);font-weight:800;letter-spacing:-0.02em;line-height:1.15;color:#fff;margin:0 0 1rem}
.newsletter-dark h2 em{font-style:italic;color:var(--coral);font-weight:800}
.newsletter-dark p{font-size:1rem;line-height:1.6;color:rgba(255,244,227,0.78);max-width:520px;margin:0 auto 1.75rem}
.newsletter-dark .news-form{display:flex;gap:0.625rem;max-width:480px;margin:0 auto 1rem;flex-wrap:nowrap;align-items:center;justify-content:center}
.newsletter-dark .news-form input{flex:1;min-width:0;padding:0.875rem 1.125rem;background:#fff;border:0;border-radius:12px;font-family:inherit;font-size:0.9375rem;color:var(--ink);outline:none;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.newsletter-dark .news-form input::placeholder{color:#a98363}
.newsletter-dark .news-form button{padding:0.875rem 1.5rem;background:var(--coral);color:#fff;border:0;border-radius:12px;font-weight:700;font-size:0.9375rem;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background 0.15s,transform 0.15s}
.newsletter-dark .news-form button:hover{background:var(--coral-d);transform:translateY(-1px)}
.newsletter-dark .news-fine{font-size:0.8125rem;color:rgba(255,244,227,0.55);margin:0.75rem 0 0;max-width:none}
.newsletter-dark .news-fine a{color:rgba(255,244,227,0.85);text-decoration:underline;text-underline-offset:2px}
.newsletter-dark .news-fine a:hover{color:#fff}
/* TABLET — 2 cols */
@media (max-width: 980px){
.posts-grid.blog-cards{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
/* MOBILE — 1 col, tighter */
@media (max-width: 640px){
.blog-hero{padding:2rem 0 1.5rem}
.blog-hero h1{font-size:2rem !important}
.blog-hero .lede{font-size:0.9375rem}
.blog-hero .tags{gap:0.375rem}
.blog-hero .tag{padding:0.375rem 0.75rem;font-size:0.75rem}
.posts-grid.blog-cards{grid-template-columns:1fr !important;gap:1rem}
.post.blog-card .post-top{height:120px}
.post.blog-card .post-emoji{font-size:2.5rem}
.post.blog-card .post-emoji img,
.post.blog-card .post-emoji svg{width:2.5rem;height:2.5rem}
.post.blog-card .post-body{padding:1.125rem}
.post.blog-card h4{font-size:1.0625rem}
.newsletter-dark{padding:3rem 1rem}
.newsletter-dark .news-form{flex-wrap:wrap}
.newsletter-dark .news-form input,
.newsletter-dark .news-form button{width:100%;flex:0 0 100%}
.pagination.blog-pagination{gap:0.25rem;flex-wrap:wrap}
}
/* ============ BLOG LOAD-MORE BUTTON ============ */
.load-more-wrap{display:flex;flex-direction:column;align-items:center;gap:0.75rem;margin:2.5rem 0 1rem}
.load-more-btn{padding:0.85rem 1.75rem;background:var(--ink);color:var(--cream);border:2px solid var(--ink);border-radius:999px;font-size:0.9375rem;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:4px 4px 0 var(--coral);transition:transform 0.15s,box-shadow 0.15s,background 0.15s}
.load-more-btn:hover:not(:disabled){background:var(--coral);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.load-more-btn:disabled{opacity:0.6;cursor:wait}
.load-more-status{font-size:0.875rem;color:var(--ink-2);font-style:italic}
/* ============ BLOG DETAIL: REMOVE STRAY BORDERS ============ */
/* .related-section base CSS has border-top + border-bottom: 2px solid var(--ink).
They clash with the dark newsletter that follows. Strip them. */
.related-section{border-top:0 !important;border-bottom:0 !important}
/* ============ BLOG TOC SIDEBAR ============ */
.post-sidebar .toc{position:sticky;top:6rem;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:1.25rem;box-shadow:4px 4px 0 var(--ink);margin-bottom:1.25rem}
.post-sidebar .toc h5{font-size:0.6875rem;font-weight:800;letter-spacing:0.1em;color:var(--ink-2);text-transform:uppercase;margin:0 0 0.625rem}
.post-sidebar .toc ul{list-style:none;padding:0;margin:0}
.post-sidebar .toc li{padding:0.45rem 0;border-left:2px solid transparent;padding-left:0.75rem;margin-left:-0.75rem;font-size:0.875rem;line-height:1.4;transition:all 0.15s;cursor:pointer}
.post-sidebar .toc li a{color:var(--ink-2);text-decoration:none;display:block}
.post-sidebar .toc li:hover{border-left-color:var(--coral)}
.post-sidebar .toc li:hover a{color:var(--ink)}
.post-sidebar .toc li.active{border-left-color:var(--coral);background:rgba(238,111,87,0.06);border-radius:0 6px 6px 0}
.post-sidebar .toc li.active a{color:var(--ink);font-weight:700}
@media(max-width:900px){.post-sidebar .toc{position:static;margin-bottom:1.5rem}}
html{scroll-behavior:smooth}
/* ============ MM-PILL EXTRA PADDING ============ */
/* Get a quote button — +5% horizontal padding (was 0.7rem 1.4rem) */
.mm-pill{padding-left:1.47rem !important;padding-right:1.47rem !important}
/* ============ FOOTER TOP BORDER REMOVAL ============ */
/* footer{border-top:2px solid var(--ink)} appears 13 times in main.css from
concatenated per-page sections. It draws a hard ink line above the footer
on every page. Doubly ugly when the newsletter-dark sits directly above it.
Strip it. */
footer{border-top:0 !important}
/* Belt-and-braces: also nuke the related-section borders */
.related-section{border-top:0 !important;border-bottom:0 !important}
/* And ensure .newsletter-dark has no stray top/bottom borders either */
.newsletter-dark{border:0 !important}
/* Load-more button — match theme radius (14px, same as .btn-p / .btn-s) */
.load-more-btn{border-radius:14px !important;padding:1rem 1.875rem !important}
/* ============ SERVICE PAGE STEP FIX ============ */
/* Contact-form CSS sets .step{display:none} so only .step.active shows.
Service pages also use .step for the "how it works" cards — those should be
visible by default. Scope: show .step EXCEPT inside contact's stepper. */
body.single-service .step{display:block !important;background:transparent !important;border:0 !important;box-shadow:none !important;padding:1rem !important}
body.single-service .process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2rem}
body.single-service .process .step{background:#fff !important;border:2px solid var(--ink) !important;border-radius:18px !important;padding:1.5rem 1.25rem 1.25rem !important;text-align:center;position:relative;box-shadow:4px 4px 0 var(--ink) !important;display:block !important}
body.single-service .process .step-num{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--cream);font-weight:800;margin:0 auto 0.75rem;border:2px solid var(--ink)}
body.single-service .process .step:nth-child(2) .step-num{background:var(--coral)}
body.single-service .process .step:nth-child(3) .step-num{background:var(--teal,#5fb09a)}
body.single-service .process .step:nth-child(4) .step-num{background:#fbbf24;color:var(--ink)}
body.single-service .process .step h4{font-size:1rem;font-weight:800;margin-bottom:0.4rem}
body.single-service .process .step p{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
@media(max-width:760px){body.single-service .process{grid-template-columns:repeat(2,1fr);gap:0.75rem}}
/* ============ SERVICE PAGE: "WHO WE WORK WITH" GRID FIX ============ */
/* DB import stripped 'display:grid' from one section's inline style. Re-apply
it by name on service pages — any with the exact grid-template-cols
value below should be a grid. */
body.single-service div[style*="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"]{display:grid !important}
/* ============ /services/ ARCHIVE — LONG-FORM LISTING ============ */
.services-list{padding:1rem 0 4rem}
.svc-listing{padding:2.5rem 0;border-bottom:1px dashed rgba(45,27,14,0.18)}
.svc-listing:last-child{border-bottom:0}
.svc-listing-head{display:flex;align-items:center;gap:1rem;margin-bottom:0.85rem}
.svc-listing-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:1.5rem;flex-shrink:0}
.svc-listing-ico.c1{background:var(--peach)} .svc-listing-ico.c2{background:var(--mint)} .svc-listing-ico.c3{background:var(--rose)}
.svc-listing-ico.c4{background:#ffe066} .svc-listing-ico.c5{background:#b8e0d2} .svc-listing-ico.c6{background:#ffc4b8}
.svc-listing-ico.c7{background:#d4b8ff} .svc-listing-ico.c8{background:#ffb3c1}
.svc-listing h2{font-size:clamp(1.4rem,3vw,1.875rem);font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:0}
.svc-listing-body{font-size:1.0625rem;line-height:1.65;color:var(--ink);margin:0 0 1rem;max-width:100%}
.svc-listing-cta{display:inline-flex;align-items:center;gap:0.4rem;color:var(--coral);font-weight:700;font-size:0.9375rem;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:1px;transition:border-color 0.15s,color 0.15s}
.svc-listing-cta:hover{color:var(--coral-d);border-bottom-color:var(--coral)}
@media(max-width:560px){
.svc-listing-head{gap:0.75rem}
.svc-listing-ico{width:44px;height:44px;border-radius:10px;font-size:1.25rem}
}
/* ============ 404 PAGE ============ */
.err-404{padding:3rem 0 5rem;position:relative}
.err-card{position:relative;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:3.25rem 2.5rem 2.5rem;box-shadow:8px 8px 0 var(--ink);max-width:760px;margin:0 auto;transform:rotate(-0.4deg)}
.err-pin{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.err-stamp{position:absolute;top:1.2rem;right:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;border-radius:50%;background:var(--coral);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(8deg);line-height:1}
.err-stamp-num{font-size:1.875rem;font-weight:800;letter-spacing:-0.04em}
.err-stamp-words{font-family:'Caveat',cursive;font-size:0.875rem;font-weight:700;margin-top:0.15rem;text-align:center}
.err-doc{max-width:560px}
.err-eye{display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);font-weight:700;transform:rotate(-3deg);margin-bottom:0.3rem}
.err-doc h1{font-size:clamp(1.625rem,4vw,2.5rem);font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:0 0 0.875rem;color:var(--ink)}
.err-lede{font-size:1.0625rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.5rem}
.err-ctas{display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.err-search{display:flex;gap:0.5rem;background:var(--cream);border:2px dashed rgba(45,27,14,0.25);border-radius:14px;padding:0.4rem;max-width:480px}
.err-search input{flex:1;border:0;background:transparent;padding:0.6rem 0.75rem;font-family:inherit;font-size:0.9375rem;color:var(--ink);outline:none}
.err-search button{padding:0.6rem 1.1rem;background:var(--ink);color:var(--cream);border:0;border-radius:10px;font-weight:700;font-size:0.875rem;cursor:pointer;font-family:inherit}
.err-search button:hover{background:var(--coral)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.err-recent{max-width:920px;margin:3rem auto 0;text-align:center}
.err-recent-hand{font-family:'Caveat',cursive;font-size:1.375rem;color:var(--coral);font-weight:700;transform:rotate(-2deg);display:inline-block;margin-bottom:1rem}
.err-recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem;text-align:left}
.err-rec-card{display:flex;gap:0.875rem;align-items:flex-start;padding:1rem;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform 0.15s,box-shadow 0.15s}
.err-rec-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.err-rec-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:2px solid var(--ink);flex-shrink:0;font-size:1.25rem}
.err-rec-ico.c1{background:var(--peach)} .err-rec-ico.c2{background:var(--mint)} .err-rec-ico.c3{background:var(--rose)}
.err-rec-cat{display:block;font-size:0.6875rem;font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.2rem}
.err-rec-card h4{font-size:0.9375rem;font-weight:800;line-height:1.25;margin:0 0 0.4rem;color:var(--ink)}
.err-rec-arrow{font-size:0.8125rem;font-weight:700;color:var(--coral)}
@media(max-width:760px){
.err-card{padding:5.5rem 1.5rem 1.75rem}
.err-stamp{width:80px;height:80px;top:-22px;right:1rem}
.err-stamp-num{font-size:1.5rem}
.err-ctas{flex-direction:column}
.err-ctas .btn-p, .err-ctas .btn-s{width:100%;justify-content:center;text-align:center}
.err-recent-grid{grid-template-columns:1fr}
}
/* ============ /services/ ARCHIVE PAGE ============ */
.hero-services{padding:5rem 0 4rem;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,#fff8eb 100%);position:relative;overflow:hidden}
.hero-services::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--peach) 0%,transparent 70%);opacity:0.5;pointer-events:none}
.hero-services::after{content:'';position:absolute;bottom:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--mint) 0%,transparent 70%);opacity:0.4;pointer-events:none}
.hero-services .hero-inner{max-width:740px;margin:0 auto;position:relative;z-index:1}
.hero-services .crumb{margin-bottom:0.75rem}
.hero-services h1{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem}
.hero-services h1 em{font-style:italic;color:var(--coral);background:linear-gradient(transparent 60%,var(--peach) 60%);padding:0 0.15em}
.hero-services .lede{margin:0 auto 1.75rem;max-width:600px}
.hero-services .cta-row{justify-content:center}
.services-archive{padding:5rem 0;background:var(--bg)}
.services-archive .sh{text-align:center;max-width:680px;margin:0 auto 3rem}
.services-archive .sh p{color:var(--ink-2);max-width:520px;margin:1rem auto 0;font-size:1rem}
.svc-archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1180px;margin:0 auto}
@media(max-width:1080px){.svc-archive-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-archive-grid{grid-template-columns:1fr}}
.svc-archive-grid .svc-card{padding:1.75rem;display:flex;flex-direction:column;gap:0;background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);transition:transform 0.2s,box-shadow 0.2s;text-decoration:none;color:inherit;min-height:280px}
.svc-archive-grid .svc-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.svc-archive-grid .svc-card h3{font-size:1.125rem;font-weight:800;margin:0 0 0.4rem;letter-spacing:-0.01em}
.svc-archive-grid .svc-card p{font-size:0.875rem;color:var(--ink-2);line-height:1.5;margin:0;flex-grow:1}
.svc-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;padding-top:1rem;border-top:2px dashed rgba(45,27,14,0.12);font-size:0.8125rem}
.svc-card-foot .svc-from{font-weight:700;color:var(--coral);font-size:0.9375rem}
.svc-card-foot .more{font-weight:700;color:var(--ink);transition:gap 0.15s}
.why-archive{padding:4rem 0 5rem;background:#fff}
.why-archive .why-grid{margin-top:2rem}
@media(max-width:760px){
.hero-services{padding:3rem 0 2.5rem}
.services-archive{padding:3rem 0}
.svc-archive-grid .svc-card{min-height:0;padding:1.25rem}
}
/* ============ PRICING TIERS — feature checkmark bullets ============ */
.price ul{margin:1rem 0 1.5rem;padding:0;list-style:none;flex:1}
.price ul li{position:relative;padding:0.4rem 0 0.4rem 1.8rem;font-size:0.9375rem;line-height:1.45;color:var(--ink);border-bottom:1px dashed rgba(45,27,14,0.1)}
.price ul li:last-child{border-bottom:0}
.price ul li::before{
content:'';
position:absolute;
left:0; top:0.6rem;
width:18px; height:18px;
background:var(--coral);
border:2px solid var(--ink);
border-radius:50%;
display:flex;
}
.price ul li::after{
content:'✓';
position:absolute;
left:3px; top:0.45rem;
color:#fff;
font-size:0.75rem;
font-weight:800;
width:18px; text-align:center;
line-height:18px;
}
.price.featured ul li::before{background:var(--ink)}
.price.featured ul li::after{color:var(--coral)}