/* Gryph Studio
   Design read: small-business studio site for non-technical owners, friendly and confident, work-first.
   Built with design-taste-frontend (layout variety, one accent, no serif/beige defaults) and ui-ux-pro-max
   (Outfit + Rubik pairing, Phosphor icons, portfolio-grid and before/after patterns).

   Rules that hold everywhere:
   - One accent colour: light blue.
   - Corners: tiles and panels 24px, images 16px, buttons fully round, form fields 12px.
   - No section layout is used twice on the same page. Space separates things, not hairlines. */

:root {
  /* Light blue, chosen 2026-10-17 */
  --bg: #EEF1F4; --surface: #FFFFFF; --ink: #121A23; --ink-2: #4B5664;
  --accent: #A8C8E6; --on-accent: #121A23; --accent-text: #2D5F8E;
  --tile: #142130; --on-tile: #F0F5FA; --on-tile-2: #AEBCCB; --accent-on-tile: #A8C8E6;
  --tint: #DCE8F4; --focus: #2D5F8E;
  --line: color-mix(in srgb, #121A23 12%, transparent); --line-strong: color-mix(in srgb, #121A23 42%, transparent);
}
:root {
  --display: 'Outfit', 'Gryph TC', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --body: 'Rubik', 'Gryph TC', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --pad: clamp(16px, 4.5vw, 56px);
  --max: 1200px;
  --gutter: max(var(--pad), calc((100vw - var(--max)) / 2));
  --space: clamp(64px, 8vw, 104px);
  --overlap: clamp(90px, 10vw, 150px);   /* how far an element reaches into the next band */
  --bar-h: 72px;
  --r-tile: 24px;
  --r-img: 16px;
  --r-field: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); transition: background-color .3s, color .3s; }
