/* Form & Ease / October 2026. One editorial grid and one responsive type scale.
   Kept separate from content/export styles so integrations retain their contract. */
body.project-detail, body.project-immersive {
  --paper:#f3f3f1; --ink:#111111; --muted:#625a55; --surface:#e8e2de;
  --gold:#968557; --line:#94888040; --content-width:1440px;
  --page-gutter:clamp(22px,5.5vw,80px); --section-space:clamp(64px,8vw,112px);
  --sans:"FE Google Sans",Arial,sans-serif; --serif:var(--sans);
  background:var(--paper); color:var(--ink); font-size:16px; line-height:1.7;
}
html {scroll-padding-top:24px}
body :is(a,button,summary,input,select,textarea):focus-visible {outline:2px solid #968557;outline-offset:5px}
body .skip {z-index:100}
body :is(h1,h2,h3,h4) {text-wrap:balance}
body p {text-wrap:pretty}
body .eyebrow {font-size:11px;line-height:1.7;letter-spacing:.13em;font-weight:500}
body .eyebrow[data-chapter]:before {content:attr(data-chapter);display:inline-block;margin-right:12px;opacity:.65}
html[lang=th] body .eyebrow {letter-spacing:.02em}
body.project-detail .wrap {max-width:var(--content-width);padding-inline:var(--page-gutter)}
body.project-detail .section {padding-block:var(--section-space)}
body.project-detail :is(.intro h2,.section-heading h2,.package-navigation h2,.process-section h2,.contact h2,.faq h2) {
  font-size:clamp(32px,3.7vw,54px);font-weight:400;line-height:1.22;letter-spacing:-.035em;margin:16px 0 24px;
}
html[lang=th] body.project-detail :is(.intro h2,.section-heading h2,.package-navigation h2,.process-section h2,.contact h2,.faq h2) {line-height:1.45;letter-spacing:-.02em}
body.project-detail h2 em {font-style:normal;font-weight:400;color:var(--taupe)}
/* A light, inset navigation gives the photograph a continuous edge. */
body.project-detail .header, body.project-immersive .immersive-header {
  position:absolute;top:24px;left:var(--page-gutter);right:var(--page-gutter);height:76px;
  padding:12px 24px;gap:24px;background:#f3f3f1f5;color:#111111;border:0;
  border-radius:100px;backdrop-filter:blur(16px);box-shadow:0 4px 24px #1111110c;z-index:12;
}
body.project-detail .header .brand, body.project-immersive .immersive-brand {color:#111111;flex-shrink:0}
body.project-detail .header .brand img,body.project-immersive .immersive-brand img {
  content:url('assets/form-ease-logo-horizontal.png?v=3');filter:none;width:174px;height:auto;
}
body.project-detail .header .brand small,body.project-immersive .immersive-brand small {color:#625a55;font-size:10px;margin-left:8px;letter-spacing:.06em}
body.project-detail .header nav a,body.project-immersive .immersive-header nav a {font-size:13px;color:#111111;letter-spacing:0;min-height:44px;display:inline-flex;align-items:center}
body.project-detail .header nav {gap:26px}
body.project-detail .header .nav-actions {gap:16px}
body.project-detail .header #language,body.project-immersive .immersive-header #language {color:#111111;min-width:44px;min-height:44px;padding:8px;background:transparent;border:0;font-size:13px}
body.project-detail .header .nav-contact {border:0;background:#111111;color:#f3f3f1;border-radius:100px;padding:10px 19px;font-size:13px}
body.project-detail .header .menu-toggle span {background:#111111}
body.project-detail .project-context {display:flex;position:absolute;top:124px;left:0;right:0;z-index:3;color:#f3f3f1;font-size:12px;padding-block:0}
body.project-detail .project-context>span {display:none}
body.project-detail .project-context a {min-height:44px;display:inline-flex;align-items:center;color:#f3f3f1}
/* Photo-led opening: a quiet title, readable copy and one primary action. */
body.project-detail .hero,body.project-immersive .immersive-hero {min-height:760px;height:min(940px,100svh);max-height:none;background:#111111}
body.project-detail .hero-image:after,body.project-immersive .immersive-shade {
  background:linear-gradient(90deg,#111111b5 0%,#11111166 42%,#11111108 80%),linear-gradient(0deg,#1111117a,transparent 46%);
}
body.project-detail .hero-copy {
  max-width:var(--content-width);padding:178px var(--page-gutter) 124px;margin:auto;min-height:100%;justify-content:center;
}
body.project-detail .hero h1,html[lang=th] body.project-detail .hero h1 {
  font-size:clamp(64px,7.1vw,102px);line-height:1.07;letter-spacing:-.055em;max-width:640px;margin:24px 0;
}
body.project-detail .hero h1 em {font-weight:300;color:#f3f3f1;font-style:normal}
body.project-detail .hero-copy>p {max-width:435px;font-size:16px;line-height:1.85;color:#f3f3f1e8;margin-bottom:28px}
body.project-detail .hero .eyebrow {color:#f3f3f1d9}
body.project-detail .hero-note {margin-top:24px;font-size:12px;color:#f3f3f1c9}
body.project-detail .hero-image figcaption {right:var(--page-gutter);bottom:62px;max-width:250px}
body.project-detail .hero-image figcaption .eyebrow {font-size:10px}
body.project-detail .hero-image figcaption>div>span:last-child {font-size:16px}
body.project-detail .hero-controls {bottom:18px}
body.project-immersive .immersive-copy {left:var(--page-gutter);right:var(--page-gutter);bottom:172px;max-width:950px}
body.project-immersive .immersive-copy h1,html[lang=th] body.project-immersive .immersive-copy h1 {
  font-size:clamp(64px,8.6vw,124px);line-height:1.07;font-weight:400;letter-spacing:-.055em;margin:24px 0;color:#f3f3f1;
}
html[lang=th] body.project-immersive .immersive-copy h1 {font-size:clamp(56px,6.8vw,94px);line-height:1.26}
body.project-immersive .immersive-copy h1 em {color:#f3f3f1;font-style:normal;font-weight:300}
body.project-immersive .immersive-copy p {max-width:440px;font-size:16px;line-height:1.85}
body.project-immersive .immersive-enter {right:var(--page-gutter);bottom:64px;background:#f3f3f1;color:#111111;border:0;backdrop-filter:none;padding:16px 26px}
body.project-immersive .immersive-enter>span:last-child {font-size:14px;transform:none}
body.project-immersive .scroll-cue {left:var(--page-gutter);bottom:68px}
/* Directory: introduction -> project. Packages stay inside their project. */
.studio-introduction {max-width:1440px;margin:auto;padding:var(--section-space) var(--page-gutter);display:grid;grid-template-columns:1fr 1fr;gap:28px 9%}
.studio-introduction>.eyebrow {grid-column:1/-1;color:var(--muted)}
.studio-introduction h2 {font-size:clamp(32px,3.7vw,54px);line-height:1.25;letter-spacing:-.035em;margin:0}
.studio-introduction h2 em {color:var(--taupe);font-style:normal}
html[lang=th] .studio-introduction h2 {line-height:1.5}
.studio-introduction p {font-size:17px;margin:0 0 24px;max-width:490px}
.studio-action {display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:100px;background:#111111;color:#f3f3f1;font-size:14px}
body.project-immersive .project-rail {padding:0 var(--page-gutter) var(--section-space);max-width:1440px;margin:auto}
body.project-immersive .rail-heading {display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:9%;padding:0 0 32px;border:0}
.rail-heading h2 {font-size:clamp(30px,3vw,44px);line-height:1.25;margin:0;letter-spacing:-.03em}
body.project-immersive .rail-project {grid-template-columns:1.25fr 1fr;align-items:center;border:0;padding:0;gap:9%}
body.project-immersive .rail-project figure {aspect-ratio:5/4;border-radius:2px 2px 100px 2px}
body.project-immersive .rail-project h2 {font-size:clamp(42px,5.4vw,76px);line-height:1.08;letter-spacing:-.045em;margin-bottom:24px}
body.project-immersive .rail-project h2 em {font-style:normal;color:var(--taupe)}
body.project-immersive .rail-project p {font-size:16px;line-height:1.7;max-width:300px;margin-bottom:28px}
body.project-immersive .rail-project .text-action {border:0;background:#111111;color:#f3f3f1;padding:13px 24px}
body.project-immersive .rail-footer {border-top:1px solid var(--line);margin-top:44px;padding-top:24px;align-items:center;font-size:13px}
body.project-immersive .immersive-footer {padding:36px var(--page-gutter);background:#444444}
/* Approach and collection overview use the same baseline and section scale. */
body.project-detail .promise-strip {border:0;padding-block:28px;font-size:12px;gap:24px}
body.project-detail .promise-strip span {font-size:12px}
body.project-detail .intro {grid-template-columns:1fr 1fr;gap:32px 9%;align-items:start}
body.project-detail .intro h2 {margin-bottom:0}
body.project-detail .intro-copy {padding:22px 0 0;grid-column:2;grid-row:1/3}
body.project-detail .intro-copy .lead {font-size:clamp(20px,2.2vw,28px);line-height:1.6;margin-bottom:24px}
body.project-detail .intro-copy>p:not(.lead) {font-size:16px;line-height:1.85}
body.project-detail .approach-image {grid-column:1;grid-row:2;margin:0;width:85%}
body.project-detail .approach-image img {height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px 2px 64px 2px}
body.project-detail .delivery-home {background:var(--surface);padding:var(--section-space) max(var(--page-gutter),calc((100vw - var(--content-width))/2 + var(--page-gutter)))}
body.project-detail .package-navigation {align-items:end;margin-bottom:48px;padding:0;border:0;gap:28px}
body.project-detail .package-navigation h2 {margin-bottom:0}
body.project-detail .package-navigation h2 em {color:#625a55}
body.project-detail .delivery-home-grid {gap:72px}
body.project-detail .delivery-home-grid article {grid-template-columns:1.2fr 1fr;gap:9%;align-items:center}
body.project-detail .delivery-home-grid .collection-essential {grid-template-columns:1fr 1.2fr}
body.project-detail .delivery-home-grid figure,body.project-detail .delivery-home-grid .collection-essential figure {aspect-ratio:4/3;overflow:hidden;border-radius:2px}
body.project-detail .delivery-home-grid article>div:before {display:none}
body.project-detail .delivery-home h3 {font-size:clamp(44px,5.1vw,72px);line-height:1.12;font-weight:400;margin:14px 0 22px}
body.project-detail .delivery-home h3 span {font-size:13px;letter-spacing:.12em;margin-top:10px}
body.project-detail .delivery-home-grid .collection-method {font-size:18px;margin-bottom:6px}
body.project-detail .delivery-home-grid article p {font-size:15px;line-height:1.85;max-width:390px}
body.project-detail .collection-timing {font-size:14px!important;margin-bottom:20px}
body.project-detail .delivery-agreement {margin-top:48px;padding-top:24px;grid-template-columns:1fr 2fr;gap:12px 9%}
body.project-detail .delivery-agreement h4 {font-size:14px}
body.project-detail .delivery-agreement .delivery-conditions {font-size:13px!important;line-height:1.85!important}
/* Connected collection headings: number, title and copy belong to one group. */
body.project-detail .collections>.section-heading {max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:9%;margin-bottom:44px;align-items:end}
body.project-detail .collections>.section-heading h2 {font-size:clamp(28px,3vw,42px);margin:12px 0 0;line-height:1.3}
body.project-detail .collections>.section-heading>p {font-size:15px;max-width:380px;margin:0}
body.project-detail .comparison {margin:0;padding:0 0 44px;border:0;background:transparent}
body.project-detail .delivery-group-heading {display:grid;grid-template-columns:1fr 1fr;gap:9%;max-width:none;align-items:end;margin:0 0 24px;padding:0}
body.project-detail .delivery-group-heading h3 {font-size:clamp(30px,3.2vw,44px);margin:6px 0 10px;line-height:1.2;font-weight:400}
body.project-detail .delivery-group-heading>div:first-child:before {content:attr(data-chapter);display:block;font-size:11px;color:var(--muted);letter-spacing:.1em;margin-bottom:12px}
body.project-detail .delivery-group-heading .collection-timing {margin:0}
body.project-detail .delivery-group-copy h4 {font-size:15px;margin:0 0 6px;font-weight:500}
body.project-detail .delivery-group-copy p {font-size:14px;line-height:1.85;margin:0;max-width:480px}
body.project-detail .delivery-collection {margin:0 0 64px}
body.project-detail .delivery-60 .comparison-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.project-detail .comparison-grid .comparison-card:last-child {width:auto;grid-column:auto;justify-self:stretch}
body.project-detail .comparison-visual {aspect-ratio:4/5;border-radius:2px;border:0;box-shadow:none;position:relative}
body.project-detail .comparison-visual img {aspect-ratio:auto;height:100%;width:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1)}
body.project-detail .comparison-card:hover .comparison-visual img {transform:scale(1.025)}
body.project-detail .comparison-label {padding:24px 20px 42px;background:linear-gradient(transparent,#111111b8);display:block}
body.project-detail .comparison-label span {font-size:10px;letter-spacing:.03em;line-height:1.5}
body.project-detail .comparison-label span:after {display:none}
body.project-detail .comparison-grid .comparison-label h3 {font-size:clamp(25px,2.3vw,34px);line-height:1.2;margin:10px 0 0;color:#f3f3f1}
body.project-detail .comparison-summary {font-size:13px;line-height:1.85;min-height:5.5em;margin:20px 0 16px}
body.project-detail .comparison-grid .comparison-actions {display:flex;gap:8px 14px;border:0;padding:0;margin:0;flex-wrap:wrap}
body.project-detail .comparison .compare-view {min-height:44px;font-size:13px;border:0;border-radius:100px;padding:10px 20px;box-shadow:none}
body.project-detail .comparison :is(.tour-button,.compare-enquiry) {min-height:44px;font-size:12px;gap:7px}
body.project-detail .comparison :is(.tour-button,.compare-enquiry):before {width:30px;height:30px;flex-basis:30px;font-size:10px}
body.project-detail .comparison .compare-enquiry:before {font-size:14px}
body.project-detail .delivery-30 .comparison-grid {display:block}
body.project-detail .delivery-30 .comparison-card {display:grid;grid-template-columns:1.2fr 1fr;gap:0 9%;align-items:center}
body.project-detail .delivery-30 .comparison-visual {grid-column:1;grid-row:1/3;aspect-ratio:4/3}
body.project-detail .delivery-30 .comparison-summary {grid-column:2;margin:0 0 24px;align-self:end;min-height:0;font-size:16px}
body.project-detail .delivery-30 .comparison-actions {grid-column:2;align-self:start}
body.project-detail .package-notes {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:8px;padding-top:28px}
body.project-detail .package-notes h4 {font-size:15px;line-height:1.6;margin-bottom:8px}
body.project-detail .package-notes article p {font-size:13px;line-height:1.85}
body.project-detail #collection-content .inline-tour-header {display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 0;border-top:1px solid var(--line);align-items:end}
body.project-detail #collection-content .tour-heading h3 {font-size:clamp(28px,3vw,40px);line-height:1.3}
body.project-detail .tour-package-picker {display:block;margin-left:0;max-width:100%}
body.project-detail .tour-package-label {font-size:12px;margin-bottom:8px}
body.project-detail .tour-option-nav {display:flex;flex-wrap:wrap;gap:8px 16px;border:0}
body.project-detail .tour-option {min-height:44px;padding:8px 0;min-width:0}
body.project-detail .tour-option strong {font-size:13px;line-height:1.5;letter-spacing:0}
body.project-detail .tour-option[aria-pressed=true]:after {left:0;right:0}
body.project-detail .collection-thumbs {gap:12px}
body.project-detail .furniture-list {border-inline:0}
body.project-detail .furniture-grid article {background:transparent;border:0;box-shadow:none;min-width:0}
body.project-detail .furniture-grid img {object-fit:contain}
body.project-detail .furniture-grid h3 {font-size:14px;line-height:1.6}
/* A concise comparison, followed by the service journey and enquiry. */
body.project-detail .package-comparison {max-width:calc(var(--content-width) - var(--page-gutter)*2);width:calc(100% - var(--page-gutter)*2);padding:0;margin:0 auto var(--section-space);border:0;background:transparent}
body.project-detail .comparison-intro {gap:20px 9%;margin-bottom:32px}
body.project-detail .comparison-intro h2 {font-size:clamp(28px,3vw,42px);line-height:1.3}
body.project-detail .package-comparison thead th {font-size:26px;border:0;border-bottom:2px solid #111111;padding:18px 20px}
body.project-detail .package-comparison thead th:first-child {font-size:12px}
body.project-detail .package-comparison thead th:last-child {border-bottom-color:#968557;color:#806f43}
body.project-detail .package-comparison tbody th,body.project-detail .package-comparison tbody td {padding:16px 20px;font-size:14px;line-height:1.8}
body.project-detail .package-comparison tbody td:nth-child(2) {background:#e9f6fd70!important}
body.project-detail .package-comparison tbody td:last-child {background:#e8e2de60!important}
body.project-detail .comparison-footnote {font-size:12px;line-height:1.9}
body.project-detail .process-section {background:#444444;padding-block:var(--section-space)}
body.project-detail .process-section h2 {font-size:clamp(32px,3.7vw,54px)}
body.project-detail .steps.process-six {gap:36px 48px;margin-top:44px}
body.project-detail .steps.process-six li {padding-top:22px;gap:20px;border-top:1px solid #f3f3f140}
body.project-detail .steps.process-six li>span {font-size:16px;line-height:1.7;color:#e9f6fd}
body.project-detail .steps h3 {font-size:18px;font-weight:500;line-height:1.6}
body.project-detail .steps p {font-size:14px;line-height:1.85;color:#f3f3f1da}
body.project-detail .process-note {font-size:12px;color:#f3f3f1c9}
body.project-detail .contact {max-width:none;width:100%;background:linear-gradient(90deg,#111111e8,#111111a3),url('assets/collections/option-3-room-2.webp') center/cover;align-items:center;gap:9%;padding-inline:max(var(--page-gutter),calc((100vw - var(--content-width))/2 + var(--page-gutter)));}
body.project-detail .contact h2 em {color:#f3f3f1c9}
body.project-detail .contact-card {padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
body.project-detail .contact-card h3 {font-size:26px;line-height:1.5}
body.project-detail .contact-card p {font-size:15px;line-height:1.85}
body.project-detail .contact-email {background:transparent;border:0;border-radius:0;justify-content:flex-start;padding:10px 0;font-size:16px;box-shadow:none}
body.project-detail .contact-email:hover {background:transparent;color:white;text-decoration:underline;text-underline-offset:6px}
body.project-detail .faq {grid-template-columns:1fr 1.2fr;gap:9%}
body.project-detail .faq-list summary {font-size:16px;font-weight:500;padding:22px 24px 22px 0}
body.project-detail .faq-list p {font-size:14px;line-height:1.9}
body.project-detail .footer {max-width:none;width:100%;padding:40px max(var(--page-gutter),calc((100vw - var(--content-width))/2 + var(--page-gutter)));background:var(--surface)}
body.project-detail .footer .brand img {filter:none;content:url('assets/form-ease-logo-horizontal.png?v=3')}
body :is(.hero .button.dark,.delivery-link,.studio-action,.contact-card .button.dark,.text-action) {transition:background .2s,color .2s,transform .2s}
body.project-detail .hero .button.dark {background:#f3f3f1;color:#111111;border:0;padding:14px 26px;border-radius:100px;box-shadow:none;font-size:14px;width:fit-content}
body.project-detail .delivery-link {background:#111111!important;box-shadow:none;font-size:14px;padding:12px 24px}
body.project-detail .comparison-jump {border:0;background:#f3f3f1;box-shadow:none;padding:12px 22px;border-radius:100px;font-size:13px;white-space:nowrap}
body.project-detail .text-link {border:1px solid var(--line);box-shadow:none;font-size:14px;padding:12px 24px}
body.project-detail .contact-card .button.dark {background:#f3f3f1;border:0;color:#111111;padding:14px 24px;font-size:14px;box-shadow:none}
body.project-detail .inline-tour-stage>.collection-enquiry {position:static;font-size:14px!important;box-shadow:none;background:#111111!important;color:#f3f3f1!important;padding:12px 24px;margin-top:16px!important}
body .company-identity {font-size:12px;line-height:1.9;gap:8px 32px}
.fe-enquiry {background:#f3f3f1;color:#111111;border-color:#94888040;border-radius:18px;padding:32px;box-shadow:0 24px 80px #11111130}
.fe-enquiry h2 {font-size:clamp(28px,3vw,40px);line-height:1.4;letter-spacing:-.03em}
.fe-enquiry p {font-size:14px;line-height:1.8}
.fe-enquiry-fields :is(input,select,textarea) {font-size:16px;background:#ffffff90;border:1px solid #94888060;border-radius:6px;color:#111111}
.fe-enquiry-submit {background:#111111;color:#f3f3f1;min-height:48px;font-size:15px}
.fe-enquiry-close {min-width:44px;min-height:44px}
#image-dialog {width:fit-content;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:0;background:transparent;color:#f3f3f1;overflow:visible;box-shadow:none}
#image-dialog::backdrop {background:#111111e6;backdrop-filter:blur(5px)}
#image-dialog #close-image {position:absolute;top:12px;right:12px;z-index:10;width:44px;height:44px;min-height:44px;border:1px solid #f3f3f199;border-radius:50%;background:#111111c9;color:#f3f3f1;font-size:26px;line-height:1;padding:0;display:grid;place-items:center;cursor:pointer}
#image-dialog #close-image:hover {background:#111111;color:#ffffff}
#image-dialog #close-image:focus-visible {outline:2px solid #e5d6a8;outline-offset:3px}
#image-dialog .dialog-visual {position:relative;width:fit-content;max-width:100%;margin:0 auto;isolation:isolate;overflow:hidden;border-radius:10px}
#image-dialog .dialog-visual::before {content:'';position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(transparent,#111111cc);z-index:1;pointer-events:none}
#image-dialog #expanded-image {display:block;height:auto;width:auto;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);margin:0;object-fit:contain}
#image-dialog #image-caption {position:absolute;left:16px;right:16px;bottom:34px;z-index:2;color:#f3f3f1;font-size:13px;font-weight:500;line-height:1.6;margin:0;text-shadow:0 1px 8px #11111180;pointer-events:none}
#image-dialog .dialog-visual>.visual-note {z-index:2;right:16px;bottom:12px;font-size:clamp(7px,.7vw,10px);max-width:calc(100% - 32px);color:#f3f3f1;line-height:1.5}
#image-dialog .dialog-visual[data-image-ready=false] :is(#image-caption,.visual-note){visibility:hidden}
@media(max-width:600px){#image-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}#image-dialog #expanded-image{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}#image-dialog #close-image{top:10px;right:10px}#image-dialog #image-caption{left:12px;right:12px;bottom:30px;font-size:12px}#image-dialog .dialog-visual>.visual-note{right:12px;bottom:10px;max-width:calc(100% - 24px)}}
body:has(#image-dialog[open],.fe-enquiry[open]) {overflow:hidden}
body :is(.visual-note,.delivery-image-note) {font-size:clamp(8px,.7vw,10px);right:12px;bottom:12px;color:#ffffffd9;line-height:1.5;max-width:calc(100% - 24px);white-space:nowrap}
body.project-detail .hero-image>.visual-note {bottom:12px}
body.project-detail .approach-image>.visual-note {bottom:44px;font-size:8px}
body.project-detail .comparison-visual>.visual-note {font-size:clamp(7px,.65vw,9px)}
/* Decorative only: the page remains usable even during the entrance. */
.brand-arrival {position:fixed;inset:0;z-index:50;background:#f3f3f1;display:grid;place-items:center;overflow:hidden;pointer-events:none;animation:brand-away 1.85s cubic-bezier(.7,0,.2,1) both}
.brand-arrival .arrival-mark {position:relative;width:min(340px,72vw);animation:brand-settle .7s cubic-bezier(.2,.65,.3,1) both}
.brand-arrival img {display:block;width:100%;height:auto;animation:brand-ink .7s cubic-bezier(.2,.65,.3,1) both}
.brand-arrival small {display:block;margin:14px 0 0 4.7767%;font-size:clamp(11px,1vw,13px);color:#625a55;letter-spacing:.05em;animation:brand-tag .55s .35s ease both}
.arrival-curves{position:absolute;inset:0;width:100%;height:100%;animation:arrival-flow 1.85s ease both}
.arrival-thread{stroke-dasharray:1600;stroke-dashoffset:1600;animation:arrival-thread 1.4s .1s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes brand-away {0%,65%{opacity:1;clip-path:inset(0)}100%{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0 round 0 0 42% 0)}}
@keyframes brand-settle {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes brand-ink {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes brand-tag {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes arrival-flow {from{transform:scale(1.08) translateX(2%)}to{transform:scale(1) translateX(0)}}
@keyframes arrival-thread {to{stroke-dashoffset:0}}
@media(min-width:1700px){body.project-immersive .immersive-copy{left:max(var(--page-gutter),calc((100vw - 1280px)/2))}}
@media(max-width:1100px){body.project-detail .header nav{gap:16px}body.project-detail .header{gap:16px;padding-inline:20px}body.project-detail .header .nav-contact{display:none}body.project-detail .delivery-60 .comparison-grid{gap:18px}body.project-detail .comparison-summary{min-height:7em}}
@media(max-width:900px){body.project-detail .header nav{display:none;position:absolute;top:86px;left:0;right:0;background:#f3f3f1;border-radius:22px;padding:16px 22px;color:#111111;box-shadow:0 12px 30px #11111120}body.project-detail .header nav.open{display:flex;flex-direction:column;gap:0}body.project-detail .header .menu-toggle{display:block}body.project-detail .header .nav-actions{margin-left:auto}body.project-detail .header{height:70px}body.project-detail .delivery-60 .comparison-grid{grid-template-columns:1fr 1fr}body.project-detail .comparison-grid .comparison-card:last-child{grid-column:auto;width:auto}body.project-detail .delivery-60 .comparison-card:last-child{grid-column:1/-1;max-width:calc((100% - 18px)/2)}body.project-detail .comparison-summary{min-height:0}}
@media(max-width:760px){
  body.project-detail,body.project-immersive{--page-gutter:24px;--section-space:64px}
  body.project-detail .header,body.project-immersive .immersive-header{top:16px;left:16px;right:16px;padding:12px 18px;height:70px;gap:12px}
  body.project-detail .header .brand img,body.project-immersive .immersive-brand img{width:154px}
  body.project-detail .header .brand small,body.project-immersive .immersive-brand small{font-size:9px;margin-left:7px}
  body.project-detail .project-context{top:103px}
  body.project-immersive .immersive-header nav{gap:4px}
  body.project-immersive .immersive-header nav a{font-size:12px}
  body.project-immersive .immersive-header nav a[href^="mailto"]{display:none}
  body.project-detail .hero,body.project-immersive .immersive-hero{height:auto;min-height:780px}
  body.project-detail .hero-copy{padding:150px 24px 160px;min-height:780px;justify-content:center}
  body.project-detail .hero h1,html[lang=th] body.project-detail .hero h1{font-size:clamp(54px,14vw,80px);line-height:1.1;max-width:100%;margin:24px 0}
  body.project-detail .hero-copy>p{font-size:15px;line-height:1.85;max-width:420px}
  body.project-detail .hero-image:after,body.project-immersive .immersive-shade{background:linear-gradient(90deg,#111111b5,#11111150),linear-gradient(0deg,#111111aa,transparent 80%)}
  body.project-detail .hero-image figcaption{bottom:72px;left:24px;right:24px;max-width:none;text-align:left}
  body.project-detail .hero-image figcaption>div>span:last-child{font-size:13px}
  body.project-detail .hero-image>.visual-note{bottom:52px;font-size:8px}
  body.project-immersive .immersive-copy{bottom:180px;left:24px;right:24px}
  body.project-immersive .immersive-copy h1{font-size:clamp(56px,14vw,80px);line-height:1.12}
  html[lang=th] body.project-immersive .immersive-copy h1{font-size:clamp(42px,11.5vw,68px);line-height:1.35}
  body.project-immersive .immersive-copy p{font-size:15px;line-height:1.85;max-width:390px}
  body.project-immersive .immersive-enter{left:24px;right:auto;bottom:86px;max-width:calc(100% - 48px);font-size:13px;padding:14px 22px}
  body.project-immersive .scroll-cue{bottom:32px;left:24px}
  .studio-introduction{grid-template-columns:1fr;gap:20px}
  .studio-introduction h2{font-size:34px}.studio-introduction p{font-size:15px}
  body.project-immersive .rail-heading{grid-template-columns:1fr;gap:16px}
  .rail-heading h2{font-size:30px}
  body.project-immersive .rail-project{grid-template-columns:1fr;gap:28px}
  body.project-immersive .rail-project figure{border-bottom-right-radius:64px;aspect-ratio:4/3}
  body.project-immersive .rail-project h2{font-size:46px}
  body.project-immersive .rail-project p{margin-bottom:24px}
  body.project-immersive .rail-footer{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:36px}
  body.project-detail .promise-strip{grid-template-columns:1fr 1fr;gap:14px 20px;padding-block:24px}
  body.project-detail .intro{grid-template-columns:1fr;gap:28px}
  body.project-detail .intro-copy,body.project-detail .approach-image{grid-column:1;grid-row:auto;padding:0;margin:0;width:100%}
  body.project-detail .intro-copy .lead{font-size:22px}
  body.project-detail .intro-copy>p:not(.lead){font-size:15px}
  body.project-detail .package-navigation{flex-direction:column;align-items:start;gap:24px;margin-bottom:32px}
  body.project-detail .delivery-home-grid article,body.project-detail .delivery-home-grid .collection-essential{grid-template-columns:1fr;gap:28px}
  body.project-detail .delivery-home-grid .collection-essential figure,body.project-detail .delivery-home-grid .collection-essential>div{grid-row:auto;grid-column:1}
  body.project-detail .delivery-home h3{font-size:48px}
  body.project-detail .delivery-home-grid{gap:56px}
  body.project-detail .delivery-agreement{grid-template-columns:1fr;gap:12px;margin-top:36px}
  body.project-detail .delivery-agreement>a{grid-column:1}
  body.project-detail .collections>.section-heading{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  body.project-detail .delivery-group-heading{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
  body.project-detail .delivery-group-heading h3{font-size:32px}
  body.project-detail .delivery-30 .comparison-card{display:block}
  body.project-detail .delivery-30 .comparison-summary{margin:20px 0;font-size:14px}
  body.project-detail .delivery-60 .comparison-grid{grid-template-columns:1fr;gap:36px}
  body.project-detail .delivery-60 .comparison-card:last-child{grid-column:auto;max-width:none}
  body.project-detail .comparison-visual{aspect-ratio:4/3}
  body.project-detail .comparison-summary{min-height:0;font-size:14px}
  body.project-detail .comparison-grid .comparison-label h3{font-size:30px}
  body.project-detail .comparison-visual>.visual-note{font-size:8px}
  body.project-detail .comparison-grid .comparison-actions{gap:8px 16px}
  body.project-detail .package-notes{grid-template-columns:1fr;gap:24px}
  body.project-detail #collection-content .inline-tour-header{grid-template-columns:1fr;gap:24px}
  body.project-detail .tour-package-picker{width:100%}
  body.project-detail .tour-option-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;width:100%}
  body.project-detail .tour-option{justify-content:start;padding:10px 0}
  body.project-detail .comparison-intro{grid-template-columns:1fr;gap:16px}
  body.project-detail .package-comparison{padding:0;width:calc(100% - 48px)}
  body.project-detail .package-comparison :is(th,td){padding:12px 10px}
  body.project-detail .package-comparison thead th{font-size:22px;padding:16px 10px}
  body.project-detail .steps.process-six{grid-template-columns:1fr;gap:24px;margin-top:32px}
  body.project-detail .contact,body.project-detail .faq{grid-template-columns:1fr;gap:32px}
  body.project-detail .contact-card{padding-top:28px;border-top:1px solid #f3f3f140}
  body.project-detail .contact h2{font-size:34px}
  body.project-detail .footer{padding:32px 24px}
  .fe-enquiry{padding:24px 20px;border-radius:14px}
  body .company-identity{grid-template-columns:1fr;font-size:12px;gap:6px}
}
@media(max-width:360px){body.project-detail .header .brand img,body.project-immersive .immersive-brand img{width:138px}body.project-detail .header .nav-actions{gap:4px}body.project-detail .hero h1,html[lang=th] body.project-detail .hero h1{font-size:48px}body.project-immersive .immersive-copy h1{font-size:50px}html[lang=th] body.project-immersive .immersive-copy h1{font-size:38px}body.project-detail .comparison-grid .comparison-label h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.brand-arrival{display:none}body *,body *:before,body *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.project-detail .comparison-card:hover .comparison-visual img{transform:none}}