/* Full photographs, oversized Thai type, and solid spot colours. */
.home-v4 { --v4-orange:#ff623e; --v4-lime:#e7f34c; --v4-lilac:#d7ccff; --v4-ink:#20211c; }
.home-v4 main { overflow:clip; }
.home-v4 .workroom h2, .home-v4 .maker h2, .home-v4 .say-hello h2 { letter-spacing:-.035em; font-weight:800; }
.home-v4 :is(.workroom,.maker,.say-hello) svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
.home-v4 :is(.workroom,.maker,.say-hello,.work-gallery) ::selection { background:var(--v4-ink); color:var(--v4-lime); }
.workroom { padding:100px 0 120px; }
.workroom-heading { display:grid; grid-template-columns:1.35fr 1fr; align-items:end; gap:48px; margin-bottom:68px; }
.home-v4 .workroom-heading h2 { font-size:clamp(96px,11.2vw,164px); line-height:1.02; }
.workroom-heading h2 span { display:block; color:#bc3b24; padding-left:14%; }
.workroom-intro { position:relative; padding:0 0 12px 30px; margin-bottom:8px; }
.workroom-intro p { font-size:19px; line-height:1.8; }
.workroom-intro p + p { margin-top:20px; font-size:14px; color:var(--muted); }
.workroom-intro > svg { width:64px; height:64px; margin-top:36px; }
.workroom-grid { display:grid; grid-template-columns:1.1fr 1fr; column-gap:clamp(24px,5vw,72px); row-gap:64px; align-items:start; }
.project-card { min-width:0; }
.project-card-link { display:block; border-radius:16px; overflow:hidden; background:var(--v4-lime); }
.project-card-link:focus-visible { outline:3px solid var(--ink); outline-offset:6px; }
.project-card-image { overflow:hidden; }
.project-card-image img { transition:transform 650ms var(--ease-out); }
.project-card-label { position:relative; padding:25px 30px 30px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.project-card-label h3 { font-size:clamp(32px,3.9vw,56px); line-height:1.12; letter-spacing:-.03em; font-weight:800; }
.project-card-label h3 span { font-weight:400; }
.project-card-label svg { width:48px; height:48px; flex:none; transition:transform 300ms var(--ease-out); }
.project-card-note { display:flex; justify-content:space-between; gap:20px; padding-top:18px; line-height:1.6; }
.project-card-note p { font-size:14px; max-width:24em; }
.project-card-note > span { font-size:12px; color:var(--muted); text-align:right; max-width:15em; }
.project-card--food .project-card-image { aspect-ratio:1.12; }
.project-card--food img { object-position:49% center; }
.project-card--community { margin-top:140px; }
.project-card--community .project-card-link { background:var(--v4-orange); }
.project-card--community .project-card-image { aspect-ratio:1.1; }
.project-card--community img { object-position:44% center; }
.project-card--people { margin-top:-60px; }
.project-card--people .project-card-link { background:var(--v4-lilac); }
.project-card--people .project-card-image { aspect-ratio:1.3; }
.project-card--people .project-card-label { min-height:130px; }
.project-card--places { margin-top:75px; }
.project-card--places .project-card-link { background:#b9d8dc; }
.project-card--places .project-card-image { aspect-ratio:1.2; }
.project-card--places .project-card-label h3 span { display:block; font-size:.63em; margin-top:8px; }
.project-card--culture { grid-column:1 / -1; margin-top:12px; }
.project-card--culture .project-card-link { display:grid; grid-template-columns:1.4fr 1fr; background:var(--v4-ink); color:var(--paper); }
.project-card--culture .project-card-image { height:400px; }
.project-card--culture .project-card-label { padding:35px 40px; display:flex; align-items:start; flex-direction:column; gap:24px; }
.project-card--culture .project-card-label h3 { font-size:clamp(42px,4.8vw,68px); }
.project-card--culture .project-card-label h3 span { display:block; color:var(--v4-lime); }
.project-card--culture .project-card-label p { font-size:16px; }
.project-card--culture .project-card-label svg { margin-left:auto; margin-top:auto; color:var(--v4-lime); }
@media(hover:hover) and (pointer:fine) {
  .project-card-link:hover img { transform:scale(1.035); }
  .project-card-link:hover .project-card-label svg { transform:translate(4px,-4px); }
}
/* A paired documentary sequence supports the message without pretending to be a portrait. */
.maker { position:relative; border-top:1px solid var(--line); padding:100px 0 110px; }
/* A typographic contact poster: the whole coloured panel is an actual link. */
.say-hello { background:var(--v4-ink); color:var(--paper); padding:95px 0 44px; }
.say-hello-heading { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:end; margin-bottom:70px; }
.home-v4 .say-hello h2 { font-size:clamp(110px,14vw,202px); line-height:1.05; color:var(--v4-orange); white-space:nowrap; }
.say-hello-heading h2 span { display:block; padding-left:18%; }
.say-hello-heading > p { padding-bottom:16px; font-size:22px; line-height:1.7; max-width:380px; }
.say-hello-bottom { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:stretch; }
.say-hello-brief { padding-top:8px; }
.say-hello-brief > p { padding:18px 0 24px; border-top:1px solid #74756b; font-family:'Sarabun',sans-serif; font-size:clamp(32px,4.5vw,64px); letter-spacing:-.03em; line-height:1.3; }
.say-hello-brief > p span { margin-left:30px; color:#b7b9a8; }
.say-hello-hint { display:block; font-size:15px; padding-top:9px; color:#c8c9bf; }
.say-hello-action { position:relative; display:flex; flex-direction:column; align-items:start; min-height:285px; padding:28px 32px; background:var(--v4-lime); color:var(--v4-ink); border-radius:16px; transition:background-color 180ms ease-out; }
.say-hello-action > span:first-child { font-size:24px; font-weight:600; }
.say-hello-action svg { width:116px; height:116px; align-self:end; margin-top:25px; transition:transform 300ms var(--ease-out); }
.say-hello-action-note { font-size:14px; margin-top:auto; }
.say-hello-action:hover { background:var(--v4-lilac); }
.say-hello-action:hover svg { transform:translate(5px,-5px); }
.say-hello-action:focus-visible { outline:3px solid var(--paper); outline-offset:6px; }
.say-hello-channels { display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-top:65px; padding-top:28px; border-top:1px solid #74756b; }
.say-hello-channels > span { font-size:14px; color:#c8c9bf; }
.say-hello-channels a { font-size:32px; line-height:1.4; font-weight:500; font-variant-numeric:tabular-nums; }
.say-hello-channels a:hover { color:var(--v4-lime); }
.say-hello-channels > span:last-child { margin-left:auto; }
.home-v4 .site-footer { background:var(--v4-ink); color:var(--paper); padding:40px var(--page-x) 55px; border-top:1px solid #47483f; gap:35px; }
.home-v4 .site-footer__brand strong { font-size:42px; }
.home-v4 .site-footer__brand span { font-size:14px; color:#c8c9bf; }
.home-v4 .site-footer__links a, .home-v4 .site-footer__meta { color:#c8c9bf; }
.home-v4 .site-footer__links a:last-child { color:var(--paper); }
.home-v4 .site-footer__meta { font-size:12px; }
/* Native modal gallery; anchors open their photograph when JavaScript is absent. */
.work-gallery { width:min(1120px,calc(100% - 48px)); max-height:calc(100dvh - 48px); padding:24px; border:0; border-radius:16px; background:var(--paper); color:var(--ink); overflow:auto; }
.work-gallery::backdrop { background:rgba(15,18,13,.91); }
.work-gallery-top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:16px; }
.work-gallery-top h2 { font-size:24px; letter-spacing:-.02em; }
.work-gallery button { display:grid; place-items:center; border:1px solid var(--line); background:none; color:var(--ink); border-radius:50%; width:48px; height:48px; padding:11px; cursor:pointer; }
.work-gallery button:hover { background:var(--v4-lime); }
.work-gallery svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.work-gallery-photo { position:relative; }
.work-gallery-photo img { height:min(62dvh,680px); object-fit:contain; background:#deded5; }
.work-gallery-photo figcaption { font-size:14px; margin-top:10px; min-height:24px; }
.gallery-error { position:absolute; inset:40% 24px auto; padding:20px; background:var(--paper); }
.work-gallery-controls { display:flex; align-items:center; gap:16px; margin-top:16px; }
.work-gallery-controls > span { min-width:50px; text-align:center; font-variant-numeric:tabular-nums; }
.work-gallery-controls > a { margin-left:auto; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
body.gallery-open { overflow:hidden; }
@media(min-width:1700px) { }
@media(max-width:1050px) {
  .workroom-heading { grid-template-columns:1.15fr 1fr; gap:24px; }
  .home-v4 .workroom-heading h2 { font-size:clamp(82px,10.5vw,110px); }
  .workroom-intro { padding-left:0; }
  .workroom-intro p { font-size:16px; }
  .project-card-label { padding:24px; }
  .project-card-label h3 { font-size:38px; }
  .project-card-note { flex-direction:column; gap:4px; }
  .project-card-note > span { max-width:none; text-align:left; }
  .project-card--culture .project-card-image { height:360px; }
  .say-hello-heading { gap:24px; }
  .say-hello-heading > p { font-size:18px; }
  .say-hello-bottom { gap:36px; }
  .say-hello-action { padding:24px; }
  .say-hello-action > span:first-child { font-size:20px; }
}
@media(max-width:700px) {
  .workroom { padding:65px 0 72px; }
  .workroom-heading { display:block; margin-bottom:38px; }
  .home-v4 .workroom-heading h2 { font-size:clamp(82px,20vw,138px); line-height:1.08; }
  .workroom-heading h2 span { padding-left:14%; }
  .workroom-intro { padding:24px 56px 0 0; margin:0; }
  .workroom-intro p { font-size:15px; }
  .workroom-intro p br { display:none; }
  .workroom-intro p + p { font-size:12px; margin-top:12px; }
  .workroom-intro > svg { position:absolute; right:0; top:32px; margin:0; width:38px; height:38px; }
  .workroom-grid { display:flex; flex-direction:column; gap:36px; }
  .project-card { width:100%; margin:0; }
  .project-card-link { border-radius:14px; }
  .project-card-label { padding:21px 24px 24px; }
  .project-card-label h3 { font-size:clamp(36px,9.5vw,58px); }
  .project-card-label svg { width:40px; height:40px; }
  .project-card-note { padding-top:12px; gap:3px; }
  .project-card-note p { font-size:13px; }
  .project-card-note > span { font-size:11px; }
  .project-card--food .project-card-image, .project-card--community .project-card-image { aspect-ratio:1.3; }
  .project-card--people .project-card-label { min-height:105px; }
  .project-card--places .project-card-image { aspect-ratio:1.3; }
  .project-card--culture .project-card-link { display:block; }
  .project-card--culture .project-card-image { height:auto; aspect-ratio:1.3; }
  .project-card--culture .project-card-label { padding:24px; gap:18px; }
  .project-card--culture .project-card-label h3 { font-size:46px; }
  .project-card--culture .project-card-label h3 span { display:inline; margin-left:10px; }
  .project-card--culture .project-card-label p { font-size:14px; }
  .project-card--culture .project-card-label svg { position:absolute; bottom:24px; right:24px; }
  .maker { padding:64px 0 0; }
  .say-hello { padding:64px 0 32px; }
  .say-hello-heading { display:block; margin-bottom:36px; }
  .home-v4 .say-hello h2 { font-size:clamp(106px,25vw,160px); }
  .say-hello-heading > p { margin-top:32px; padding:0; font-size:18px; }
  .say-hello-bottom { display:flex; flex-direction:column; gap:32px; }
  .say-hello-brief > p { font-size:38px; padding:15px 0 20px; }
  .say-hello-brief > p span { margin-left:22px; }
  .say-hello-hint { font-size:13px; }
  .say-hello-action { min-height:230px; padding:24px; }
  .say-hello-action > span:first-child { font-size:25px; }
  .say-hello-action svg { width:100px; height:100px; margin-top:12px; }
  .say-hello-channels { margin-top:36px; padding-top:24px; flex-direction:column; align-items:start; gap:5px; }
  .say-hello-channels a { font-size:34px; }
  .say-hello-channels > span:last-child { margin-left:0; font-size:12px; margin-top:4px; }
  .home-v4 .site-footer { padding:30px var(--page-x) 110px; gap:24px; }
  .home-v4 .site-footer__brand strong { font-size:36px; }
  .home-v4 .site-footer__links { display:none; }
  .home-v4 .site-footer__meta { padding:0; }
  .work-gallery { width:calc(100% - 20px); padding:16px; max-height:calc(100dvh - 20px); }
  .work-gallery-top h2 { font-size:20px; }
  .work-gallery-photo img { height:53dvh; }
  .work-gallery-controls { gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-v4 :is(.project-card-image img,.project-card-label svg,.say-hello-action,.say-hello-action svg) { transition:none; transform:none; }
}

/* Workflow: a fixed editorial introduction beside three edge-to-edge photo cards. */
.home-v4 .workflow {
  position: relative;
  background: #e7f34c;
  color: #20211c;
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-x);
  scroll-margin-top: 90px;
}

.home-v4 .workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4.5rem);
  max-width: 1360px;
  margin-inline: auto;
}

.home-v4 .workflow-intro {
  position: sticky;
  top: 120px;
  padding-block: 1.1rem 2rem;
}

.home-v4 .workflow-intro h2 {
  font-size: clamp(3.2rem, 6.05vw, 5.6rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.04em;
}

.home-v4 .workflow-intro h2 span { display: block; }

.home-v4 .workflow-intro > p {
  max-width: 25ch;
  margin-top: 2rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.8;
}

.home-v4 .workflow-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 54px;
  margin-top: 1.7rem;
  padding-block: .65rem;
  border-bottom: 1px solid currentColor;
  font-size: 1.05rem;
  font-weight: 600;
}

.home-v4 .workflow-link svg {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 180ms ease-out;
}

.home-v4 .workflow-link:hover svg { transform: translate(2px, -2px); }
.home-v4 .workflow-link:focus-visible { outline-color: #20211c; }

.home-v4 .workflow-cards {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-v4 .workflow-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  min-height: 268px;
  width: calc(100% - 2.75rem);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.home-v4 .workflow-card--brief { background: #d7ccff; }
.home-v4 .workflow-card--shoot { background: #ff623e; margin-left: 2.75rem; }
.home-v4 .workflow-card--finish { background: #20211c; color: #f2f0ea; }

.home-v4 .workflow-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.3rem, 2vw, 2rem);
}

.home-v4 .workflow-number {
  display: block;
  font-family: "Sarabun", sans-serif;
  font-size: clamp(3rem, 4.1vw, 4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.home-v4 .workflow-card--finish .workflow-number { color: #e7f34c; }

.home-v4 .workflow-copy h3 {
  font-size: clamp(1.5rem, 2.05vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.4;
  margin-bottom: .5rem;
}

.home-v4 .workflow-copy p {
  font-size: clamp(.96rem, 1.1vw, 1.03rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.home-v4 .workflow-photo {
  position: relative;
  min-width: 0;
  min-height: 100%;
  align-self: stretch;
}

.home-v4 .workflow-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-v4 .workflow-card--brief .workflow-photo img { object-position: right center; }
.home-v4 .workflow-card--shoot .workflow-photo img { object-position: 48% center; }

@media (max-width: 1050px) {
  .home-v4 .workflow-layout { grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); gap: 1.5rem; }
  .home-v4 .workflow-intro h2 { font-size: clamp(3rem, 6.1vw, 4rem); }
  .home-v4 .workflow-card { width: calc(100% - 1rem); min-height: 290px; }
  .home-v4 .workflow-card--shoot { margin-left: 1rem; }
  .home-v4 .workflow-copy { padding: 1.3rem; }
  .home-v4 .workflow-number { margin-bottom: 1.3rem; }
}

@media (max-width: 760px) {
  .home-v4 .workflow { padding-block: 4.25rem 4.75rem; }
  .home-v4 .workflow-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .home-v4 .workflow-intro { position: static; padding: 0; }
  .home-v4 .workflow-intro h2 { font-size: clamp(3.1rem, 11.8vw, 4.65rem); }
  .home-v4 .workflow-intro > p { margin-top: 1.35rem; font-size: 1.05rem; max-width: 31ch; }
  .home-v4 .workflow-link { margin-top: 1rem; }
  .home-v4 .workflow-cards { gap: 1rem; }
  .home-v4 .workflow-card { width: 100%; min-height: 270px; grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); }
  .home-v4 .workflow-card--shoot { margin-left: 0; }
  .home-v4 .workflow-copy { padding: 1.4rem 1.15rem; }
  .home-v4 .workflow-number { font-size: 3rem; margin-bottom: 1.3rem; }
  .home-v4 .workflow-copy h3 { font-size: 1.45rem; line-height: 1.42; }
  .home-v4 .workflow-copy p { font-size: .96rem; line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v4 .workflow-link svg { transition: none; }
}

.workroom-heading h2 span { white-space:nowrap; }
@media(max-width:359px) { .home-v4 .say-hello h2 { font-size:92px; } }
@media(min-width:701px) and (max-width:900px) {
}

/* Capabilities replace the second portfolio listing. */
.home-v4 .workroom-heading h2 { font-size:clamp(78px,8.6vw,124px); line-height:1.25; }
.workroom-heading h2 span { padding-left:8%; }
.workroom-intro > p { max-width:26em; }
.project-card-note { display:block; }
.project-card-note p { max-width:none; font-size:16px; line-height:1.75; }
.project-card-note > span { display:block; max-width:none; text-align:left; margin-top:8px; }
.project-card--food img { object-position:55% 53%; }
.project-card--people .project-card-label h3 span { display:block; font-size:.68em; margin-top:8px; }
.project-card--culture .project-card-label h3 span { display:block; font-size:.82em; margin-top:12px; margin-left:0; }
.home-v4 .maker-heading { line-height:1.15; margin-bottom:62px; }
.maker-heading-intro { display:block; font-size:clamp(26px,3vw,44px); font-weight:400; line-height:1.45; margin-bottom:18px; }
.maker-heading strong { display:block; color:#b63821; font-size:clamp(68px,8vw,115px); font-weight:800; letter-spacing:-.035em; line-height:1.22; }
.maker-heading-end { display:block; font-size:clamp(26px,3vw,44px); font-weight:400; margin-top:14px; }
.maker-story { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:start; }
.maker-story-copy { padding-top:35px; max-width:390px; }
.maker-story-copy > p { font-size:17px; line-height:1.9; }
.maker-story-copy > p + p { margin-top:22px; color:var(--muted); }
.maker-story-location { display:block; border-top:1px solid var(--line); padding-top:20px; margin-top:30px; font-size:14px; }
.maker-photos { position:relative; padding-bottom:2px; }
.maker-photo-wide { aspect-ratio:1.45; overflow:hidden; }
.maker-photo-wide img { object-position:50% 48%; }
.maker-photo-detail { position:relative; width:54%; aspect-ratio:1.28; margin-left:-8%; margin-top:-12%; border:8px solid var(--paper); overflow:hidden; }
.maker-photo-detail img { object-position:51% 50%; }
.maker-photo-caption { position:absolute; right:0; bottom:35px; width:46%; font-size:14px; line-height:1.7; padding-left:24px; border-left:1px solid var(--ink); }
.home-v4 .workflow-card--shoot .workflow-photo img { object-position:52% 45%; }
.home-v4 .workflow-card--finish .workflow-photo img { object-position:54% 46%; }
@media(max-width:1050px) {
 .home-v4 .workroom-heading h2 { font-size:clamp(61px,8vw,84px); }
 .maker-story { grid-template-columns:.8fr 1.2fr; gap:40px; }
 .maker-story-copy { padding-top:0; }
 .maker-story-copy > p { font-size:16px; }
 .maker-photo-caption { bottom:16px; font-size:12px; padding-left:14px; }
}
@media(max-width:700px) {
 .home-v4 .workroom-heading h2 { font-size:clamp(60px,15.8vw,104px); }
 .project-card-note p { font-size:15px; }
 .maker { padding:64px 0 70px; }
 .home-v4 .maker-heading { margin-bottom:32px; }
 .maker-heading-intro { font-size:26px; margin-bottom:18px; }
 .maker-heading strong { font-size:clamp(56px,14.7vw,88px); }
 .maker-heading strong span { display:block; }
 .maker-heading strong wbr { display:none; }
 .maker-heading-end { font-size:26px; margin-top:18px; }
 .maker-story { display:block; }
 .maker-story-copy { max-width:none; margin-bottom:36px; }
 .maker-story-copy > p { font-size:16px; }
 .maker-photos { margin-top:26px; }
 .maker-photo-wide { aspect-ratio:1.15; }
 .maker-photo-detail { margin-left:-8px; width:58%; border-width:6px; margin-top:-10%; }
 .maker-photo-caption { width:40%; bottom:14px; font-size:11px; padding-left:10px; }
}