html:lang(zh-TW) body { line-height: 1.8; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
html:lang(zh-TW) h1, html:lang(zh-TW) h2, html:lang(zh-TW) h3 { letter-spacing: 0.02em; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.375rem, 4.8vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ic { width: 1em; height: 1em; flex: none; }

html[data-lang="en"] [data-l="zh"], html[data-lang="zh"] [data-l="en"] { display: none !important; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent);
  font: 600 1rem/1 var(--display); letter-spacing: -0.01em;
  border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn-small { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
/* The top-bar button is an outline that fills with the accent on hover, so it doesn't read as another nav tab */
.bar .btn-small { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: transform .2s var(--ease), background-color .25s var(--ease); }
.bar .btn-small:hover, .bar .btn-small[aria-current="page"] { background: var(--accent); filter: none; }

/* Hover border gradient: ported to plain CSS from Aceternity UI's "Hover Border Gradient" (21st.dev).
   A highlight travels slowly round the edge of the main buttons; on hover the whole edge lights up.
   The small top-bar button stays plain so only one ring moves on screen at a time. */
@property --hbg-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hbg-base { syntax: '<color>'; inherits: true; initial-value: transparent; }
.btn:not(.btn-small) {
  --hbg-hi: var(--accent-text);
  --hbg-base: color-mix(in srgb, var(--accent) 45%, var(--bg));
  border: 2px solid transparent;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    conic-gradient(from var(--hbg-a), var(--hbg-base) 0deg 250deg, var(--hbg-hi) 300deg, var(--hbg-base) 350deg) border-box;
  transition: transform .2s var(--ease), filter .2s, --hbg-base .4s var(--ease);
}
.btn:not(.btn-small):hover, .btn:not(.btn-small):focus-visible { --hbg-base: var(--hbg-hi); }
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn-small) { animation: hbg-spin 4s linear infinite; }
}
@keyframes hbg-spin { to { --hbg-a: 360deg; } }

/* Glowing effect: ported to plain CSS/JS from Aceternity UI's "Glowing Effect" (21st.dev).
   An accent arc on the edge of a work screenshot follows the pointer when it comes near (script.js sets --glow-a). */
.glow { position: relative; display: block; border-radius: var(--r-img); }
.glow::after {
  content: ""; position: absolute; inset: -3px; border-radius: calc(var(--r-img) + 3px); pointer-events: none;
  padding: 3px; opacity: var(--glow-on, 0); transition: opacity .3s var(--ease);
  background: conic-gradient(from calc(var(--glow-a, 0deg) - 70deg), transparent 0deg, var(--accent) 25deg, var(--accent-text) 55deg 85deg, var(--accent) 115deg, transparent 140deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: reduce) { .glow::after { transition: none; } }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font: 600 1rem/1.3 var(--display); color: var(--accent-text); text-decoration: none;
}
.text-link .ic { transition: transform .2s var(--ease); }
.text-link:hover .ic { transform: translateX(3px); }
.text-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--bar-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.brand { font: 700 1.25rem/1 var(--display); letter-spacing: -0.03em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar-nav { display: flex; gap: 2px; margin-left: auto; }
.bar-nav a {
  font: 500 .9375rem/1 var(--body); text-decoration: none; color: var(--ink-2);
  padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.bar-nav a:hover { color: var(--ink); background: var(--surface); }
.bar-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); font-weight: 600; }
.bar-end { display: flex; align-items: center; gap: 8px; }
.lang { background: none; border: 0; color: var(--ink-2); cursor: pointer; font: 500 .9375rem/1 var(--body); min-height: 44px; padding: 0 12px; border-radius: 999px; }
.lang:hover { color: var(--ink); background: var(--surface); }
.lang [lang="zh-TW"] { font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }

/* ---------- Home 1: split hero ---------- */
.hero { padding: clamp(32px, 5vw, 72px) var(--gutter) var(--space); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-lede { font-size: 1.25rem; color: var(--ink-2); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.hero-collage { position: relative; aspect-ratio: 5 / 4; }
.collage-desk { position: absolute; right: 0; top: 4%; width: 90%; border-radius: var(--r-img); box-shadow: 0 30px 60px -28px rgba(17, 19, 24, .45); }
.collage-phone { position: absolute; left: 0; bottom: 0; width: 30%; border-radius: 20px; border: 5px solid var(--ink); box-shadow: 0 24px 40px -20px rgba(17, 19, 24, .5); }
@media (prefers-reduced-motion: no-preference) {
  /* One orchestrated moment: the hero arrives in sequence on first load */
  .hero-copy > *, .collage-desk, .collage-phone { animation: rise .8s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .collage-desk { animation-delay: .12s; }
  .collage-phone { animation-delay: .28s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Home 3: work, one compact row per project ---------- */
.project-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.project-row + .project-row { margin-top: clamp(48px, 6vw, 80px); }
.pr-media { position: relative; display: block; padding: 0 11% 7% 0; }
.pr-desk { border-radius: var(--r-img); box-shadow: 0 30px 60px -32px rgba(17, 19, 24, .5); }
.pr-media .glow { transition: transform .5s var(--ease); }
.pr-phone { position: absolute; right: 0; bottom: 0; width: 23%; border-radius: 16px; border: 4px solid var(--ink); box-shadow: 0 20px 40px -20px rgba(17, 19, 24, .55); transition: transform .5s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-row:hover .pr-media .glow { transform: translateY(-4px); }
  .project-row:hover .pr-phone { transform: translateY(-8px); }
}
.pr-text { display: grid; gap: 12px; justify-items: start; }
.pr-tag { font: 500 .9375rem/1 var(--body); color: var(--accent-text); }
.pr-text h3 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.035em; }
.pr-line { font-size: 1.125rem; color: var(--ink-2); max-width: 32ch; }
.pr-text .project-links { margin-top: 6px; }

/* Two projects side by side; a third and fourth wrap into a 2 x 2 grid */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 56px); }
.work-grid .project-row { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.work-grid .project-row + .project-row { margin-top: 0; }
.work-grid .pr-media { padding: 0 9% 6% 0; }
.work-grid .pr-phone { width: 20%; border-width: 3px; border-radius: 12px; }
.work-grid .pr-text { gap: 10px; }
.work-grid .pr-text h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); letter-spacing: -0.03em; }
.work-grid .pr-line { font-size: 1rem; max-width: 42ch; }
@media (max-width: 760px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Home: work as an index. Names on the left, one large screenshot on the right; hovering or focusing a name
   wipes its screenshot in (from the right going down the list, from the left going back up) and opens its line.
   Hand port of "Index List Image Gallery" by kedhareswer on 21st.dev. */
.work-index { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.wi-list { list-style: none; margin: 0; padding: 0; }
.wi-list li + li { border-top: 1px solid var(--line); }
.wi-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-areas: "num name" ". more"; column-gap: 8px; align-items: baseline; padding: clamp(18px, 2.2vw, 28px) 0; text-decoration: none; color: var(--ink-2); transition: color .35s var(--ease), padding .45s var(--ease); }
.wi-row[data-on] { color: var(--ink); }
.wi-num { grid-area: num; font: 500 .875rem/1 var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wi-name { grid-area: name; display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(1.625rem, 2.9vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.03em; }
.wi-name .ic { font-size: .7em; color: var(--accent-text); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--ease); }
.wi-row[data-on] .wi-name .ic { opacity: 1; transform: none; }
.wi-more { grid-area: more; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.wi-row[data-on] .wi-more { grid-template-rows: 1fr; }
.wi-more > span { min-height: 0; overflow: hidden; display: grid; gap: 6px; }
.wi-line { padding-top: 12px; color: var(--ink-2); max-width: 44ch; }
.wi-type { font: 500 .9375rem/1.3 var(--body); color: var(--accent-text); }
.wi-shot { display: none; grid-area: shot; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-img); }
.wi-pane { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--tint); box-shadow: 0 30px 60px -32px rgba(17, 19, 24, .5); }
.wi-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; transform: scale(1.06); }
.wi-pane img[data-l="on"] { visibility: visible; z-index: 2; clip-path: inset(0); transform: none; transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), transform 1.3s var(--ease); }
.wi-pane img[data-l="was"] { visibility: visible; z-index: 1; transform: none; }
.wi-pane img[data-l="after"] { clip-path: inset(0 0 0 100%); }
.wi-pane img[data-l="before"] { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: no-preference) { .wi-row[data-on] { padding-left: 12px; } }
@media (prefers-reduced-motion: reduce) { .wi-row, .wi-more, .wi-name .ic, .wi-pane img { transition: none !important; } }
/* Touch screens and phones: no hover to drive the frame, so each project carries its own screenshot, fully open */
@media (hover: none), (max-width: 760px) {
  .wi-pane { display: none; }
  .wi-shot { display: block; }
  .wi-row, .wi-row[data-on] { color: var(--ink); padding-left: 0; }
  .wi-more { grid-template-rows: 1fr; }
  .wi-name .ic { opacity: 1; transform: none; }
  .work-index { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) and (min-width: 761px) {
  .wi-row { grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr); grid-template-areas: "shot num name" "shot . more" "shot . ."; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 8px; }
  .wi-shot { margin-right: clamp(20px, 3vw, 40px); }
  .wi-num { padding-top: .9em; }
}
@media (max-width: 760px) {
  .wi-row { grid-template-areas: "shot shot" "num name" ". more"; padding: 28px 0; }
  .wi-shot { margin-bottom: 18px; }
  .wi-name { font-size: 1.625rem; }
  .wi-line { padding-top: 8px; font-size: .9375rem; }
  .wi-list li:first-child .wi-row { padding-top: 0; }
}

/* Gallery (case-study pages) */
.work { padding: var(--space) var(--gutter) 0; }
.work > h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.project + .project { margin-top: var(--space); }
.project-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 28px; align-items: baseline; margin-bottom: 20px; }
.project-head h3 { font-size: 1.5rem; }
.project-head p { color: var(--ink-2); max-width: 52ch; }
.project-links { display: flex; gap: 0 20px; flex-wrap: wrap; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); grid-auto-flow: dense; }
.gallery li { display: grid; gap: 8px; align-content: start; }
.gallery .wide { grid-column: span 4; }
.gallery .tall { grid-column: span 2; }
.gallery .half { grid-column: span 3; }
.gallery .full { grid-column: 1 / -1; }
.gallery button { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 16 / 10; background: #16120E; border-radius: var(--r-img); overflow: hidden; }
.gallery .tall button { aspect-ratio: 387 / 496; }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, top); transition: transform .6s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gallery button:hover img { transform: scale(1.03); } }
.gallery p { font-size: .875rem; color: var(--ink-2); }
.work-next { margin-top: 24px; color: var(--ink-2); }

