/* Sub-pages (/work/, /work/<type>/, /how-it-works/, /about/): the Home v4 language —
   full photographs, oversized Thai type, solid colour slabs — on the shared shell. */
.subpage { --v4-orange:#ff623e; --v4-lime:#e7f34c; --v4-lilac:#d7ccff; --v4-ink:#20211c; --v4-blue:#b9d8dc; --red:#bc3b24; --slab:var(--v4-lime); --on-slab:var(--v4-ink); }
.subpage main { overflow:clip; padding-top:var(--header-height); }
.subpage .site-header { background:var(--paper); }
.subpage .site-header.is-scrolled { background:rgba(242,240,234,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.subpage :is(.site-nav a[aria-current="page"]:not(.nav-cta))::after { transform:scaleX(1); transform-origin:left; }
.subpage svg:not(.icon) { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
.subpage .icon { fill:currentColor; stroke:none; }
.subpage ::selection { background:var(--v4-ink); color:var(--v4-lime); }
.work-page--lime { --slab:var(--v4-lime); --on-slab:var(--v4-ink); }
.work-page--orange { --slab:var(--v4-orange); --on-slab:var(--v4-ink); }
.work-page--lilac { --slab:var(--v4-lilac); --on-slab:var(--v4-ink); }
.work-page--blue { --slab:var(--v4-blue); --on-slab:var(--v4-ink); }
.work-page--ink { --slab:var(--v4-ink); --on-slab:var(--paper); }

/* Type: "black small but heavy, red big but thin" — the Home services rule. */
.page-title { font-size:clamp(30px,3.4vw,50px); line-height:1.25; font-weight:800; letter-spacing:-.035em; }
.page-title span { display:block; padding-left:5%; margin-top:6px; font-size:clamp(58px,7.6vw,112px); font-weight:100; letter-spacing:-.02em; line-height:1.06; color:var(--red); text-wrap:balance; }
.section-title { font-size:clamp(28px,3vw,44px); line-height:1.2; font-weight:800; letter-spacing:-.03em; }
.section-title span { display:block; font-weight:100; font-size:1.55em; color:var(--red); letter-spacing:-.02em; line-height:1.1; margin-top:2px; }
.kicker { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--v4-lime); margin-bottom:14px; }
.eyebrow-link { display:flex; flex-wrap:wrap; gap:0 .6em; align-items:center; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:22px; }
.eyebrow-link a { color:var(--ink); border-bottom:1px solid var(--line); }
.eyebrow-link a:hover { color:var(--red); border-color:currentColor; }
.text-link { display:inline-flex; align-items:center; gap:.55em; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:4px; }
.text-link svg { width:22px; height:22px; flex:none; transition:transform 200ms var(--ease-out); }
.text-link:hover svg { transform:translate(3px,-3px); }

/* Buttons: the shared red square button carries LINE; phone is the text button. */
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:32px; }
.button--line { gap:.6rem; padding-inline:1.35rem 1.7rem; }
.button--line .icon { width:22px; height:22px; flex:none; }
.subpage .button--text { padding:0; min-height:0; font-weight:600; }
.subpage .button--text::after { inset:auto 0 -6px; }

/* Latin runs wider than Thai: the English pages take a smaller red line. */
html[lang="en"] .page-title span { font-size:clamp(44px,5.6vw,84px); }
html[lang="en"] .index-hero .page-title span { font-size:clamp(48px,6vw,92px); }

html[lang="zh-Hans"] .page-title span, html[lang="ja"] .page-title span,
html[lang="zh-Hans"] .section-title span, html[lang="ja"] .section-title span { font-weight:300; letter-spacing:0; }
html[lang="zh-Hans"] .page-title span, html[lang="ja"] .page-title span { font-size:clamp(40px,5.2vw,78px); line-height:1.15; }
html[lang="zh-Hans"] .index-hero .page-title span, html[lang="ja"] .index-hero .page-title span { font-size:clamp(44px,5.6vw,84px); white-space:normal; }
html[lang="zh-Hans"] :is(.page-title,.section-title,.type-card__label h2,.type-card__label h3,.work-brief__head h2,.closing-cta h2,.index-cta h2) { letter-spacing:0; }
html[lang="ja"] :is(.page-title,.section-title,.type-card__label h2,.type-card__label h3,.work-brief__head h2,.closing-cta h2,.index-cta h2) { letter-spacing:0; }

/* ---------- Work type page ---------- */
.work-hero { padding-block:56px 72px; }
.work-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:end; }
.work-hero__copy { padding-bottom:12px; }
.work-hero__hook { margin-top:30px; font-size:clamp(17px,1.3vw,19px); line-height:1.85; max-width:34em; text-wrap:pretty; }
.work-hero__note { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; line-height:1.7; color:var(--muted); max-width:34em; }
.work-hero__visual { position:relative; border-radius:16px; overflow:hidden; background:var(--slab); color:var(--on-slab); isolation:isolate; }
.work-hero__visual img { aspect-ratio:1.18; object-fit:cover; }
.work-hero__visual--video img { aspect-ratio:auto; }
.work-hero__visual figcaption { padding:20px 26px 24px; font-family:"Sarabun",sans-serif; font-size:clamp(20px,1.8vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.work-hero__visual .video-embed { border-radius:0; }
.work-hero__visual .video-embed--vertical { aspect-ratio:9/16; max-width:340px; margin:28px auto 0; border-radius:12px; }

.work-feature { background:var(--v4-ink); color:var(--paper); padding:clamp(56px,7vw,96px) 0; }
.work-feature__grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.work-feature__copy h2 { font-size:clamp(26px,2.6vw,38px); line-height:1.3; font-weight:800; letter-spacing:-.03em; text-wrap:balance; }
.work-feature__copy p:not(.kicker) { margin-top:18px; font-size:clamp(16px,1.2vw,18px); line-height:1.85; color:#dcddd3; max-width:30em; }
.work-feature--vertical .work-feature__grid { grid-template-columns:minmax(0,.55fr) 1fr; }
.work-feature--vertical .work-feature__video { max-width:380px; justify-self:center; }

/* Lazy YouTube: a poster link until clicked, then the player replaces it. */
.video-embed { position:relative; aspect-ratio:16/9; width:100%; border-radius:16px; overflow:hidden; background:#0b0c0a; }
.video-embed--vertical { aspect-ratio:9/16; max-width:300px; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-facade { position:absolute; inset:0; display:block; color:var(--v4-ink); }
.video-facade img { width:100%; height:100%; object-fit:cover; transition:transform 650ms var(--ease-out); }
.video-facade__play { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:var(--v4-lime); display:grid; place-items:center; transition:transform 300ms var(--ease-out), background-color 180ms ease; }
.video-facade__play svg { width:34px; height:34px; fill:currentColor; stroke:none; margin-left:3px; }
.video-facade__label { position:absolute; left:0; bottom:0; padding:10px 18px 12px; background:var(--v4-ink); color:var(--paper); font-family:"Sarabun",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em; }
.video-facade:focus-visible { outline:3px solid var(--v4-lime); outline-offset:-3px; }
@media(hover:hover) and (pointer:fine) {
  .video-facade:hover img { transform:scale(1.03); }
  .video-facade:hover .video-facade__play { transform:scale(1.06); background:var(--v4-lilac); }
}

.work-more { padding:clamp(56px,7vw,96px) var(--page-x); }
.work-more__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:36px clamp(20px,3vw,40px); margin:40px 0 0; padding:0; list-style:none; align-items:start; }
.work-more__list li { min-width:0; }
.work-more__list h3 { margin-top:16px; font-size:19px; line-height:1.4; font-weight:700; letter-spacing:-.02em; }
.work-more__list p { margin-top:8px; font-size:15px; line-height:1.7; color:var(--muted); }
.use-when { display:block; color:var(--red); font-weight:700; }
.more-video .video-embed--vertical { max-width:240px; }

.work-photos { padding:0 var(--page-x) clamp(56px,7vw,96px); }
.work-photos__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:36px 0 0; padding:0; list-style:none; }
.work-photos__grid li { grid-column:span 2; border-radius:14px; overflow:hidden; background:var(--paper-deep); }
.work-photos__grid li.is-wide { grid-column:span 4; }
.work-photos__grid img { aspect-ratio:3/2; object-fit:cover; }

.work-brief { background:var(--v4-lime); color:var(--v4-ink); padding:clamp(64px,8vw,110px) 0; scroll-margin-top:90px; }
.work-brief__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start; }
.work-brief__head { position:sticky; top:110px; }
.work-brief__head h2 { font-size:clamp(3rem,6vw,5.4rem); line-height:1.08; font-weight:800; letter-spacing:-.04em; }
.work-brief__head h2 span { display:block; margin-top:14px; font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:600; letter-spacing:-.01em; line-height:1.4; }
.work-brief__head > p { margin-top:26px; max-width:27ch; font-size:16px; line-height:1.8; }
.brief-list { margin:0; padding:0; list-style:none; }
.brief-list li { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:22px 0 26px; border-top:1px solid rgba(32,33,28,.35); }
.brief-list li:last-child { border-bottom:1px solid rgba(32,33,28,.35); }
.brief-number { font-family:"Sarabun",sans-serif; font-size:clamp(46px,4.6vw,64px); font-weight:800; line-height:.9; letter-spacing:-.04em; min-width:1.2em; }
.brief-list p { font-size:clamp(17px,1.35vw,20px); line-height:1.7; padding-top:8px; }
.cta-row--brief { margin-top:34px; }
.work-brief .button--primary { background:var(--v4-ink); color:var(--paper); }
.work-brief .button--primary:hover { background:var(--accent); }
.work-brief .button--text { color:var(--v4-ink); }
.work-brief__form { margin-top:22px; font-size:15px; }
.work-brief__form a { display:inline-flex; align-items:center; gap:.5em; border-bottom:1px solid currentColor; }
.work-brief__form svg { width:20px; height:20px; }

.work-method { padding:clamp(64px,8vw,110px) var(--page-x); }
.work-method__head, .work-related__head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px 40px; }
.method-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin:40px 0 0; padding:0; list-style:none; }
.method-card { border-radius:16px; padding:clamp(22px,2.4vw,32px); min-height:250px; display:flex; flex-direction:column; }
.method-card--brief { background:var(--v4-lilac); color:var(--v4-ink); }
.method-card--shoot { background:var(--v4-orange); color:var(--v4-ink); margin-top:28px; }
.method-card--finish { background:var(--v4-ink); color:var(--paper); }
.method-number { display:block; font-family:"Sarabun",sans-serif; font-size:clamp(2.6rem,3.6vw,3.6rem); font-weight:800; line-height:1; letter-spacing:-.04em; margin-bottom:1.3rem; }
.method-card--finish .method-number { color:var(--v4-lime); }
.method-card h3 { font-size:clamp(1.35rem,1.8vw,1.7rem); font-weight:700; letter-spacing:-.025em; line-height:1.35; margin-bottom:.5rem; }
.method-card p { font-size:15.5px; line-height:1.75; text-wrap:pretty; }
.urgent-box { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,48px); align-items:center; margin-top:clamp(20px,2.4vw,32px); padding:clamp(24px,3vw,40px); border-radius:16px; background:var(--v4-blue); color:var(--v4-ink); }
.urgent-box h3 { font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.urgent-box__copy > p { margin-top:14px; font-size:15.5px; line-height:1.8; max-width:44em; }
.urgent-box__links { display:flex; flex-wrap:wrap; gap:10px 22px; }
.urgent-box__links a { font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.urgent-box__links a:hover { color:var(--red); }
.urgent-box__call { display:flex; flex-direction:column; gap:6px; padding:22px 26px; border-radius:14px; background:var(--v4-ink); color:var(--paper); transition:background-color 180ms ease; }
.urgent-box__call .icon { width:26px; height:26px; }
.urgent-box__call span { font-size:14px; line-height:1.5; color:#c8c9bf; }
.urgent-box__call strong { font-family:"Sarabun",sans-serif; font-size:clamp(28px,2.6vw,36px); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.urgent-box__call:hover { background:var(--accent); }
.urgent-box__call:hover span { color:#fffaf7; }

.work-related { padding:0 var(--page-x) clamp(72px,9vw,120px); }
.type-grid--related { grid-template-columns:repeat(3,1fr); margin-top:36px; }

/* Type cards: full photograph, solid title slab, the shared square arrow. */
.type-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,40px) clamp(20px,3vw,40px); margin:0; padding:0; list-style:none; align-items:start; }
.type-grid__item { grid-column:span 6; min-width:0; }
.type-grid__item--big { grid-column:span 7; }
.type-grid__item--small { grid-column:span 5; margin-top:72px; }
.type-grid__item--third { grid-column:span 4; }
.type-grid__item--half { grid-column:span 6; }
.type-grid__item--half:last-child { margin-top:56px; }
.type-card { display:block; border-radius:16px; overflow:hidden; background:var(--v4-lime); color:var(--v4-ink); }
.type-card--lime { background:var(--v4-lime); }
.type-card--orange { background:var(--v4-orange); }
.type-card--lilac { background:var(--v4-lilac); }
.type-card--blue { background:var(--v4-blue); }
.type-card--ink { background:var(--v4-ink); color:var(--paper); }
.type-card:focus-visible { outline:3px solid var(--ink); outline-offset:6px; }
.type-card__image { overflow:hidden; background:#0b0c0a; }
.type-card__image img { aspect-ratio:1.28; object-fit:cover; transition:transform 650ms var(--ease-out); }
.type-card__image img.poster--vertical { scale:2.25; }
.type-grid__item--big .type-card__image img { aspect-ratio:1.42; }
.type-grid__item--third .type-card__image img, .type-grid--related .type-card__image img { aspect-ratio:1.2; }
.type-card__label { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:22px 26px 26px; }
.type-card__label h2, .type-card__label h3 { font-size:clamp(26px,2.5vw,38px); line-height:1.15; letter-spacing:-.03em; font-weight:800; }
.type-grid__item--big .type-card__label h2 { font-size:clamp(32px,3.4vw,52px); }
.type-card__label p { margin-top:10px; font-size:15px; line-height:1.6; max-width:26em; }
.type-card--ink .type-card__label p { color:#dcddd3; }
.type-card__label svg { width:44px; height:44px; flex:none; transition:transform 300ms var(--ease-out); }
@media(hover:hover) and (pointer:fine) {
  .type-card:hover img { transform:scale(1.035); }
  .type-card:hover .type-card__label svg { transform:translate(4px,-4px); }
}

/* ---------- /work/ index ---------- */
.index-hero { padding-block:56px 64px; }
.index-hero__grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.index-hero .page-title span { font-size:clamp(60px,7.4vw,106px); white-space:nowrap; }
.index-hero__intro p { font-size:clamp(17px,1.3vw,19px); line-height:1.8; max-width:30em; }
.index-hero__note { margin-top:18px; font-size:13px !important; color:var(--muted); }
.index-hero__intro .cta-row, .plain-hero__intro .cta-row { margin-top:26px; }
.index-cta { margin-top:clamp(72px,9vw,120px); background:var(--v4-ink); color:var(--paper); padding:clamp(56px,7vw,96px) 0; }
.index-cta__grid { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }
.index-cta h2 { font-size:clamp(30px,3.6vw,54px); line-height:1.15; font-weight:800; letter-spacing:-.035em; color:var(--v4-orange); text-wrap:balance; }
.index-cta p { margin-top:18px; font-size:17px; line-height:1.8; max-width:34em; color:#dcddd3; }
.index-cta .cta-row { margin-top:0; justify-content:end; }
.index-cta .button--primary { background:var(--v4-lime); color:var(--v4-ink); }
.index-cta .button--primary:hover { background:var(--v4-lilac); }

/* ---------- /how-it-works/ ---------- */
.plain-hero { padding-block:56px 48px; }
.plain-hero__grid { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.plain-hero__intro p { font-size:clamp(17px,1.3vw,19px); line-height:1.8; max-width:30em; }
.plain-hero__intro p + p { margin-top:14px; font-size:14px; color:var(--muted); }
.steps { margin:40px 0 0; padding:0; list-style:none; display:grid; gap:clamp(14px,1.8vw,22px); }
.step { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,48px); border-radius:16px; padding:clamp(24px,3vw,40px); }
.step--1 { background:var(--v4-lilac); }
.step--2 { background:var(--v4-orange); }
.step--3 { background:var(--v4-blue); }
.step--4 { background:var(--v4-lime); }
.step--5 { background:var(--v4-ink); color:var(--paper); }
.step--5 .method-number { color:var(--v4-lime); }
.step h3 { font-size:clamp(1.5rem,2.2vw,2rem); font-weight:800; letter-spacing:-.03em; line-height:1.25; }
.step > div > p { margin-top:12px; font-size:16px; line-height:1.8; max-width:36em; }
.step dl { margin:0; display:grid; gap:14px; align-self:end; }
.step dt { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.step dd { margin:4px 0 0; font-size:15.5px; line-height:1.75; }
.section-block { padding:clamp(64px,8vw,110px) var(--page-x) 0; }
.factors { margin:36px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(24px,4vw,64px); }
.factors li { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.factors li:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
.factors .brief-number { font-size:clamp(34px,3vw,44px); color:var(--red); font-weight:100; min-width:1.4em; }
.factors h3 { font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.factors p { margin-top:6px; font-size:15px; line-height:1.7; color:var(--muted); }
.price-blank { margin-top:clamp(28px,3vw,40px); display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,3vw,48px); align-items:center; border-radius:16px; padding:clamp(24px,3vw,40px); background:var(--v4-lime); color:var(--v4-ink); }
.price-blank p { font-size:clamp(20px,2.2vw,30px); font-family:"Sarabun",sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.35; }
.price-blank small { display:block; margin-top:14px; font-family:"Bai Jamjuree",sans-serif; font-weight:500; font-size:14px; letter-spacing:0; line-height:1.6; }
.price-blank ul { margin:0; padding-left:1.2em; font-size:15px; line-height:1.8; }
.faq { margin:36px 0 0; display:grid; gap:0; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; font-family:"Sarabun",sans-serif; font-size:clamp(19px,1.7vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { width:26px; height:26px; flex:none; transition:transform 250ms var(--ease-out); }
.faq details[open] summary svg { transform:rotate(45deg); }
.faq summary:hover { color:var(--red); }
.faq summary:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.faq .faq__body { padding:0 0 26px; max-width:44em; font-size:16px; line-height:1.85; }
.faq .faq__body p + p { margin-top:10px; }
.faq .faq__body a { text-decoration:underline; text-underline-offset:4px; }
.closing-cta { margin-top:clamp(72px,9vw,120px); background:var(--v4-ink); color:var(--paper); padding:clamp(56px,7vw,96px) 0; }
.closing-cta__grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }
.closing-cta h2 { font-size:clamp(36px,4.6vw,72px); line-height:1.1; font-weight:800; letter-spacing:-.035em; color:var(--v4-orange); }
.closing-cta h2 span { display:block; padding-left:12%; }
.closing-cta ol { margin:0; padding:0; list-style:none; }
.closing-cta ol li { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:16px 0; border-top:1px solid #74756b; font-size:17px; line-height:1.6; align-items:start; }
.closing-cta ol li:last-child { border-bottom:1px solid #74756b; }
.closing-cta .brief-number { color:var(--v4-lime); font-size:clamp(34px,3vw,44px); }
.closing-cta .cta-row { margin-top:30px; }
.closing-cta .button--primary { background:var(--v4-lime); color:var(--v4-ink); }
.closing-cta .button--primary:hover { background:var(--v4-lilac); }

/* ---------- /about/ ---------- */
.about-hero { padding-block:56px 64px; }
.about-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:end; }
.about-hero__copy p { margin-top:26px; font-size:clamp(17px,1.3vw,19px); line-height:1.85; max-width:34em; }
.about-hero__copy p + p { margin-top:16px; color:var(--muted); font-size:16px; }
.about-hero__visual { position:relative; border-radius:16px; overflow:hidden; background:var(--v4-orange); color:var(--v4-ink); }
.about-hero__visual img { aspect-ratio:.92; object-fit:cover; object-position:center 60%; }
.about-hero__visual figcaption { padding:18px 24px 22px; font-family:"Sarabun",sans-serif; font-size:clamp(18px,1.6vw,23px); font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.about-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin:0; padding:0; list-style:none; }
.about-facts li { border-radius:16px; padding:clamp(22px,2.4vw,32px); min-height:230px; display:flex; flex-direction:column; justify-content:space-between; }
.about-facts li:nth-child(1) { background:var(--v4-lilac); }
.about-facts li:nth-child(2) { background:var(--v4-orange); margin-top:28px; }
.about-facts li:nth-child(3) { background:var(--v4-ink); color:var(--paper); }
.about-facts strong { display:block; font-family:"Sarabun",sans-serif; font-size:clamp(2.4rem,3.6vw,3.4rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.about-facts li:nth-child(3) strong { color:var(--v4-lime); }
.about-facts p { margin-top:18px; font-size:15.5px; line-height:1.75; }
.about-kit { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,64px); align-items:start; margin-top:36px; }
.about-kit ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(20px,3vw,40px); }
.about-kit li { padding:18px 0; border-top:1px solid var(--line); }
.about-kit li:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
.about-kit h3 { font-size:18px; font-weight:700; letter-spacing:-.02em; }
.about-kit li p { margin-top:6px; font-size:15px; line-height:1.7; color:var(--muted); }
.about-kit__photo { border-radius:16px; overflow:hidden; background:var(--v4-blue); }
.about-kit__photo img { aspect-ratio:1.25; object-fit:cover; }
.about-kit__photo figcaption { padding:16px 22px 20px; font-size:14px; line-height:1.6; }
.clients { margin:36px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.clients li { border-radius:16px; padding:clamp(20px,2.2vw,28px); background:var(--paper-deep); min-height:200px; }
.clients li:nth-child(2) { background:var(--v4-lime); }
.clients li:nth-child(3) { background:var(--v4-lilac); }
.clients li:nth-child(4) { background:var(--v4-blue); }
.clients h3 { font-size:clamp(1.3rem,1.8vw,1.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.25; }
.clients p { margin-top:12px; font-size:15px; line-height:1.75; }
.clients small { display:block; margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); margin-top:36px; align-items:start; }
.about-story figure { border-radius:16px; overflow:hidden; background:var(--v4-orange); }
.about-story figure img { aspect-ratio:1.4; object-fit:cover; }
.about-story figcaption { padding:16px 22px 20px; font-size:14px; line-height:1.6; }
.about-story > div p { font-size:17px; line-height:1.85; max-width:32em; }
.about-story > div p + p { margin-top:16px; }

/* ---------- footer on sub-pages: the Home v4 footer ---------- */
.subpage .site-footer { background:var(--v4-ink); color:var(--paper); padding:40px var(--page-x) 55px; border-top:1px solid #47483f; gap:35px; grid-template-columns:minmax(0,1fr) auto minmax(13rem,.7fr); }
.subpage .site-footer__brand strong { font-size:42px; }
.subpage .site-footer__brand span { font-size:14px; color:#c8c9bf; }
.subpage .site-footer__pages { align-self:start; display:grid; gap:0; min-width:11rem; }
.subpage .site-footer__pages a { padding:.8rem 0; border-top:1px solid rgba(242,240,234,.38); font-size:1rem; font-weight:700; color:#c8c9bf; }
.subpage .site-footer__pages a:last-child { border-bottom:1px solid rgba(242,240,234,.38); }
.subpage .site-footer__pages a:hover, .subpage .site-footer__links a:hover { color:#ef6a54; }
.subpage .site-footer__links a { display:flex; align-items:center; gap:.7rem; color:#c8c9bf; }
.subpage .site-footer__links a:last-child { color:var(--paper); }
.subpage .site-footer__links .icon { width:20px; height:20px; flex:none; }
.subpage .site-footer__links span { min-width:0; overflow-wrap:anywhere; }
.subpage .site-footer__meta { font-size:12px; color:#c8c9bf; }

/* ---------- Responsive ---------- */
@media(max-width:1050px) {
  .work-hero__grid { grid-template-columns:1fr 1fr; }
  .page-title span { font-size:clamp(52px,7.4vw,84px); }
  .work-feature__grid { grid-template-columns:1.2fr 1fr; }
  .work-brief__grid { grid-template-columns:1fr; }
  .work-brief__head { position:static; }
  .method-cards { grid-template-columns:1fr; }
  .method-card { min-height:0; }
  .method-card--shoot { margin-top:0; }
  .type-grid__item--small { margin-top:40px; }
  .about-facts { grid-template-columns:1fr; }
  .about-facts li:nth-child(2) { margin-top:0; }
  .about-facts li { min-height:0; }
  .clients { grid-template-columns:repeat(2,1fr); }
  .subpage .site-footer { grid-template-columns:1fr 1fr; }
  .subpage .site-footer__pages { grid-column:1; }
  .subpage .site-footer__links { grid-column:2; grid-row:1 / span 2; }
}
@media(max-width:760px) {
  .subpage main { padding-top:0; }
  .subpage .site-nav a[href^="https://card."] { white-space:normal; font-size:1.35rem; line-height:1.35; font-weight:700; }
  .work-hero, .index-hero, .plain-hero, .about-hero { padding-block:calc(var(--header-height) + 28px) 48px; }
  .work-hero__grid, .index-hero__grid, .plain-hero__grid, .about-hero__grid { grid-template-columns:1fr; gap:32px; }
  .page-title { font-size:clamp(26px,7vw,34px); }
  .page-title span { padding-left:0; font-size:clamp(46px,13.5vw,70px); }
  .index-hero .page-title span { font-size:clamp(64px,19vw,96px); white-space:normal; }
  html[lang="en"] .page-title span, html[lang="en"] .index-hero .page-title span { font-size:clamp(38px,11vw,56px); }
  html[lang="zh-Hans"] .page-title span, html[lang="ja"] .page-title span, html[lang="zh-Hans"] .index-hero .page-title span, html[lang="ja"] .index-hero .page-title span { font-size:clamp(34px,9.5vw,50px); }
  .work-hero__hook { margin-top:20px; font-size:16px; }
  .cta-row { margin-top:24px; gap:14px 22px; }
  .work-hero__visual img { aspect-ratio:1.25; }
  .about-hero__visual img { aspect-ratio:1.1; }
  .work-hero__visual figcaption { padding:16px 20px 18px; font-size:19px; }
  .work-feature { padding:48px 0; }
  .work-feature__grid, .work-feature--vertical .work-feature__grid { grid-template-columns:1fr; gap:24px; }
  .work-feature--vertical .work-feature__video { max-width:300px; justify-self:start; }
  .work-more, .work-method { padding-block:48px; }
  .work-more__list { grid-template-columns:1fr 1fr; gap:24px 14px; margin-top:28px; }
  .work-more__list h3 { font-size:16px; margin-top:12px; }
  .work-more__list p { font-size:13.5px; }
  .more-video .video-embed--vertical { max-width:none; }
  .video-facade__play { width:56px; height:56px; margin:-28px 0 0 -28px; }
  .video-facade__play svg { width:26px; height:26px; }
  .video-facade__label { padding:7px 12px 9px; font-size:14px; }
  .work-photos { padding-bottom:48px; }
  .work-photos__grid { grid-template-columns:1fr 1fr; gap:8px; margin-top:24px; }
  .work-photos__grid li, .work-photos__grid li.is-wide { grid-column:span 1; border-radius:10px; }
  .work-photos__grid li.is-wide { grid-column:span 2; }
  .work-brief { padding:56px 0; }
  .work-brief__head h2 { font-size:clamp(2.6rem,12vw,3.4rem); }
  .brief-list li { gap:16px; padding:18px 0 20px; }
  .brief-number { font-size:40px; }
  .brief-list p { font-size:16px; padding-top:4px; }
  .urgent-box { grid-template-columns:1fr; padding:22px; }
  .urgent-box__call { padding:18px 20px; }
  .work-related { padding-bottom:64px; }
  .type-grid, .type-grid--related { grid-template-columns:1fr; gap:24px; }
  .type-grid__item, .type-grid__item--big, .type-grid__item--small, .type-grid__item--third, .type-grid__item--half { grid-column:span 1; margin-top:0; }
  .type-card { border-radius:14px; }
  .type-card__image img, .type-grid__item--big .type-card__image img, .type-grid__item--third .type-card__image img, .type-grid--related .type-card__image img { aspect-ratio:1.3; }
  .type-card__label { padding:18px 20px 22px; gap:14px; }
  .type-card__label h2, .type-card__label h3, .type-grid__item--big .type-card__label h2 { font-size:clamp(26px,7.5vw,34px); }
  .type-card__label p { font-size:14px; }
  .type-card__label svg { width:36px; height:36px; }
  .index-cta, .closing-cta { margin-top:64px; padding:56px 0; }
  .index-cta__grid, .closing-cta__grid { grid-template-columns:1fr; gap:28px; }
  .index-cta .cta-row { justify-content:start; }
  .step { grid-template-columns:1fr; padding:22px; gap:18px; }
  .factors { grid-template-columns:1fr; }
  .factors li:nth-last-child(-n+2) { border-bottom:0; }
  .factors li:last-child { border-bottom:1px solid var(--line); }
  .price-blank { grid-template-columns:1fr; padding:22px; }
  .faq summary { font-size:18px; padding:18px 0; }
  .about-kit { grid-template-columns:1fr; }
  .about-kit ul { grid-template-columns:1fr; }
  .about-kit li:nth-last-child(-n+2) { border-bottom:0; }
  .about-kit li:last-child { border-bottom:1px solid var(--line); }
  .clients { grid-template-columns:1fr; }
  .clients li { min-height:0; }
  .about-story { grid-template-columns:1fr; }
  .subpage .site-footer { grid-template-columns:1fr; padding:30px var(--page-x) 110px; gap:24px; }
  .subpage .site-footer__brand strong { font-size:36px; }
  .subpage .site-footer__pages, .subpage .site-footer__links { grid-column:1; grid-row:auto; width:100%; }
  .subpage .site-footer__meta { padding:0; }
}
@media(max-width:359px) {
  .page-title span { font-size:44px; }
  .work-more__list { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .subpage :is(.video-facade img,.video-facade__play,.type-card__image img,.type-card__label svg,.text-link svg,.faq summary svg) { transition:none; transform:none; }
}

/* ---------- /work/<type>/ long-form: how it is done, what moves the price, FAQ (th/en only) ---------- */
.work-detail { padding:clamp(56px,7vw,96px) var(--page-x); border-top:1px solid var(--line); }
.work-detail__head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end; }
.work-detail__intro { font-size:clamp(17px,1.4vw,19.5px); line-height:1.8; max-width:40em; text-wrap:pretty; }
.work-detail__grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr); gap:clamp(28px,4vw,72px); margin-top:clamp(32px,4vw,52px); align-items:start; }
.work-detail__label { font-family:"Bai Jamjuree",sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
.detail-steps { list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:0; border-top:1px solid var(--line); }
.detail-steps li { counter-increment:step; display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.detail-steps li::before { content:counter(step,decimal-leading-zero); font-family:"Bai Jamjuree",sans-serif; font-size:clamp(22px,2.2vw,30px); font-weight:700; line-height:1; color:var(--red); letter-spacing:-.03em; }
.detail-steps h3 { font-size:clamp(18px,1.6vw,22px); font-weight:700; letter-spacing:-.02em; line-height:1.4; margin:0 0 6px; }
.detail-steps p { font-size:16px; line-height:1.8; margin:0; max-width:46em; text-wrap:pretty; }
.work-detail__price { background:var(--v4-lilac); color:var(--v4-ink); border-radius:16px; padding:clamp(22px,2.4vw,32px); position:sticky; top:110px; }
.work-detail__price .work-detail__label { color:inherit; opacity:.7; }
.detail-price { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.detail-price li { padding:12px 0 12px 22px; position:relative; font-size:15.5px; line-height:1.65; border-top:1px solid rgba(27,28,26,.14); }
.detail-price li::before { content:""; position:absolute; left:2px; top:20px; width:9px; height:9px; background:var(--red); }
.work-detail__note { margin:18px 0 0; font-size:14.5px; line-height:1.7; opacity:.85; }
.work-faq { padding:clamp(56px,7vw,96px) var(--page-x); }
.work-faq .faq { max-width:820px; }
@media (max-width:900px) {
  .work-detail__head, .work-detail__grid { grid-template-columns:1fr; }
  .work-detail__price { position:static; }
  .detail-steps li { grid-template-columns:44px minmax(0,1fr); }
}