/* ── DESIGN CONTROLS / 自訂色彩、字體、比例及動畫 ────────────── */
:root {
  --paper:#F7FAF8; --ink:#102A2A; --muted:#526763; --green:#42E3A4;
  --blue:#3975F6; --line:rgba(16,42,42,.18); --mint:#E9F4ED;
  --gradient:linear-gradient(115deg,#8EF0C9 0%,#42E3A4 45%,#3975F6 100%);
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --display:clamp(3.2rem,5.7vw,6.7rem); --body:1rem;
  --gutter:clamp(1.25rem,4vw,5rem); --section:clamp(5rem,9vw,10rem);
  --text-share:45%; --visual-share:55%; --radius:0;
  --button-height:3.5rem; --button-padding:1.45rem;
  --duration:900ms; --ease:cubic-bezier(.22,.8,.25,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:var(--body)/1.85 var(--sans); -webkit-font-smoothing:antialiased; }
::selection { background:var(--green); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
img { display:block; width:100%; height:auto; }
figure,p,h1,h2,h3 { margin:0; }
h1,h2,h3 { font-weight:400; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none!important; }
[data-label] { font:500 .65rem/1.5 var(--sans); letter-spacing:.17em; text-transform:uppercase; }
[data-button] { position:relative; min-height:var(--button-height); padding:.8rem var(--button-padding); border:1px solid var(--ink); border-radius:var(--radius); display:inline-flex; gap:2.2rem; justify-content:space-between; align-items:center; font-size:.82rem; letter-spacing:.06em; overflow:hidden; transition:background .25s,color .25s; }
[data-button] span { transition:transform .3s var(--ease); font-size:1.3rem; line-height:1; }
[data-button]:hover span { transform:translate(3px,-3px); }
[data-button="primary"] { background:var(--ink); color:var(--paper); }
[data-button="primary"]:hover { background:#23564B; }
[data-button="light"] { background:var(--paper); }
[data-button="light"]:hover { background:var(--mint); }
[data-link] { display:inline-flex; gap:1.6rem; align-items:center; font-size:.85rem; padding:.55rem 0; border-bottom:1px solid var(--ink); }
[data-link] span { transition:transform .25s; }
[data-link]:hover span { transform:translate(4px,-3px); }
#skip-link { position:fixed; left:1rem; top:-6rem; background:var(--ink); color:white; padding:.7rem 1.2rem; z-index:100; }
#skip-link:focus { top:1rem; }
/* ── NAVIGATION ─────────────────────────────────────────────── */
#site-header { position:relative; z-index:20; height:96px; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--paper); }
#brand { display:flex; align-items:center; gap:12px; line-height:1; }
#brand-mark { display:grid; place-items:center; width:33px; height:33px; border:1px solid var(--ink); border-radius:50%; font:italic 28px Georgia,serif; }
#brand strong { display:block; font-weight:500; letter-spacing:.18em; font-size:1.03rem; }
#brand small { display:block; font:9px/1.5 var(--sans); letter-spacing:.25em; margin-top:7px; }
#desktop-nav { display:flex; gap:2.3rem; align-items:center; font-size:.76rem; }
#desktop-nav a:not([data-button]):hover { text-decoration:underline; text-underline-offset:6px; }
#desktop-nav [data-button] { min-height:40px; padding:.4rem 1rem; font-size:.73rem; gap:1.6rem; }
#menu-toggle { display:none; background:none; border:1px solid var(--line); padding:.45rem .8rem; font-size:.8rem; }
#mobile-nav { position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--ink); padding:1.25rem var(--gutter) 2rem; }
#mobile-nav a { display:block; padding:.7rem 0; }
/* ── HERO / 45 : 55 ────────────────────────────────────────── */
#hero { min-height:min(820px,calc(100svh - 96px)); display:grid; grid-template-columns:var(--text-share) var(--visual-share); position:relative; isolation:isolate; border-bottom:1px solid var(--line); }
#hero-copy { padding:4rem 0 3rem var(--gutter); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; z-index:2; }
#hero-eyebrow { display:flex; gap:12px; align-items:center; margin-bottom:2.5rem; }
#hero-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:#278161; }
h1 { font:400 var(--display)/1.32 var(--serif); letter-spacing:-.055em; position:relative; margin-right:-22%; }
h1 > span { display:block; white-space:nowrap; }
h1 em { font-style:normal; color:#277C64; }
#hero-description { margin-top:2rem; max-width:340px; color:var(--muted); font-size:.86rem; line-height:2.1; padding-right:1rem; }
#hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2.15rem; }
#hero-actions [data-button] { font-size:.76rem; }
#hero-actions [data-link] { font-size:.74rem; gap:1rem; }
#hero-foot { margin-top:3.5rem; display:flex; width:100%; padding-right:2rem; justify-content:space-between; gap:1.5rem; color:var(--muted); font-size:.55rem; }
#hero-foot a { display:flex; align-items:center; gap:1rem; }
#hero-foot a span { font-size:1.1rem; }
#hero-art { position:relative; background:#EAF2EE; overflow:hidden; min-width:0; }
#hero-art > img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
#hero-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(247,250,248,.1),transparent 65%,rgba(233,242,236,.7)); }
#art-topline { position:absolute; top:2rem; left:2rem; right:var(--gutter); display:flex; justify-content:space-between; z-index:1; font-size:.58rem; }
#hero-art figcaption { position:absolute; bottom:2.5rem; left:2rem; right:var(--gutter); display:flex; justify-content:space-between; align-items:end; z-index:1; }
#hero-art figcaption strong { font:italic 2.8rem/1 Georgia,serif; font-weight:400; letter-spacing:-.05em; }
#hero-art figcaption span { font-size:.55rem; text-align:right; }
#hero-orbit-label { position:absolute; z-index:3; right:7%; top:47%; display:grid; place-items:center; width:88px; height:88px; border:1px solid rgba(16,42,42,.35); border-radius:50%; font:10px/1.65 var(--sans); letter-spacing:.13em; text-align:center; background:rgba(247,250,248,.55); backdrop-filter:blur(8px); }
/* ── INTRO ─────────────────────────────────────────────────── */
#opportunity { padding:var(--section) var(--gutter); }
#intro-heading { display:grid; grid-template-columns:28% 72%; align-items:start; }
#intro-heading > p { padding-top:.6rem; }
#intro-heading h2 { font:400 clamp(2rem,3.6vw,4.2rem)/1.5 var(--serif); letter-spacing:-.035em; }
#intro-heading h2 em { font-style:normal; color:#277C64; }
#pain-points { margin:3.5rem 0 0 28%; border-top:1px solid var(--line); }
#pain-points > div { display:grid; grid-template-columns:40px 1fr 1.2fr; gap:1rem; border-bottom:1px solid var(--line); padding:1.25rem 0; align-items:baseline; }
#pain-points span { font:italic 14px Georgia,serif; color:var(--muted); }
#pain-points h3 { font-size:.97rem; }
#pain-points p { font-size:.78rem; color:var(--muted); }
/* ── SPLIT STORIES / EACH IMAGE STICKS WITH ITS CHAPTER ────── */
#services { border-top:1px solid var(--line); }
#services-heading { padding:1.4rem var(--gutter); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
#services-heading h2 { font:500 .67rem/1.5 var(--sans); letter-spacing:.13em; }
[data-story] { display:grid; grid-template-columns:var(--text-share) var(--visual-share); min-height:112vh; border-bottom:1px solid var(--line); position:relative; }
[data-story-copy] { align-self:center; padding:5rem var(--gutter); position:relative; }
[data-story-copy] > [data-label] { display:flex; gap:1.2rem; align-items:center; color:var(--muted); }
[data-story-copy] > [data-label] span { font:italic 1.45rem Georgia,serif; color:var(--ink); }
[data-story-copy] h3 { font:400 clamp(2rem,3.7vw,4.3rem)/1.48 var(--serif); letter-spacing:-.045em; margin:2rem 0 1.4rem; }
[data-story-copy] > p:not([data-label]) { font-size:.86rem; color:var(--muted); max-width:350px; }
[data-story-copy] ul { padding:0; margin:1.8rem 0 2.3rem; list-style:none; font-size:.74rem; }
[data-story-copy] li { padding:.6rem 0; border-bottom:1px solid var(--line); display:flex; gap:1rem; }
[data-story-copy] li::before { content:"+"; color:#277C64; }
[data-story-visual] { min-width:0; padding:2rem; align-self:start; position:sticky; top:0; height:100svh; max-height:1100px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background:var(--mint); }
[data-story-visual] > img { width:100%; aspect-ratio:1; max-height:78svh; object-fit:cover; }
[data-story-visual] figcaption { display:flex; justify-content:space-between; align-items:center; padding-top:1.2rem; font-size:.6rem; letter-spacing:.13em; }
[data-story-visual] figcaption span:last-child { font:italic 1.25rem Georgia,serif; letter-spacing:0; }
#service-local { grid-template-columns:var(--visual-share) var(--text-share); }
#service-local [data-story-copy] { grid-column:2; grid-row:1; }
#service-local [data-story-visual] { grid-column:1; grid-row:1; background:#EFF1F6; }
#service-global [data-story-visual] { background:#173936; color:#E5F7EA; }
/* Progressive reveal. Content never depends on JS to become visible. */
@media (prefers-reduced-motion:no-preference) {
  [data-reveal="active"] > img { animation:image-arrive var(--duration) var(--ease) both; }
  #service-local [data-reveal="active"] > img { animation-name:image-arrive-left; }
  @keyframes image-arrive { from { opacity:.15; transform:translateX(70px) scale(1.06); clip-path:inset(0 0 0 16%); } to { opacity:1; transform:translateX(0) scale(1); clip-path:inset(0); } }
  @keyframes image-arrive-left { from { opacity:.15; transform:translateX(-70px) scale(1.06); clip-path:inset(0 16% 0 0); } to { opacity:1; transform:translateX(0) scale(1); clip-path:inset(0); } }
}
/* ── PROCESS ───────────────────────────────────────────────── */
#process { background:var(--ink); color:var(--paper); padding:var(--section) var(--gutter); }
#process-header { display:flex; justify-content:space-between; align-items:start; gap:2rem; }
#process-header > p { color:#A3C3B6; }
#process-header h2 { font:400 clamp(2rem,3.4vw,4rem)/1.5 var(--serif); width:64%; }
#process ol { margin:4.5rem 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); }
#process li { border-top:1px solid #56746A; padding:1.8rem 2rem 0 0; }
#process li:not(:first-child) { padding-left:2rem; border-left:1px solid #36544C; }
#process li > span { font:italic 2rem Georgia,serif; color:var(--green); }
#process h3 { font:400 1.35rem var(--serif); margin:2.5rem 0 1rem; }
#process h3 small { display:block; font:10px var(--sans); letter-spacing:.14em; color:#A3C3B6; margin-top:.8rem; }
#process li p { font-size:.8rem; color:#C1D0CA; max-width:240px; }
/* ── EVIDENCE / EDITABLE PLACEHOLDERS ───────────────────────── */
#evidence { padding:var(--section) var(--gutter); }
#evidence-header { display:flex; justify-content:space-between; align-items:end; gap:2rem; }
#evidence-header h2 { font:400 clamp(2rem,3.3vw,3.8rem)/1.4 var(--serif); margin-top:1.5rem; }
#evidence-header > p { max-width:300px; font-size:.81rem; color:var(--muted); }
#case-slot { margin-top:3rem; padding:2.5rem 0; border-block:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; }
#case-slot [data-label] { color:var(--muted); }
#case-slot h3 { font:400 1.4rem var(--serif); margin:.8rem 0; }
#case-slot p:not([data-label]) { font-size:.78rem; color:var(--muted); }
#case-slot strong { font-size:.6rem; font-weight:400; border:1px solid var(--line); padding:.2rem .5rem; margin-left:.6rem; vertical-align:middle; white-space:nowrap; }
/* ── FAQ ───────────────────────────────────────────────────── */
#faq { display:grid; grid-template-columns:36% 64%; padding:0 var(--gutter) var(--section); gap:0; }
#faq-header h2 { font:400 clamp(2rem,3.3vw,3.8rem)/1.45 var(--serif); margin-top:1.5rem; }
#faq-header p:last-child { color:var(--muted); font-size:.8rem; margin-top:1rem; }
#faq-list { border-top:1px solid var(--line); }
#faq-list details { border-bottom:1px solid var(--line); }
#faq-list summary { cursor:pointer; list-style:none; font-size:.94rem; padding:1.5rem 2rem 1.5rem 0; position:relative; }
#faq-list summary::-webkit-details-marker { display:none; }
#faq-list summary::after { content:"+"; position:absolute; right:0; font-size:1.3rem; font-weight:300; top:1.25rem; }
#faq-list details[open] summary::after { content:"−"; }
#faq-list details p { color:var(--muted); font-size:.84rem; padding:0 2rem 1.5rem 0; }
/* ── CONTACT ───────────────────────────────────────────────── */
#contact { padding:var(--section) var(--gutter); position:relative; background:#E6F2EB; isolation:isolate; overflow:hidden; }
#contact::before { content:""; width:480px; height:480px; position:absolute; left:-240px; bottom:-280px; border-radius:50%; background:var(--gradient); filter:blur(90px); opacity:.45; z-index:-1; }
#contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:8%; }
#contact-copy h2 { font:400 clamp(2rem,3.65vw,4.3rem)/1.55 var(--serif); letter-spacing:-.04em; margin:2rem 0 1.4rem; }
#contact-copy > p:not([data-label]) { max-width:350px; font-size:.84rem; color:var(--muted); }
#direct-contact { margin-top:2.5rem; }
#direct-contact a { display:block; width:fit-content; border-bottom:1px solid var(--line); margin-top:.6rem; font-size:.9rem; }
#inquiry { min-width:0; }
#inquiry > p { font-size:.76rem; color:var(--muted); margin-bottom:1rem; }
#inquiry label { display:block; font-size:.75rem; margin:1.2rem 0 .45rem; }
#inquiry label small { color:var(--muted); margin-left:.5rem; }
#inquiry input,#inquiry select,#inquiry textarea { background:rgba(247,250,248,.6); border:1px solid #A3B9AD; border-radius:0; color:var(--ink); padding:.8rem .9rem; width:100%; font-size:.84rem; }
#inquiry textarea { resize:vertical; min-height:120px; }
#inquiry input::placeholder,#inquiry textarea::placeholder { color:#667B73; }
#inquiry [data-button] { width:100%; margin-top:1.5rem; }
#form-note { font-size:.72rem!important; line-height:1.8; margin:1rem 0!important; }
#form-status { margin-top:1rem; font-size:.82rem; }
#mail-result { margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem; }
#mail-result p { font-size:.78rem; }
#mail-result a { margin-top:1rem; }
#mail-result button { padding:.6rem .8rem; background:transparent; border:1px solid var(--ink); margin:.8rem 0 0 .5rem; font-size:.78rem; }
#mail-preview { white-space:pre-wrap; word-break:break-word; font: .75rem/1.8 var(--sans); background:rgba(247,250,248,.65); padding:1rem; max-height:220px; overflow:auto; }
#site-footer { padding:2rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); font-size:.65rem; }
#site-footer nav { display:flex; gap:1.5rem; }
#site-footer a { text-decoration:underline; text-underline-offset:3px; }
@media (min-width:1600px) { #hero { min-height:850px; } }
@media (max-width:1100px) {
  #desktop-nav { gap:1.4rem; }
  #hero-actions { gap:.8rem; }
  [data-story-copy] { padding-inline:2rem; }
  #hero-foot { margin-top:2rem; }
  #hero-foot > span { display:none; }
  #process li:not(:first-child) { padding-left:1.25rem; }
}
@media (max-width:760px) {
  :root { --display:clamp(2.2rem,9.4vw,4.5rem); --gutter:1.35rem; --section:4.75rem; }
  html { scroll-padding-top:1.5rem; }
  #site-header { height:76px; }
  #brand strong { font-size:.9rem; }
  #brand small { font-size:8px; }
  #desktop-nav { display:none; }
  #menu-toggle { display:block; }
  #hero { grid-template-columns:1fr; min-height:auto; }
  #hero-copy { padding:3.4rem var(--gutter) 2.25rem; }
  #hero-eyebrow { margin-bottom:1.8rem; font-size:.58rem; }
  h1 { margin-right:0; letter-spacing:-.045em; }
  #hero-description { max-width:400px; margin-top:1.5rem; }
  #hero-actions { margin-top:1.6rem; gap:1.2rem; }
  #hero-actions [data-button] { padding-inline:1rem; gap:1.5rem; }
  #hero-foot { margin-top:2rem; }
  #hero-art { min-height:0; width:100%; aspect-ratio:1; }
  #art-topline { left:var(--gutter); top:1.4rem; }
  #hero-art figcaption { left:var(--gutter); bottom:1.5rem; }
  #hero-art figcaption strong { font-size:clamp(1.2rem,5.3vw,2.5rem); }
  #hero-art figcaption span { font-size:.45rem; }
  #art-topline span:last-child { display:none; }
  #hero-orbit-label { width:74px; height:74px; font-size:8px; }
  #intro-heading { grid-template-columns:1fr; gap:1.5rem; }
  #intro-heading h2 { font-size:clamp(1.8rem,6.5vw,3rem); }
  #pain-points { margin:2rem 0 0; }
  #pain-points > div { grid-template-columns:26px 1fr; gap:.35rem .6rem; padding:1.2rem 0; }
  #pain-points p { grid-column:2; }
  #services-heading { padding:1.2rem var(--gutter); }
  #services-heading > span { font-size:.5rem; }
  [data-story],#service-local { grid-template-columns:1fr; min-height:auto; }
  [data-story-copy] { padding:3rem var(--gutter); }
  [data-story-copy] h3 { font-size:2.5rem; margin-top:1.5rem; }
  [data-story-copy] > p:not([data-label]) { max-width:480px; }
  [data-story-visual] { position:relative; top:auto; padding:var(--gutter); height:auto; }
  [data-story-visual] > img { max-height:none; }
  #service-local [data-story-copy],#service-local [data-story-visual] { grid-column:auto; grid-row:auto; }
  #process-header { display:block; }
  #process-header h2 { width:auto; font-size:2.15rem; margin-top:1.5rem; }
  #process ol { grid-template-columns:1fr 1fr; margin-top:2.75rem; row-gap:2rem; }
  #process li { padding:1.4rem 1rem 0 0; }
  #process li:nth-child(3) { border-left:0; padding-left:0; }
  #process h3 { margin-top:1.75rem; }
  #evidence-header { display:block; }
  #evidence-header > p { margin-top:1.3rem; max-width:100%; }
  #case-slot { grid-template-columns:1fr; gap:1.5rem; padding-block:1.75rem; }
  #case-slot > div:not(:first-child) { border-top:1px solid var(--line); padding-top:1.5rem; }
  #faq { grid-template-columns:1fr; gap:2rem; }
  #faq-header h2 { margin-top:1rem; }
  #contact-grid { grid-template-columns:1fr; gap:3rem; }
  #contact-copy h2 { font-size:2.35rem; }
  #site-footer { display:block; line-height:2; }
  #site-footer nav { margin-top:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
  
/* Full-site design layer. Class-free selectors; edit shared variables in base.css. */
#jc-contact-form { min-width:0; width:100%; }
#jc-contact-form > p { font-size:.8rem; color:var(--muted); margin:1rem 0; }
#jc-contact-form label { display:block; font-size:.8rem; margin:1.2rem 0 .5rem; }
#jc-contact-form label small { color:var(--muted); margin-left:.5rem; }
#jc-contact-form input,#jc-contact-form select,#jc-contact-form textarea { width:100%; background:rgba(247,250,248,.7); border:1px solid #A3B9AD; border-radius:0; color:var(--ink); padding:.85rem; font:inherit; font-size:.86rem; }
#jc-contact-form textarea { resize:vertical; min-height:130px; }
#jc-contact-form [data-button] { width:100%; margin-top:1rem; }
#jc-contact-form a { text-decoration:underline; text-underline-offset:3px; }
#jc-contact-form [role="status"] { padding:.7rem 0; }
#jc-contact-form[data-state="error"] [role="status"],#jc-contact-form[data-state="unknown"] [role="status"] { color:#8C302A; }
#jc-contact-retry { border:1px solid var(--ink); background:transparent; padding:.65rem 1rem; }
#wechat-dialog { border:1px solid var(--line); padding:2rem; width:min(440px,90vw); color:var(--ink); background:var(--paper); text-align:center; }
#wechat-dialog::backdrop { background:rgba(16,42,42,.72); backdrop-filter:blur(6px); }
#wechat-dialog h2 { font:400 2rem/1.5 var(--serif); margin:1rem 0; }
#wechat-dialog img { max-width:320px; margin:1rem auto; }
#wechat-close { display:block; margin:0 0 1.5rem auto; border:0; padding:.4rem; background:transparent; color:var(--ink); }
[data-archive-entry] { padding:2rem 0; border-bottom:1px solid var(--line); }
#article-body [data-archive-entry] h2 { margin:1rem 0; }
[data-pagination] { display:flex; flex-wrap:wrap; gap:.6rem; margin:3rem 0; align-items:center; }
[data-pagination] a,[data-pagination] span { padding:.4rem .8rem; border:1px solid var(--line); font-size:.85rem; }
[data-pagination] [aria-current] { color:var(--paper); background:var(--ink); }
[data-site-search] { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem; margin-bottom:3rem; }
[data-site-search] label { grid-column:1/-1; }
#article-body [data-site-search] button { margin:0; }
#site-header { gap:1rem; }
#desktop-nav { gap:1.6rem; }
#site-footer { display:block; padding:4rem var(--gutter) 1.5rem; background:var(--ink); color:var(--paper); }
#footer-top { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-bottom:3rem; border-bottom:1px solid #36544C; }
#footer-top > p { font:400 clamp(1.6rem,2.5vw,2.8rem)/1.5 var(--serif); }
#footer-top [data-link] { border-color:#A3C3B6; text-decoration:none; }
#footer-directory { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding:3rem 0; }
#footer-directory nav { display:block; }
#footer-directory [data-label] { color:#A3C3B6; margin-bottom:1rem; }
#footer-directory a { display:block; font-size:.8rem; margin:.5rem 0; text-decoration:none; overflow-wrap:anywhere; }
#footer-directory a:hover { text-decoration:underline; }
#footer-bottom { border-top:1px solid #36544C; padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; color:#BCD0C5; }
#footer-bottom nav { margin:0; font-size:.65rem; }
#page-hero { display:grid; grid-template-columns:var(--text-share) var(--visual-share); border-bottom:1px solid var(--line); }
#page-intro { padding:3rem var(--gutter) 4rem; align-self:center; min-width:0; }
#breadcrumb { display:flex; gap:.7rem; font-size:.63rem; color:var(--muted); margin-bottom:3rem; }
#breadcrumb a { border-bottom:1px solid var(--line); }
#page-title { font:400 clamp(2.25rem,3.35vw,4.5rem)/1.55 var(--serif); letter-spacing:-.055em; margin:1.7rem 0; overflow-wrap:anywhere; text-wrap:balance; }
#page-description { font-size:.9rem; color:var(--muted); max-width:38rem; margin:0 0 2rem; }
#page-visual { margin:0; position:relative; overflow:hidden; min-width:0; background:var(--mint); }
#page-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#page-visual figcaption { position:absolute; bottom:1.75rem; left:2rem; z-index:1; padding:.4rem .6rem; background:rgba(247,250,248,.82); }
#page-hero[data-editorial="true"] { display:block; background:linear-gradient(115deg,#F7FAF8 55%,#E9F4ED); }
#page-hero[data-editorial="true"] #page-intro { max-width:1100px; padding-bottom:4rem; }
#page-hero[data-editorial="true"] #page-title { max-width:1000px; font-size:clamp(2.3rem,4.3vw,4.7rem); }
#reading-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:6%; padding:5rem var(--gutter) 6rem; }
#page-aside { position:sticky; top:2rem; align-self:start; max-height:85svh; overflow:auto; padding-right:1.6rem; }
#page-aside > [data-label] { padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
#page-aside > a { display:block; font-size:.75rem; padding:.8rem 0; line-height:1.7; border-bottom:1px solid var(--line); }
#page-aside a[data-link] { font-size:.8rem; margin-top:1rem; }
#article-body { min-width:0; max-width:900px; font-size:1rem; line-height:1.95; overflow-wrap:anywhere; }
#article-body h2 { font:400 clamp(1.65rem,2.4vw,2.7rem)/1.5 var(--serif); letter-spacing:-.035em; margin:3.5rem 0 1.35rem; }
#article-body h3 { font:400 clamp(1.3rem,1.6vw,1.7rem)/1.6 var(--serif); margin:2rem 0 1rem; }
#article-body h4,#article-body h5,#article-body h6 { font-size:1rem; margin:1.5rem 0 .8rem; }
#article-body p { margin:.85rem 0; color:#38554B; }
#article-body ul,#article-body ol { padding-left:1.5rem; margin:1rem 0 2rem; }
#article-body li { padding:.3rem 0; }
#article-body a { text-decoration:underline; text-decoration-color:#87A797; text-underline-offset:4px; overflow-wrap:anywhere; }
#article-body a:hover { color:#207454; }
#article-body > section { padding-bottom:2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
#article-body section section { margin:1.5rem 0; }
#article-body img { max-width:100%; width:auto; height:auto; max-height:640px; object-fit:contain; margin:1.5rem auto; }
#article-body iframe { max-width:100%; border:0; }
#article-body table { width:100%; border-collapse:collapse; display:block; overflow:auto; margin:2rem 0; font-size:.84rem; }
#article-body th,#article-body td { padding:.8rem 1rem; border:1px solid var(--line); text-align:left; }
#article-body th { background:var(--mint); }
#article-body blockquote { margin:2rem 0; padding:1rem 2rem; border-left:2px solid #2E9A75; background:var(--mint); }
#article-body details { border-block:1px solid var(--line); padding:1rem 0; }
#article-body summary { cursor:pointer; font-size:1.1rem; }
#article-body [data-anchor] { display:block; scroll-margin-top:2rem; }
#article-body [data-form-preview] { margin:2rem 0; padding:1.5rem; background:var(--mint); }
#article-body [data-form-preview]>p { font-size:.8rem; }
#article-body fieldset { border:0; padding:0; }
#article-body form label { display:block; margin:1rem 0 .5rem; font-size:.85rem; }
#article-body input,#article-body select,#article-body textarea { width:100%; background:var(--paper); color:var(--ink); border:1px solid #9BB4A6; padding:.8rem; font:inherit; }
#article-body input:disabled,#article-body select:disabled,#article-body textarea:disabled { opacity:1; }
#article-body form button { margin-top:1.5rem; padding:1rem 2rem; border:0; background:var(--ink); color:white; }
#page-cta { padding:5rem var(--gutter); background:var(--mint); display:flex; gap:2rem; align-items:center; justify-content:space-between; }
#page-cta h2 { font:400 clamp(1.8rem,3vw,3rem)/1.5 var(--serif); }
#contact-copy [data-button] { margin-top:2rem; }
@media(max-width:1000px) { #desktop-nav { gap:1rem; } #reading-layout { grid-template-columns:200px minmax(0,1fr); gap:4%; } #page-aside { padding-right:.5rem; } }
@media(max-width:760px) {
  #page-hero { grid-template-columns:1fr; }
  #page-intro { padding:2rem var(--gutter) 3rem; }
  #breadcrumb { margin-bottom:2rem; }
  #page-title { font-size:clamp(2rem,7.6vw,3rem); }
  #page-description { font-size:.88rem; }
  #page-visual { width:100%; aspect-ratio:1.2; }
  #page-hero[data-editorial="true"] #page-intro { padding-bottom:3rem; }
  #page-hero[data-editorial="true"] #page-title { font-size:clamp(2rem,7.6vw,3rem); }
  #reading-layout { display:block; padding:2rem var(--gutter) 4rem; }
  #page-aside { position:relative; top:auto; max-height:240px; padding:1rem; margin-bottom:3rem; border:1px solid var(--line); }
  #page-aside > [data-label] { padding-bottom:1rem; }
  #article-body { font-size:.95rem; }
  #article-body h2 { margin-top:2.5rem; }
  #page-cta { display:block; padding:3rem var(--gutter); }
  #page-cta h2 { margin:1.5rem 0; }
  #footer-top { display:block; }
  #footer-top > p { margin:1.5rem 0; }
  #footer-directory { grid-template-columns:1fr 1fr; gap:2rem 1rem; }
  #footer-directory > div { grid-column:1/-1; }
  #footer-bottom { display:block; }
  #footer-bottom nav { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; }
}