.lightbox { width: min(1200px, 94vw); max-height: 94vh; padding: 16px; border: 0; border-radius: var(--r-tile); background: var(--surface); color: var(--ink); }
.lightbox::backdrop { background: rgba(12, 13, 15, .8); }
.lightbox img { width: 100%; max-height: calc(94vh - 120px); object-fit: contain; background: #16120E; border-radius: var(--r-img); }
.lightbox-caption { margin-top: 12px; color: var(--ink-2); }
.lightbox-controls { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.lightbox-controls button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 .9375rem/1 var(--body); cursor: pointer; }
.lightbox-controls button:hover { background: var(--tint); }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] { animation: rise .3s var(--ease); } }

/* ---------- Steps: one row of four, no boxes ---------- */
.steps-row { padding: var(--space) var(--gutter) 0; }
.steps-row > h2 { margin-bottom: 36px; }
.steps-row ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: s; position: relative; }
.steps-row li:not(:last-child)::after { content: ""; position: absolute; left: 64px; right: -24px; top: 28px; height: 2px; background: var(--line); }
.steps-row li { position: relative; display: grid; gap: 6px; align-content: start; }
.steps-row li > .ic { box-sizing: content-box; font-size: 26px; padding: 15px; border-radius: 50%; background: var(--bg); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--line); margin-bottom: 12px; }
.steps-row strong { font: 600 1.1875rem/1.3 var(--display); letter-spacing: -0.01em; }
.steps-row li > span { color: var(--ink-2); font-size: 1rem; }

