:root {
  --ink: #172c2a;
  --muted: #5d706d;
  --paper: #f7f1e8;
  --surface: #fffdf8;
  --tint: #e7efea;
  --line: #d1ddd6;
  --brand: #1f5b52;
  --brand-strong: #16443e;
  --accent: #e4a15d;
  --accent-hot: #c96e52;
  --accent-text: #984931;
  --accent-soft: #f2dfc7;
  --dark: #143936;
  --dark-soft: #1c4b46;
  --radius: 14px;
  --radius-large: 28px;
  --space-section: clamp(4.5rem, 8vw, 7.5rem);
  --content-width: 1180px;
  --shadow: 0 1.25rem 2.75rem rgb(20 57 54 / .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .7rem 1rem; color: var(--paper); background: var(--dark); }
.skip-link:focus { top: 1rem; }
.site-shell { width: min(var(--content-width), calc(100% - 3rem)); margin: 0 auto; }
.site-header { padding: 1.4rem 0 1.15rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--dark); font-weight: 900; letter-spacing: .04em; text-decoration: none; }
.brand::before { width: .75rem; height: .75rem; content: ""; background: var(--accent-hot); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.brand span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .18em; }
.site-nav { margin-top: 1rem; }
.section { padding: var(--space-section) 0; }
.section--tint { padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem); background: var(--tint); border-radius: var(--radius-large); box-shadow: inset 0 0 0 1px rgb(31 91 82 / .08); }
.section--dark { color: var(--paper); padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem); background: var(--dark); border-radius: var(--radius-large); }
.eyebrow, .card-kicker { margin: 0 0 .7rem; color: var(--accent-text); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.1; text-wrap: balance; }
h1 { max-width: 11ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 5vw, 5.4rem); letter-spacing: -.055em; }
h2 { max-width: 18ch; margin-bottom: 1.5rem; font-size: clamp(2.2rem, 4vw, 4.2rem); letter-spacing: -.04em; }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.hero { padding: clamp(3rem, 8vw, 7rem) 0; }
.hero-content { max-width: 42rem; }
.hero-lead { max-width: 34rem; color: var(--muted); font-size: 1.1rem; }
.hero-art { margin: 2rem 0 0; }
.hero-art img { width: 100%; border-radius: var(--radius); }
.hero-art figcaption { margin-top: .75rem; color: var(--muted); font-size: .85rem; }
.about-media { position: relative; margin: 0; }
.about-media img { width: 100%; border-radius: 0 var(--radius-large) 0 var(--radius-large); }
.floating-badge { display: inline-block; padding: .75rem 1rem; color: var(--dark); background: var(--accent); border-left: 4px solid var(--accent-hot); font-size: .76rem; font-weight: 900; line-height: 1.25; }
.floating-badge small { letter-spacing: .15em; }
.about-copy { margin-top: 2rem; }
.about-copy p, .section-heading > p:not(.eyebrow) { color: var(--muted); }
.service-card, .work-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 .5rem 1.5rem rgb(20 57 54 / .06); }
.service-card img, .work-card img { width: 100%; object-fit: cover; }
.card-body, .work-card-content { padding: 1.5rem; }
.service-card p, .work-card p { color: var(--muted); }
.work-card-content p:last-child { margin-bottom: 0; }
.process-list { padding: 0; list-style: none; }
.process-list li { display: flex; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid rgb(255 250 242 / .25); }
.process-list span { color: var(--accent); font-weight: 900; }
.process-list h3 { margin-bottom: .35rem; }
.process-list p { margin-bottom: 0; color: #d8e7e0; }
.contact-card { padding: clamp(1.75rem, 5vw, 4.5rem); background: linear-gradient(135deg, var(--accent-soft), #f9ead5); border-radius: var(--radius-large); }
.contact-card p:not(.eyebrow) { max-width: 34rem; color: var(--muted); }
.testimonial { margin: 2rem 0 0; padding-left: 1.25rem; color: var(--muted); border-left: 3px solid var(--accent); font-size: 1.1rem; }
.testimonial cite { display: block; margin-top: .75rem; color: var(--ink); font-size: .85rem; font-style: normal; }
.site-footer { padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer strong { color: var(--ink); }
.site-footer a { color: var(--brand); }
.back-to-top { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 1rem 0 3rem; color: var(--paper); background: var(--brand); border-radius: 50%; text-decoration: none; }

/* TASK-02：先觀察 HTML 能否讀懂，再依序建立 Hero、Flex、Grid 與元件樣式。 */
.site-nav a { margin-right: .75rem; }
.service-grid > article, .work-grid > article { margin-top: 1rem; }
.hero-art img, .about-media img { width: 100%; }