.services-page { background: #f5f9fc; }
.services-page .section.work { padding: 64px 0 72px !important; background: linear-gradient(180deg, #fff 0, #f5f9fc 380px) !important; }
.services-page .container { width: calc(100% - 48px); max-width: 1180px; margin-inline: auto; }
.services-page .work-intro { display: block; margin-bottom: 36px; }
.services-page .work-intro .section-heading { max-width: 760px; margin: 0 auto; text-align: center; align-items: center; }
.services-page .work-intro .section-heading h1 { color: #14243a !important; -webkit-text-fill-color: #14243a; opacity: 1; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.45; margin: 18px 0 16px; letter-spacing: -.025em; }
.services-page .work-intro p { max-width: 680px; font-size: 16px; line-height: 1.85; margin: 0 auto; }
.services-page .work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.services-page .work .project { grid-column: auto; min-width: 0; padding: 0 24px 24px !important; border: 1px solid #dce7ef !important; border-radius: 18px; background: #fff !important; box-shadow: 0 5px 18px #14243a05; }
.services-page .project::before { display: none; }
.services-page .project .project-link { display: none; }
.services-page .project .service-visual { position: relative; inset: auto !important; width: calc(100% + 48px); height: 145px !important; margin: 0 -24px 20px; display: grid; place-items: center; background: linear-gradient(135deg, #e9f6fb, #f6fbfd); border-bottom: 1px solid #e6f0f5; }
.services-page .service-visual svg { width: 245px; max-width: 88%; height: 132px; filter: none; }
.services-page .work .project .project-content { position: relative; width: 100%; flex: 1; }
.services-page .project-tag { font-size: 10px; letter-spacing: .12em; line-height: 1.6; }
.services-page .work .project h3 { margin: 10px 0 10px !important; font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
.services-page .work .project p { font-size: 14px; line-height: 1.85; color: #60738b; }
.services-page .work .project:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #14243a0b; }
.services-page .section.process { background: #fff !important; border-top: 1px solid #e5edf3; padding: 60px 0 68px !important; }
.services-page .process .section-heading { max-width: 760px; margin: 0 auto 32px; text-align: center; align-items: center; }
.services-page .process .section-heading h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.5; }
.services-page .process .section-heading p { font-size: 15px; line-height: 1.85; }
.services-page .process-grid { gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services-page .process .process-card { background: #f7fbfd !important; box-shadow: none; padding: 24px; border-radius: 16px; }
.services-page .process .process-card::after { display: none; }
.services-page .process .process-card h3 { font-size: 20px; margin: 16px 0 10px; }
.services-page .process-index span:last-child { display: none; }
@media (max-width: 900px) { .services-page .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services-page .process-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .services-page .section.work { padding: 38px 0 44px !important; } .services-page .work-intro { margin-bottom: 26px; } .services-page .work-grid { grid-template-columns: 1fr; gap: 16px; } .services-page .project .service-visual { height: 130px !important; } .services-page .section.process { padding: 40px 0 44px !important; } }
@media (prefers-reduced-motion: reduce) { .services-page .work .project:hover { transform: none; } }
.services-page .service-card-link { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid #e4edf4; color:#087da7; font-size:14px; text-decoration:none; }
.services-page .service-card-link::after { content:""; position:absolute; inset:0; z-index:2; }
.services-page .work .project .project-content:has(.service-card-link) { position:static; }
.services-page .project:focus-within { outline:2px solid #087da7; outline-offset:4px; }
.service-detail .service-detail-hero { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:48px; margin:30px 0 40px; }
.service-detail .service-detail-hero .section-heading { text-align:start; align-items:flex-start; }
.service-detail .service-detail-hero h1 { color:#14243a !important; -webkit-text-fill-color:#14243a; font-size:clamp(30px,3.5vw,44px); line-height:1.5; }
.service-detail .service-detail-hero .btn { margin-top:22px; }
.service-detail .work .service-detail-art { padding:0 !important; min-height:260px !important; display:grid !important; place-items:center; background:#edf8fc !important; }
.service-detail .service-detail-art .service-visual { margin:0; width:100%; height:240px !important; border:0; background:none; }
.service-detail .service-detail-art .service-visual svg { width:360px; height:220px; }
.service-detail .service-description { max-width:820px; padding:28px 32px; background:white; border:1px solid #dce7ef; border-radius:16px; }
.service-detail .service-description h2 { margin:0 0 14px; font-size:24px; }
.service-detail .service-description p { margin:0; font-size:17px; line-height:1.9; }
@media(max-width:700px) { .service-detail .service-detail-hero { grid-template-columns:1fr; gap:24px; } .service-detail .service-description { padding:24px; } }
.services-page .service-card-link { justify-content:flex-end; }
.services-page .service-card-link:empty { margin:0; padding:0; border:0; }
.services-page .work .project h3 { text-align:start; font-size:22px; line-height:1.5; }
.services-page .work .project h3 a { display:block; margin:0; padding:0; border:0; color:#14243a; font-size:inherit; font-weight:700; line-height:inherit; text-align:start; text-decoration:none; }
.services-page .work .project h3 a:hover { color:#087da7; }
.webapp-detail .service-description { max-width:none; }
.webapp-detail .webapp-benefits,.webapp-detail .webapp-start { margin-top:36px; }
.webapp-detail .webapp-benefits h2,.webapp-detail .webapp-start h2 { font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 20px; color:#14243a; }
.webapp-detail .webapp-benefits ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; margin:0; list-style:none; }
.webapp-detail .webapp-benefits li { background:#fff; border:1px solid #dce7ef; border-radius:14px; padding:20px 24px; color:#40566c; line-height:1.8; }
.webapp-detail .webapp-start { padding:28px 32px; background:#eaf5fa; border-radius:16px; }
.webapp-detail .webapp-start p { margin:0 0 18px; line-height:1.85; }
.webapp-detail .webapp-start ol { margin:0; padding-inline-start:24px; color:#40566c; line-height:1.9; }
.webapp-detail .webapp-start li+li { margin-top:10px; }
@media(max-width:640px) { .webapp-detail .webapp-benefits ul { grid-template-columns:1fr; } .webapp-detail .webapp-start { padding:24px; } }
.webapp-detail .service-detail-hero { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; margin:28px 0 36px; align-items:center; }
.webapp-detail .service-detail-hero .section-heading { display:flex; flex-direction:column; align-items:flex-start !important; text-align:start !important; max-width:none; margin:0; }
.webapp-detail .service-detail-hero .section-heading h1 { width:100%; max-width:none; text-align:start !important; margin:14px 0 18px !important; font-size:clamp(28px,3.2vw,40px) !important; line-height:1.35; }
.webapp-detail .service-detail-hero .section-heading p { width:100%; max-width:600px; text-align:start !important; margin:0 !important; font-size:16px; line-height:1.9; }
.webapp-detail .service-detail-hero .section-heading .btn { align-self:flex-start; margin-top:22px; background:#142f4b; border-color:#142f4b; color:#fff; box-shadow:none; }
.webapp-detail .service-detail-hero .section-heading .btn:hover { background:#204766; }
.webapp-detail .work .service-detail-art { min-height:230px !important; box-shadow:none; }
.webapp-detail .service-detail-art .service-visual { height:220px !important; }
.webapp-detail .service-description { padding:26px 30px; }
@media(max-width:700px) { .webapp-detail .service-detail-hero { grid-template-columns:1fr; gap:24px; } }
.webapp-detail .service-detail-hero .section-heading .eyebrow { align-self:flex-start; justify-content:flex-start; width:auto; margin:0 !important; text-align:start; }
.webapp-detail .service-detail-hero .section-heading { justify-content:center; gap:0; }
.webapp-detail .service-detail-hero .section-heading h1 { letter-spacing:-.025em; margin:16px 0 18px !important; }
.webapp-detail .service-detail-hero .section-heading p { color:#60738b; }
.webapp-detail .service-detail-hero .section-heading .btn { min-height:48px; border-radius:10px; padding-inline:24px; }
.webapp-detail .service-description { background:#fff; border-color:#e0eaf1; border-radius:16px; }
.webapp-detail .service-description h2 { font-size:24px; line-height:1.5; margin:0 0 14px; }
.webapp-detail .service-description p { max-width:920px; font-size:16px; line-height:1.9; }
.webapp-detail .service-detail-hero { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; margin:24px 0 32px; padding:30px; border:1px solid #dce9f1; border-radius:20px; background:#fff; }
.webapp-detail .service-detail-hero .section-heading h1 { font-size:clamp(28px,3vw,38px) !important; margin:14px 0 16px !important; }
.webapp-detail .service-detail-hero .section-heading p { font-size:16px; line-height:1.85; }
.webapp-detail .work .service-detail-art { min-height:250px !important; border:0 !important; border-radius:16px; background:linear-gradient(145deg,#e5f4fb,#f4fafd) !important; }
.webapp-detail .service-detail-art .service-visual { width:100%; height:250px !important; }
.webapp-detail .service-detail-art .service-visual svg { width:100%; max-width:100%; height:250px; }
@media(max-width:700px) { .webapp-detail .service-detail-hero { grid-template-columns:1fr; padding:24px; gap:24px; } .webapp-detail .work .service-detail-art { min-height:200px !important; } .webapp-detail .service-detail-art .service-visual,.webapp-detail .service-detail-art .service-visual svg { height:200px !important; } }
.seo-service-detail .seo-audience,.seo-service-detail .seo-deliverables,.seo-service-detail .seo-workflow { margin-top:36px; }
.seo-service-detail .seo-workflow>h2 { font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 20px; }
.seo-step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.seo-step { padding:26px; border:1px solid #dce7ef; border-radius:16px; background:#fff; }
.seo-step-number { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#e4f4fa; color:#087da7; font-size:14px; font-weight:600; }
.seo-service-detail .seo-step h3 { font-size:21px; line-height:1.5; margin:16px 0 10px; }
.seo-service-detail .seo-step p { margin:0; font-size:15px; line-height:1.9; }
.seo-deliverables ul { margin:0; padding-inline-start:24px; color:#40566c; font-size:16px; line-height:1.9; }
.seo-deliverables li+li { margin-top:10px; }
@media(max-width:640px) { .seo-step-grid { grid-template-columns:1fr; } }
.seo-pricing { margin-top:36px; }
.seo-service-detail .seo-pricing h2 { font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 20px; }
.seo-table-scroll { overflow-x:auto; border:1px solid #dce7ef; border-radius:16px; background:#fff; }
.seo-table-scroll:focus-visible { outline:2px solid #087da7; outline-offset:4px; }
.seo-pricing table { width:100%; min-width:680px; border-collapse:collapse; font-size:16px; }
.seo-pricing th,.seo-pricing td { padding:22px 20px; border-bottom:1px solid #e5edf3; border-inline-end:1px solid #e5edf3; text-align:center; vertical-align:middle; }
.seo-pricing thead th { background:#15324d; color:#fff; font-weight:600; }
.seo-pricing thead th:nth-child(2n) { background:#087da7; }
.seo-pricing tbody th { text-align:start; color:#14243a; font-weight:500; background:#f3f8fb; width:30%; }
.seo-pricing tbody td { color:#40566c; }
.seo-pricing tbody tr:nth-child(even) td { background:#f9fcfd; }
.seo-pricing tr:last-child>* { border-bottom:0; }
.seo-pricing tr>*:last-child { border-inline-end:0; }
.seo-pricing small { display:block; margin-top:5px; font-size:12px; line-height:1.6; color:#087da7; }
.seo-table-caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.seo-ranking-pricing table { min-width:800px; }
/* Shared, compact header for all nine service detail pages. */
.services-page.service-detail .section.work { padding-top:32px !important; }
.services-page.service-detail .service-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:32px; margin:24px 0 30px; padding:28px 32px; border:1px solid #dce9f1; border-radius:18px; background:linear-gradient(110deg,#fff 55%,#f2f9fc); }
.services-page.service-detail .service-detail-hero .section-heading { display:flex; flex-direction:column; align-items:flex-start !important; justify-content:center; text-align:start !important; width:100%; max-width:none; margin:0; }
.services-page.service-detail .service-detail-hero .section-heading h1 { width:100%; max-width:none; margin:0 0 14px !important; font-size:clamp(27px,2.8vw,36px) !important; line-height:1.5; text-align:start !important; color:#14243a !important; -webkit-text-fill-color:#14243a; overflow-wrap:anywhere; }
.services-page.service-detail .service-detail-hero .section-heading p { width:100%; max-width:680px; margin:0 !important; font-size:16px; line-height:1.85; text-align:start !important; color:#60738b; }
.services-page.service-detail .work .service-detail-art { min-height:0 !important; height:180px !important; padding:0 !important; border:0 !important; border-radius:12px; background:transparent !important; box-shadow:none; pointer-events:none; }
.services-page.service-detail .service-detail-art .service-visual { position:relative; inset:auto !important; margin:0; width:100%; height:180px !important; background:none; border:0; }
.services-page.service-detail .service-detail-art .service-visual svg { width:100%; max-width:100%; height:180px !important; }
.services-page.service-detail .service-description { max-width:none; padding:24px 28px; }
@media(max-width:800px) { .services-page.service-detail .service-detail-hero { grid-template-columns:minmax(0,1fr) 220px; gap:24px; padding:24px; } }
@media(max-width:600px) { .services-page.service-detail .service-detail-hero { grid-template-columns:1fr; gap:18px; padding:22px; } .services-page.service-detail .work .service-detail-art { width:240px; max-width:100%; height:150px !important; justify-self:center; } .services-page.service-detail .service-detail-art .service-visual,.services-page.service-detail .service-detail-art .service-visual svg { height:150px !important; } }
/* WordPress package comparison. */
.wordpress-pricing h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 20px; }
.wordpress-pricing .wordpress-price th,.wordpress-pricing .wordpress-price td { background:#e9f5fa; color:#14243a; font-weight:700; }
.wordpress-pricing .wordpress-price td { font-size:24px; }
.wordpress-notes { margin-top:20px; color:#60738b; line-height:1.85; }
.wordpress-notes h3 { font-size:17px; color:#14243a; margin-bottom:8px; }
.wordpress-notes ul { padding-inline-start:22px; }
.wordpress-benefits { margin-top:32px; }
.wordpress-benefits h2 { font-size:clamp(23px,2.5vw,29px); color:#14243a; line-height:1.5; }
.wordpress-benefits p { color:#60738b; line-height:1.85; }
.wordpress-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.wordpress-benefit-grid article { padding:24px; border:1px solid #dce9f1; border-radius:16px; background:#fff; }
.wordpress-benefit-grid h3 { font-size:20px; color:#14243a; margin:0 0 12px; line-height:1.6; }
.wordpress-benefit-grid p { margin:0; }
@media(max-width:900px) { .wordpress-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .wordpress-benefit-grid { grid-template-columns:1fr; } }
/* Prominent return navigation, scoped to service detail pages. */
.services-page.service-detail .work > .container > a.text-link {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:11px 18px; margin:0;
  border:1px solid #c0deeb; border-radius:10px;
  background:#e7f4fa; color:#15324d; font-size:15px; font-weight:600;
  line-height:1.5; text-decoration:none; box-shadow:0 3px 10px #15324d08;
  transition:background .18s,color .18s,border-color .18s;
}
.services-page.service-detail .work > .container > a.text-link:hover {
  background:#15324d; color:#fff; border-color:#15324d;
}
.services-page.service-detail .work > .container > a.text-link:focus-visible {
  outline:3px solid #087da7; outline-offset:4px;
}
.facebook-packages { margin-top:36px; }
.facebook-packages h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.facebook-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.facebook-package { background:#fff; border:1px solid #d2e5ef; border-radius:18px; padding:28px; }
.facebook-package h3 { color:#15324d; font-size:22px; line-height:1.6; margin:0 0 18px; }
.facebook-package p,.facebook-package li { color:#60738b; line-height:1.85; }
.facebook-package .facebook-package-price { color:#087da7; font-size:30px; font-weight:700; margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid #e0edf4; }
.facebook-package ul { padding-inline-start:22px; margin:0; }
.facebook-package li + li { margin-top:12px; }
@media(max-width:700px) { .facebook-package-grid { grid-template-columns:1fr; } .facebook-package { padding:22px; } }
.facebook-ads-pricing h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin-bottom:16px; }
.facebook-ads-pricing > p { color:#60738b; line-height:1.85; margin-bottom:24px; }
.facebook-ads-pricing .facebook-ads-price td { font-size:24px; font-weight:700; color:#087da7; background:#edf8fc; }
.facebook-guidance,.facebook-faq { margin-top:36px; }
.facebook-guidance h2,.facebook-faq h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.facebook-audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.facebook-audience-grid article { background:#fff; border:1px solid #dce9f1; border-radius:16px; padding:24px; }
.facebook-audience-grid h3 { font-size:20px; line-height:1.6; color:#15324d; margin:0 0 12px; }
.facebook-guidance p,.facebook-guidance li,.facebook-faq p { color:#60738b; line-height:1.85; }
.facebook-audience-grid p { margin:0; }
.facebook-service-guide { margin-top:24px; padding:28px; background:#eaf6fb; border-radius:16px; }
.facebook-service-guide h2 { font-size:23px; margin-bottom:14px; }
.facebook-service-guide ul { margin:0; padding-inline-start:22px; }
.facebook-service-guide li + li { margin-top:12px; }
.facebook-faq details { border:1px solid #dce9f1; border-radius:12px; padding:20px 24px; background:#fff; margin-top:12px; }
.facebook-faq summary { cursor:pointer; font-size:18px; font-weight:600; color:#15324d; line-height:1.6; }
.facebook-faq summary:focus-visible { outline:2px solid #087da7; outline-offset:5px; }
.facebook-faq p { margin:14px 0 0; }
@media(max-width:800px) { .facebook-audience-grid { grid-template-columns:1fr; } }
.marketplace-pricing h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin-bottom:16px; }
.marketplace-pricing > p { color:#60738b; line-height:1.85; margin-bottom:24px; }
.marketplace-pricing .marketplace-price td { font-size:28px; color:#15324d; font-weight:700; background:#edf8fc; }
.marketplace-pricing thead th:nth-child(2) { background:#d84420; }
.marketplace-pricing thead th:nth-child(3) { background:#272477; }
.marketplace-notes { padding:22px 26px; border-radius:14px; background:#eaf6fb; margin-top:20px; color:#60738b; line-height:1.85; }
.marketplace-notes h3 { color:#14243a; font-size:18px; margin:0 0 10px; }
.marketplace-notes ul { margin:0; padding-inline-start:22px; }
.marketplace-notes li + li { margin-top:6px; }
.marketplace-information { margin-top:24px; }
.video-portfolio { margin:36px auto 0; max-width:960px; }
.video-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.video-portfolio-player { aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#14243a; border:1px solid #dce9f1; }
.video-portfolio-player iframe { display:block; width:100%; height:100%; border:0; }
.video-portfolio-link { display:inline-flex; align-items:center; min-height:44px; margin-top:18px; padding:10px 18px; border:1px solid #c0deeb; border-radius:10px; background:#e7f4fa; color:#15324d; text-decoration:none; font-weight:600; }
.video-portfolio-link:hover { background:#15324d; color:#fff; }
.video-portfolio-link:focus-visible { outline:3px solid #087da7; outline-offset:4px; }
.line-oa-package { margin:36px auto 0; max-width:900px; border:1px solid #d2e5ef; border-radius:18px; overflow:hidden; background:#fff; }
.line-oa-package-header { padding:28px 32px; background:#eaf6fb; border-bottom:1px solid #d2e5ef; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.line-oa-package h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0; }
.line-oa-package .line-oa-package-price { color:#087da7; font-size:32px; line-height:1.5; font-weight:700; margin:0; white-space:nowrap; }
.line-oa-package ul { list-style:none; margin:0; padding:8px 32px; }
.line-oa-package li { padding:20px 0; color:#40566c; line-height:1.8; font-size:17px; }
.line-oa-package li + li { border-top:1px solid #e5edf3; }
@media(max-width:640px) { .line-oa-package-header { flex-direction:column; align-items:flex-start; gap:12px; padding:24px; } .line-oa-package ul { padding:8px 24px; } }
.line-oa-package .line-package-subheading { margin:24px 32px 0; color:#14243a; font-size:18px; line-height:1.6; }
@media(max-width:640px) { .line-oa-package .line-package-subheading { margin-inline:24px; } }
.line-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; align-items:stretch; }
.line-package-grid .line-oa-package { width:100%; max-width:none; margin:0; box-shadow:0 8px 24px #15324d05; }
.line-package-grid .line-oa-package-header { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:16px; padding:28px; }
.line-package-grid .line-oa-package h2 { font-size:23px; line-height:1.6; min-height:74px; }
.line-package-grid .line-oa-package-price { font-size:36px; line-height:1.3; }
.line-package-grid .line-oa-package ul { padding:8px 28px 16px; }
.line-package-grid .line-oa-package li { position:relative; padding:18px 0 18px 26px; padding-inline-start:26px; padding-inline-end:0; font-size:16px; }
.line-package-grid .line-oa-package li::before { content:"✓"; position:absolute; inset-inline-start:0; color:#087da7; font-weight:700; }
.line-package-grid .line-package-subheading { margin:22px 28px 0; font-size:16px; color:#60738b; }
@media(max-width:760px) {
  .line-package-grid { grid-template-columns:1fr; gap:20px; }
  .line-package-grid .line-oa-package h2 { min-height:0; }
  .line-package-grid .line-oa-package-header { padding:24px; }
  .line-package-grid .line-oa-package ul { padding-inline:24px; }
  .line-package-grid .line-package-subheading { margin-inline:24px; }
}
.richmenu-portfolio { margin-top:48px; }
.richmenu-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 12px; }
.richmenu-portfolio > p { color:#60738b; line-height:1.8; margin:0 0 24px; }
.richmenu-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1000px; margin-inline:auto; }
.richmenu-portfolio figure { margin:0; border:1px solid #dce9f1; border-radius:16px; overflow:hidden; background:#fff; }
.richmenu-portfolio figure a { display:block; background:#f0f7fb; }
.richmenu-portfolio img { display:block; width:100%; height:auto; }
.richmenu-portfolio figcaption { padding:12px 16px; color:#15324d; font-size:14px; font-weight:600; line-height:1.6; }
.richmenu-portfolio a:focus-visible { outline:3px solid #087da7; outline-offset:-3px; }
@media(max-width:800px) { .richmenu-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media(max-width:480px) { .richmenu-portfolio-grid { grid-template-columns:1fr; max-width:340px; gap:16px; } }
.shopee-portfolio { margin-top:40px; }
.shopee-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.shopee-portfolio figure { width:100%; max-width:300px; margin:0; border:1px solid #dce9f1; border-radius:16px; overflow:hidden; background:#fff; }
.shopee-portfolio img { display:block; width:100%; height:auto; }
.shopee-portfolio figcaption { padding:14px 18px; color:#15324d; font-size:14px; font-weight:600; line-height:1.6; }
@media(max-width:480px) { .shopee-portfolio figure { margin-inline:auto; } }
.marketplace-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:960px; gap:12px; align-items:start; }
.marketplace-portfolio-grid figure { max-width:none; }
.marketplace-portfolio-grid img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:top center; }
@media(max-width:640px) { .marketplace-portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .marketplace-portfolio-grid figcaption { padding:8px; font-size:12px; overflow-wrap:anywhere; } }
.line-account-portfolio { margin-top:40px; }
.line-account-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.line-account-portfolio figure { width:100%; max-width:340px; margin:0; background:#fff; border:1px solid #dce9f1; border-radius:14px; overflow:hidden; }
.line-account-portfolio img { display:block; width:100%; height:auto; }
@media(max-width:480px) { .line-account-portfolio figure { margin-inline:auto; } }
.line-account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.line-account-card { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid #dce9f1; border-radius:14px; background:#fff; min-width:0; }
.line-account-avatar { display:grid; place-items:center; flex:0 0 48px; height:48px; border-radius:50%; background:#e7f4fa; color:#087da7; font-weight:700; font-size:16px; }
.line-account-card h3 { color:#15324d; font-size:16px; line-height:1.6; margin:0 0 4px; overflow-wrap:anywhere; }
.line-account-card p { color:#60738b; font-size:12px; line-height:1.5; margin:0; }
@media(max-width:900px) { .line-account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .line-account-grid { grid-template-columns:1fr; } }
.line-account-card .line-account-logo { display:block; flex:0 0 48px; width:48px; height:48px; object-fit:contain; border-radius:10px; background:#fff; }
.website-design-portfolio { margin-top:36px; }
.website-design-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.website-design-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; width:100%; }
.website-design-portfolio figure { display:flex; flex-direction:column; margin:0; border:1px solid #dce9f1; border-radius:14px; overflow:hidden; background:#fff; }
.website-design-portfolio img { display:block; width:100%; height:auto; aspect-ratio:1/1.9; object-fit:contain; object-position:top center; background:#f3f7fa; }
.website-design-portfolio figcaption { flex:1; padding:14px 18px; border-top:1px solid #e5edf3; color:#15324d; font-size:14px; font-weight:600; line-height:1.6; }
@media(max-width:600px) { .website-design-portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .website-design-portfolio figcaption { padding:10px 8px; font-size:12px; } }
.website-design-portfolio img[src="../images/website-portfolio-chaum.jpg"] { object-fit:cover; object-position:top center; }
.webapp-portfolio { margin-top:36px; }
.webapp-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.webapp-portfolio img { display:block; width:100%; max-width:640px; height:auto; border:1px solid #dce9f1; border-radius:14px; }
.webapp-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.webapp-portfolio-grid figure { display:flex; flex-direction:column; margin:0; border:1px solid #dce9f1; border-radius:14px; overflow:hidden; background:#fff; }
.webapp-portfolio-grid img { display:block; width:100%; max-width:none; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top center; border:0; border-radius:0; background:#f1f6fa; }
.webapp-portfolio-grid figcaption { flex:1; padding:14px 18px; color:#15324d; font-size:14px; font-weight:600; line-height:1.6; border-top:1px solid #e5edf3; }
@media(max-width:800px) { .webapp-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .webapp-portfolio-grid { grid-template-columns:1fr; max-width:340px; margin-inline:auto; } }
.google-ads-portfolio { margin-top:36px; }
.google-ads-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.google-ads-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.google-ads-work-grid figure { display:flex; align-items:center; justify-content:center; padding:20px; margin:0; border:1px solid #dce9f1; border-radius:14px; background:#fff; }
.google-ads-work-grid img { display:block; width:100%; height:210px; object-fit:contain; }
@media(max-width:640px) { .google-ads-work-grid { grid-template-columns:1fr; } }
.seo-work-section { padding-top:32px; }
.seo-work-section h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.seo-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:20px; }
.seo-work-grid figure { margin:0; border:1px solid #dce9f1; border-radius:14px; overflow:hidden; background:#fff; }
.seo-work-grid img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top center; }
@media(max-width:600px) { .seo-work-grid { grid-template-columns:minmax(0,340px); justify-content:center; } }
.wordpress-portfolio { margin-top:36px; }
.wordpress-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); line-height:1.5; margin:0 0 22px; }
.wordpress-portfolio figure { width:100%; max-width:340px; margin:0; border:1px solid #dce9f1; border-radius:14px; overflow:hidden; background:#fff; }
.wordpress-portfolio img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top center; }
.wordpress-portfolio figcaption { padding:14px 18px; color:#15324d; font-size:14px; font-weight:600; line-height:1.6; }
@media(max-width:480px) { .wordpress-portfolio figure { margin-inline:auto; } }
.facebook-page-portfolio h2 { color:#14243a; font-size:clamp(23px,2.5vw,29px); margin:0 0 24px; }
.facebook-page-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.facebook-page-portfolio-grid figure { margin:0; overflow:hidden; border:1px solid #dce9f1; border-radius:14px; background:#fff; }
.facebook-page-portfolio-grid img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#f5f8fb; }
.facebook-page-portfolio-grid figcaption { padding:16px; color:#15324d; font-size:15px; font-weight:600; line-height:1.6; }
@media(max-width:800px) { .facebook-page-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .facebook-page-portfolio-grid { grid-template-columns:1fr; } }
.facebook-ads-portfolio .facebook-page-portfolio-grid img { aspect-ratio:1/1; object-fit:cover; object-position:top center; }