/* ---------- Closing band ---------- */
.cta {
  padding: clamp(40px, 6vw, 72px); border-radius: var(--r-tile);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: center;
}
.cta p { grid-column: 1; }
.cta .btn { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- Websites: stacked hero ---------- */
.stack-hero { padding: clamp(32px, 5vw, 72px) var(--gutter) 0; display: grid; gap: 20px; }
.stack-hero h1 { max-width: 14em; }
.lede { font-size: 1.25rem; color: var(--ink-2); max-width: 44ch; }
.stack-pics { position: relative; margin-top: 28px; padding-right: 12%; }
.pic-wide { border-radius: var(--r-img); width: 100%; }
.pic-phone { position: absolute; right: 0; bottom: -40px; width: 20%; border-radius: 20px; border: 5px solid var(--ink); box-shadow: 0 24px 40px -20px rgba(17, 19, 24, .5); }

/* Icon list: icon, title, one line, no boxes */
.icon-list { padding: calc(var(--space) + 20px) var(--gutter) 0; }
.icon-list > h2 { margin-bottom: 40px; }
.icon-list ul, .expect ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.icon-list li, .expect li { display: grid; gap: 4px; align-content: start; }
.icon-list li > .ic, .expect li > .ic { font-size: 34px; color: var(--accent-text); margin-bottom: 10px; }
.icon-list strong, .expect strong { font: 600 1.1875rem/1.3 var(--display); letter-spacing: -0.01em; }
.icon-list li > span, .expect li > span { color: var(--ink-2); }

/* Feature tile: one dark tile with a picture */
.feature { padding: var(--space) var(--gutter) 0; }
.feature-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--tint); border-radius: var(--r-tile); text-decoration: none; transition: transform .3s var(--ease); }
.feature-text { display: grid; gap: 12px; justify-items: start; }
.feature-title { font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--display); letter-spacing: -0.025em; }
.feature-line { color: var(--ink-2); max-width: 34ch; }
.feature-tile img { border-radius: var(--r-img); }
.feature-tile + .feature-tile { margin-top: clamp(20px, 3vw, 32px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .feature-tile:hover { transform: translateY(-4px); } }

/* ---------- Automation: split hero with four small tiles ---------- */
.split-hero { padding: clamp(32px, 5vw, 72px) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split-copy { display: grid; gap: 22px; }
.jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jobs li { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 160px; padding: 24px; border-radius: var(--r-tile); background: var(--surface); }
.jobs li > .ic { font-size: 34px; color: var(--accent-text); }
.jobs strong { font: 600 1.25rem/1.2 var(--display); letter-spacing: -0.015em; }
.jobs .job-accent { background: var(--accent); color: var(--on-accent); }
.jobs .job-accent > .ic { color: currentColor; }
.jobs .job-ink { background: var(--tile); color: var(--on-tile); }
.jobs .job-ink > .ic { color: var(--accent-on-tile); }

/* Before / after */
.compare { padding: var(--space) var(--gutter) 0; }
.compare > h2 { margin-bottom: 32px; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-cols > div { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-tile); }
.col-before { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.col-after { background: var(--surface); }
.col-head { font: 600 .9375rem/1 var(--display); margin-bottom: 20px; color: var(--ink-2); }
.col-after .col-head { color: var(--accent-text); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.compare li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 1.0625rem; }
.compare li > .ic { margin-top: 3px; font-size: 18px; }
.col-before li { color: var(--ink-2); }
.col-before li > .ic { color: #A3361F; }
.col-after li > .ic { color: var(--accent-text); }
.note { margin-top: 20px; color: var(--ink-2); }

/* ---------- About ---------- */
.statement { padding: clamp(32px, 5vw, 72px) var(--gutter) 0; display: grid; gap: 22px; max-width: calc(46rem + 2 * var(--gutter)); }
.statement p:not(.lede) { color: var(--ink-2); max-width: 52ch; }
.expect { padding: var(--space) var(--gutter) 0; }
.expect ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.quotes { padding: var(--space) var(--gutter) 0; }
.quote { margin: 24px 0 0; max-width: 40rem; }
.quote blockquote { margin: 0 0 10px; font-size: 1.375rem; }
.quote figcaption { color: var(--ink-2); }

/* ---------- Contact ---------- */
.contact { padding: clamp(32px, 5vw, 72px) var(--gutter) var(--space); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(32px, 6vw, 88px); align-items: start; }
.contact-intro { display: grid; gap: 18px; }
.direct { margin: 20px 0 0; display: grid; gap: 4px; }
.direct div { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; min-height: 48px; }
.direct dt { color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.direct dt .ic { font-size: 20px; color: var(--accent-text); }
.direct dd { margin: 0; }
.direct a { font: 600 1.0625rem/1.3 var(--display); min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; text-decoration: none; }
.direct a:hover { text-decoration: underline; text-underline-offset: 4px; }
.form { display: grid; gap: 20px; padding: clamp(24px, 3.5vw, 40px); background: var(--surface); border-radius: var(--r-tile); }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font: 600 1rem/1.3 var(--display); padding: 0; }
.opt, .hint { font: 400 .9375rem/1.4 var(--body); color: var(--ink-2); }
.field input[type="text"], .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 1rem/1.5 var(--body); color: var(--ink);
  background: var(--bg); border: 1px solid transparent; border-radius: var(--r-field);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #A3361F; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices legend { margin-bottom: 4px; width: 100%; }
.choices .choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--bg); cursor: pointer; font: 400 1rem/1.3 var(--body); }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.choices .choice:has(input:checked) { background: var(--tint); }
.choices .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.form .btn { justify-self: start; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-radius: var(--r-field); background: var(--bg); }
.form-status.is-error { box-shadow: inset 0 0 0 2px #A3361F; }
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(40px, 5vw, 64px); padding: 40px var(--gutter) 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; color: var(--ink-2); font-size: .9375rem; }
.contact ~ .foot, main:has(.contact) + .foot { margin-top: 0; }
.foot-main { display: grid; gap: 2px; }
.foot-brand { font: 700 1.0625rem/1.3 var(--display); color: var(--ink); letter-spacing: -0.02em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-nav a, .foot-small a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot-nav a:hover, .foot-small a:hover { color: var(--ink); }
.foot-small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }

/* ---------- Case study ---------- */
.case-head { padding: clamp(32px, 5vw, 64px) var(--gutter) 0; display: grid; gap: 18px; justify-items: start; }
.back a { font: 500 .9375rem/1 var(--body); color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.case-lede { font-size: 1.25rem; color: var(--ink-2); max-width: 44ch; }
.facts { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 16px; margin: 8px 0 0; }
.facts div { display: grid; gap: 2px; padding: 14px 18px; background: var(--surface); border-radius: var(--r-field); }
.facts dt { font-size: .8125rem; color: var(--ink-2); }
.facts dd { margin: 0; font: 600 1rem/1.4 var(--display); }
.case-wide { margin: clamp(28px, 4vw, 48px) var(--gutter) 0; border-radius: var(--r-img); overflow: hidden; }
.case-block { padding: var(--space) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 20px clamp(32px, 5vw, 72px); }
.case-block > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.case-text { display: grid; gap: 16px; max-width: 40rem; align-content: start; color: var(--ink-2); }
.case-text h3 { color: var(--ink); }
.plain { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 8px; }
.plain li::marker { color: var(--accent-text); }
.refs { margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.refs div { padding: 20px; background: var(--surface); border-radius: var(--r-tile); }
.refs dt { font: 600 1.0625rem/1.3 var(--display); margin-bottom: 6px; color: var(--ink); }
.refs dd { margin: 0; font-size: .9375rem; }
.decisions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.decision { display: grid; gap: 16px; align-content: start; }
.decision figure { margin: 0; }
.decision img { border-radius: 20px; border: 4px solid var(--ink); background: #16120E; }
.decision .case-text { gap: 6px; font-size: .9375rem; }
.case-end { gap: 20px; }
.case-end-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* ---------- Integration: the page reads as one piece ----------
   Learned from the references (not copied): few boxes, visuals that run to the edge, a line that
   carries you from one part to the next, and an ending where the call to action and footer are one block.
   Two surfaces only: the page colour and a softer band (--surface). */
.band { background: var(--surface); }
.band-start { position: relative; margin-top: calc(-1 * var(--overlap)); padding-top: calc(var(--overlap) + var(--space)); }
.band-end { padding-bottom: var(--space); }
.lift { position: relative; z-index: 1; }
.work.band { padding-top: var(--space); }
.expect.band { margin-top: var(--space); padding-top: var(--space); }

/* Home hero: the work runs off the right edge of the screen */
.hero { padding-right: 0; padding-bottom: clamp(32px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.hero-collage { aspect-ratio: 16 / 11; }
/* The collage bleeds past the right edge on purpose; clip it so the page never scrolls sideways */
html, body { overflow-x: clip; }
.collage-desk { width: 96%; right: -2%; border-radius: var(--r-img) 0 0 var(--r-img); }

/* A line that lights up word by word as you scroll (only where the browser supports scroll-linked animation) */
.intro-statement { padding: clamp(40px, 6vw, 88px) var(--gutter) var(--space); }
.reveal { font: 600 clamp(1.75rem, 3.6vw, 3rem)/1.18 var(--display); letter-spacing: -0.025em; max-width: 24em; text-wrap: pretty; }
html:lang(zh-TW) .reveal { line-height: 1.45; letter-spacing: .02em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal .w { opacity: .18; animation: lit linear both; animation-timeline: view(); animation-range: cover calc(15% + var(--p) * 35%) cover calc(20% + var(--p) * 35%); }
  }
}
@keyframes lit { to { opacity: 1; } }

/* Services side by side, split by lines rather than boxes (stacked on phones) */
.rows { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic . go" "name name name" "line line line";
  gap: 16px; align-items: center; align-content: start; padding: clamp(24px, 3vw, 40px); text-decoration: none; isolation: isolate;
}
.row + .row { border-left: 1px solid var(--line-strong); }
.row > .ic { grid-area: ic; }
.row-name { grid-area: name; margin-top: 20px; }
.row-line { grid-area: line; }
.row-go { grid-area: go; }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.row > .ic { font-size: 36px; color: var(--accent-text); transition: color .3s; }
.row-name { font: 700 clamp(2.25rem, 4.4vw, 3.5rem)/1 var(--display); letter-spacing: -0.035em; }
.row-line { color: var(--ink-2); transition: color .3s; }
.row-go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .4s var(--ease); }
@media (hover: hover) {
  .row:hover { color: var(--on-accent); }
  .row:hover::before { transform: scaleY(1); }
  .row:hover > .ic, .row:hover .row-line { color: var(--on-accent); }
  .row:hover .row-go { transform: rotate(45deg); box-shadow: inset 0 0 0 1px currentColor; }
}
@media (prefers-reduced-motion: reduce) { .row::before, .row-go { transition: none; } }

/* Fewer boxes: these become open layouts */
.jobs { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.jobs li, .jobs .job-accent, .jobs .job-ink, .band .jobs li { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; min-height: 0; padding: 22px 4px; border-radius: 0; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.jobs li > .ic, .jobs .job-accent > .ic, .jobs .job-ink > .ic { font-size: 30px; color: var(--accent-text); }
.split-hero.lift { align-items: center; }
.split-hero .split-copy { padding-bottom: 0; }
.compare-cols { gap: 0; }
.compare-cols > div, .band .col-after { padding: 8px 0; border-radius: 0; background: transparent; box-shadow: none; }
.col-after { padding-left: clamp(24px, 4vw, 56px) !important; border-left: 1px solid var(--line-strong); }
.col-before { padding-right: clamp(24px, 4vw, 56px) !important; }
.refs { gap: 32px; }
.refs div, .band .refs div { padding: 16px 0 0; background: transparent; border-radius: 0; border-top: 2px solid var(--ink); }
.facts { gap: 8px 40px; }
.facts div, .band .facts div { padding: 0; background: transparent; }
.feature-tile { background: transparent; padding: 0; }
.feature-tile .glow { order: -1; }

/* The ending: call to action and footer are one dark block */
.cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end;
  margin: 0; padding: var(--space) var(--gutter) clamp(48px, 6vw, 80px); border-radius: 0;
  background: var(--tile); color: var(--on-tile);
}
.cta h2 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; letter-spacing: -0.04em; max-width: 10em; }
.cta p { grid-column: 1; color: var(--on-tile-2); font-size: 1.125rem; }
.cta .btn { grid-column: 2; grid-row: 1 / span 2; color: var(--on-accent); min-height: 56px; padding: 0 30px; font-size: 1.0625rem; --hbg-hi: var(--on-tile); --hbg-base: color-mix(in srgb, var(--accent) 35%, var(--tile)); }
.case-end.cta { grid-template-columns: 1fr; }
.case-end .case-end-actions .text-link { color: var(--on-tile); }
.foot { margin-top: 0; padding-top: 32px; background: var(--tile); color: var(--on-tile-2); border-top: 1px solid color-mix(in srgb, var(--on-tile) 14%, transparent); }
.foot-brand { color: var(--on-tile); }
.foot-nav a:hover, .foot-small a:hover { color: var(--on-tile); }
main:not(:has(.cta)) + .foot { border-top: 0; padding-top: 48px; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .hero, .split-hero { grid-template-columns: 1fr; }
  .hero-collage { max-width: 640px; }
  .project-head { grid-template-columns: 1fr; }
  .icon-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expect ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-row ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps-row li::after { display: none; }
  .case-block { grid-template-columns: 1fr; }
  .decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, auto); }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 108px; }
  .bar { flex-wrap: wrap; gap: 0 4px; padding-top: 6px; padding-bottom: 6px; }
  .bar-end { margin-left: auto; gap: 2px; }
  .bar-nav { order: 3; width: 100%; margin: 0 0 0 -14px; overflow-x: auto; scrollbar-width: none; }
  .bar-nav a { white-space: nowrap; }
  .bar .btn-small { padding: 0 16px; }

  .hero { gap: 32px; padding-bottom: 64px; }
  h1 { font-size: clamp(2.125rem, 9.5vw, 2.75rem); }
  .hero-lede, .lede, .case-lede { font-size: 1.125rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }


  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gallery .wide, .gallery .half, .gallery .full { grid-column: span 3; }
  .project-row { grid-template-columns: 1fr; }
  .pr-media { padding: 0 14% 9% 0; }
  .pr-phone { width: 28%; border-radius: 12px; border-width: 3px; }
.gallery .full { grid-column: 1 / -1; }
  .gallery .tall { grid-column: span 1; }
  .gallery .tall button { aspect-ratio: 9 / 19; }
  .gallery .tall p { font-size: .8125rem; line-height: 1.35; }

  .steps-row ol { grid-template-columns: 1fr; gap: 24px; }
  .steps-row li { grid-template-columns: auto 1fr; column-gap: 16px; }
  .steps-row li > .ic { grid-row: span 2; margin: 0; }

  .cta { grid-template-columns: 1fr; padding: 64px var(--gutter) 40px; }
  .hero { padding-right: var(--gutter); }
  .collage-desk { right: 0; width: 90%; border-radius: var(--r-img); }
  .rows { grid-template-columns: 1fr; }
  .row { padding: 24px 4px; gap: 12px 16px; }
  .row + .row { border-left: 0; border-top: 1px solid var(--line-strong); }
  .row > .ic { font-size: 28px; }
  .row-name { margin-top: 8px; }
  .row-line { font-size: .9375rem; }
  .row-go { width: 44px; height: 44px; }
  .col-after { padding-left: 0 !important; border-left: 0; border-top: 1px solid var(--line-strong); padding-top: 24px !important; margin-top: 16px; }
  .col-before { padding-right: 0 !important; }
  .cta .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: 8px; }

  .stack-pics { padding-right: 18%; }
  .pic-phone { width: 30%; bottom: -28px; border-width: 4px; border-radius: 14px; }
  .icon-list ul, .expect ul { grid-template-columns: 1fr; gap: 28px; }
  .icon-list li, .expect li { grid-template-columns: auto 1fr; column-gap: 16px; }
  .icon-list li > .ic, .expect li > .ic { grid-row: span 2; margin: 2px 0 0; font-size: 30px; }
  .feature-tile { grid-template-columns: 1fr; }

  .jobs li, .jobs .job-accent, .jobs .job-ink { padding: 18px 4px; gap: 16px; }
  .jobs strong { font-size: 1.0625rem; }
  .compare-cols { grid-template-columns: 1fr; }

  .contact { grid-template-columns: 1fr; }
  .direct div { grid-template-columns: 7.5rem 1fr; }
  .form { margin: 0 calc(-1 * var(--gutter) + 8px); }
  .form .btn { width: 100%; }
  .foot { grid-template-columns: 1fr; }

  .refs { grid-template-columns: 1fr; }
  .decisions { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .facts { grid-template-columns: 1fr 1fr; }

  .case-end-actions .btn { width: 100%; }
}