/* Four distinct, readable examples. No devices, paper stacks, or decorative people. */
.service-visual{width:100%;min-width:0;margin:0;color:var(--navy);font-family:var(--sans);container:service-example / inline-size}
.service-visual *{box-sizing:border-box}
.service-visual .sv-stage{width:100%;position:relative;overflow:hidden}
.service-visual p,.service-visual ol{margin:0}
.service-visual .sv-document-meta{display:flex;gap:14px;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.08em;line-height:1.7}
.service-visual .sv-document-meta>span:first-child{color:var(--blue);letter-spacing:.15em}
.service-visual .sv-document-meta>span:last-child{letter-spacing:0;color:#627078;text-align:right}
.service-visual .sv-title{font:500 clamp(21px,4.4cqw,30px)/1.65 var(--serif);letter-spacing:.025em}
.service-visual .sv-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:17px 0 0;font-size:12px;line-height:1.85;color:var(--navy)}
.service-visual .sv-caption a{flex-shrink:0;color:var(--blue);border-bottom:1px solid var(--line);padding:0 0 3px;text-decoration:none}
.service-visual .sv-caption a span{margin-left:12px}.service-visual .sv-caption a:hover{border-color:var(--blue)}
.service-visual .sv-detail-note{font-size:12px;line-height:1.9;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.service-visual .sv-research{background:var(--paper);padding:30px 32px;border-top:3px solid var(--navy)}
.sv-research-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:25px 0 28px}
.service-visual .sv-metric{flex-shrink:0;text-align:right}.sv-metric>span{display:block;font-size:10px;color:#627078;line-height:1.8}
.sv-metric>strong{display:block;font:500 clamp(32px,7.7cqw,51px)/1.3 Georgia,serif;color:var(--blue);letter-spacing:-.03em;margin-top:7px}.sv-metric small{font:12px var(--sans);margin-left:5px;letter-spacing:0}
.sv-chart-heading{display:flex;justify-content:space-between;font-size:11px;color:#627078;margin-bottom:9px}
.sv-comparison{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;line-height:1.5}
.sv-comparison th{width:58px;text-align:left;font-weight:400}.sv-comparison td:last-child,.sv-comparison thead th:last-child{width:85px;text-align:right;white-space:nowrap}
.sv-comparison thead th{padding:0 0 10px;font-size:9px;color:#718088;font-weight:400}.sv-comparison .sv-axis{width:auto;padding-left:0;padding-right:0}.sv-comparison .sv-axis>div{display:flex;justify-content:space-between}
.sv-comparison tbody th,.sv-comparison td{padding:10px 0;border-bottom:1px solid var(--line)}.sv-comparison td small{font-size:9px;margin-left:3px}
.sv-range-track{display:block;position:relative;height:20px;background:linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px) calc(100% - 1px),var(--line) calc(100% - 1px))}
.sv-range-track i{position:absolute;top:9px;left:var(--range-start);width:var(--range-width);height:3px;background:var(--navy)}
.sv-range-track i:before,.sv-range-track i:after{content:'';position:absolute;top:-3px;width:9px;height:9px;border-radius:50%;background:inherit}.sv-range-track i:before{left:-4px}.sv-range-track i:after{right:-4px}
.sv-comparison .sv-comparison-own th,.sv-comparison .sv-comparison-own td{color:var(--blue);font-weight:600;border-bottom:0;padding-top:17px}.sv-comparison-own .sv-range-track i{background:var(--blue)}
.sv-takeaway{display:grid;grid-template-columns:78px 1fr;gap:15px;border-top:1px solid var(--line);padding-top:20px;margin-top:16px;align-items:start}.sv-takeaway>span{font-size:10px;color:var(--blue);padding-top:4px}.sv-takeaway>p{font-size:12px;line-height:1.9}.sv-takeaway strong{font:500 clamp(18px,3.9cqw,24px)/1.8 var(--serif)}
.service-visual .sv-priorities{padding:17px 0 0;list-style:none;margin-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:2.1}.sv-priorities li{display:flex;gap:17px}.sv-priorities span{font:12px/2.1 Georgia,serif;color:var(--blue)}
.service-visual .sv-copywriting{background:var(--navy);color:var(--paper);padding:30px 36px}.sv-copywriting .sv-document-meta>span:first-child{color:#8bc3d8}.sv-copywriting .sv-document-meta>span:last-child{color:#bed0d9}
.sv-copy-before{display:grid;grid-template-columns:55px 1fr;gap:15px;margin-top:29px;padding-bottom:23px;border-bottom:1px solid #668093}.sv-editor-label{font-size:11px;letter-spacing:.08em;color:#b8cfda}.sv-copy-before p{font-size:14px;line-height:1.85;color:#cfdee4}
.sv-copy-after{position:relative;padding:24px 0 28px}.sv-copy-after .sv-editor-label{display:block;margin-bottom:13px;color:#8bc3d8}.service-visual .sv-copy-headline{font:500 clamp(27px,6.8cqw,43px)/1.65 var(--serif);letter-spacing:.045em}.service-visual .sv-copy-support{font:500 clamp(18px,3.6cqw,24px)/1.85 var(--serif);margin-top:12px}
.sv-copy-annotation{display:block;font-size:11px;line-height:1.8;color:#bed0d9;margin-top:23px;padding-left:15px;border-left:2px solid #8bc3d8}
.service-visual .sv-operation-steps{display:flex;list-style:none;padding:20px 0 0;border-top:1px solid #668093;gap:0;justify-content:space-between;font-size:12px;line-height:1.8}.sv-operation-steps li+li:before{content:'→';margin-right:18px;color:#8bc3d8}.sv-copywriting .sv-detail-note{border-color:#668093;color:#cfdee4}
.service-visual .sv-website{background:var(--paper);border:1px solid var(--line)}.sv-website-masthead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 24px;font-size:10px}.sv-website-masthead b{font:500 15px var(--serif);letter-spacing:.1em}
.sv-website-cover{position:relative;aspect-ratio:1.4;overflow:hidden;background:#4c5148}.sv-website-cover>img{width:100%;height:100%;object-fit:cover;object-position:58% 45%;display:block}.sv-website-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,29,27,.68),rgba(16,29,27,.12))}
.sv-website-title{position:absolute;z-index:1;inset:auto auto 25px 28px;color:white}.sv-website-title>span{font-size:11px;letter-spacing:.07em}.service-visual .sv-website-title>p{font:500 clamp(30px,7.4cqw,47px)/1.45 var(--serif);letter-spacing:.07em;margin-top:13px}
.sv-website-recruit{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:25px 24px;border-bottom:1px solid var(--line)}.service-visual .sv-website-recruit>p{font:500 clamp(16px,3.5cqw,22px)/1.7 var(--serif)}.sv-website-recruit>span{font-size:10px;line-height:1.8;text-align:right}.sv-website-recruit i{font:20px Georgia,serif;margin-left:10px}
.service-visual .sv-website-fiction{padding:12px 24px;font-size:10px;color:#627078;line-height:1.8}.sv-website-story{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:27px 24px;border-bottom:1px solid var(--line)}.service-visual .sv-website-story>p{font:500 20px/1.7 var(--serif)}.sv-website-story>span{font-size:11px;line-height:2}
.service-visual .sv-ai{padding:29px 0 0;border-top:3px solid var(--navy)}.sv-ai>.sv-title{margin-top:26px;margin-bottom:22px}.service-visual .sv-ai-input{font-size:12px;padding:15px 0;border-top:1px solid var(--line);line-height:1.9}.sv-ai-input>span{font-size:10px;display:block;color:#627078;margin-bottom:3px}
.sv-ai-column-head{display:grid;grid-template-columns:1.3fr 1fr;gap:35px;border-bottom:1px solid var(--navy);padding:10px 0;font-size:11px}.sv-ai-column-head>span:first-child{color:var(--blue)}
.service-visual .sv-ai-rows{list-style:none;padding:0}.sv-ai-rows li{display:grid;grid-template-columns:1.3fr 20px 1fr;gap:15px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}.sv-ai-rows li>div{display:grid;grid-template-columns:25px 1fr;gap:0 10px;align-items:baseline}.sv-ai-rows li>div>span{font:14px Georgia,serif;color:var(--blue)}.sv-ai-rows strong{font-size:15px;font-weight:500}.sv-ai-rows small{grid-column:2;font-size:10px;color:#627078;margin-top:3px}.sv-ai-rows i{font-style:normal;color:var(--blue)}.service-visual .sv-ai-rows li>p{font:500 clamp(15px,3.35cqw,20px)/1.65 var(--serif)}
.service-visual .sv-ai-return{font-size:12px;padding:16px 0;color:var(--blue)}.sv-ai-return>span{font-size:20px;margin-right:7px}
@container service-example (max-width:440px){.service-visual .sv-research,.service-visual .sv-copywriting{padding:24px 22px}.sv-research-heading{gap:10px}.sv-metric>span{font-size:9px;max-width:108px}.sv-metric>strong{font-size:37px}.sv-comparison th{width:47px}.sv-comparison td:last-child,.sv-comparison thead th:last-child{width:79px}.sv-takeaway{grid-template-columns:64px 1fr;gap:10px}.sv-copy-before{grid-template-columns:46px 1fr}.sv-operation-steps li+li:before{margin-right:10px}.sv-website-masthead{padding:17px 19px}.sv-website-masthead b{font-size:13px}.sv-website-masthead>span{font-size:9px}.sv-website-recruit{display:block;padding:20px}.sv-website-recruit>span{display:block;text-align:left;margin-top:7px}.sv-website-fiction{padding:12px 20px!important}.sv-website-title{left:20px;bottom:22px}.sv-website-story{grid-template-columns:1fr;gap:10px;padding:24px 20px}.sv-ai-rows li{gap:8px;grid-template-columns:1.35fr 16px 1fr}.sv-ai-rows strong{font-size:14px}.sv-ai-rows li>div{grid-template-columns:19px 1fr;gap:0 6px}.sv-ai-column-head{gap:25px;grid-template-columns:1.35fr 1fr}.sv-ai-rows small{font-size:9px}}
@container service-example (max-width:320px){.sv-research-heading{align-items:start;flex-direction:column}.service-visual .sv-metric{text-align:left;display:flex;align-items:center;gap:18px}.sv-metric>strong{margin:0}.sv-comparison{font-size:11px}.service-visual .sv-document-meta{font-size:9px}.service-visual .sv-research,.service-visual .sv-copywriting{padding:22px 18px}.sv-website-title>span{font-size:10px}.sv-ai-rows strong{font-size:12px}.sv-ai-rows small{font-size:9px}.service-visual .sv-ai-rows li>p{font-size:14px}.sv-ai-input{font-size:11px!important}}
@container service-example (max-width:440px){
 .sv-research-heading{align-items:start;flex-direction:column;gap:18px}
 .service-visual .sv-metric{text-align:left;display:flex;align-items:center;gap:20px;width:100%}
 .sv-metric>span{font-size:10px;max-width:145px}
 .sv-metric>strong{margin:0;font-size:37px;white-space:nowrap}
 .sv-comparison th{width:58px;white-space:nowrap}
 .sv-takeaway{grid-template-columns:1fr;gap:5px}
 .service-visual .sv-copy-headline{font-size:clamp(23px,6.8cqw,30px)}
}
@media print{.service-visual{break-inside:avoid;print-color-adjust:exact}.sv-copywriting{print-color-adjust:exact}}