/* ============================================================
   DAP — "Brief & Pillars" (16 Oct 2026). Loaded after styles.css and refresh.css.

   DAP and its sister firm YACT share a navy base, so the two sites differ in structure:
   YACT is horizontal and soft (wave edges, ribbons, warm ivory paper); DAP is vertical,
   straight-edged and cool. Every homepage section hangs off a red margin rule (the bar
   from the logo, read as the margin of a legal brief); the partners stand as pillars.
   Light bands are a cool pearl, never cream. Red is a signal, used sparingly.
   ============================================================ */
:root{
  --night:#0A1029;          /* hero, the one dark band, footer, dock */
  --pearl:#EEF0F5;          /* cool light band (YACT uses warm ivory, DAP does not) */
  --pewter:#AEB5C8;         /* secondary text on night */
  --rule:rgba(16,23,48,.12);/* hairlines on light */
  --rule-d:rgba(255,255,255,.14);
  --margin-w:200px;
  --margin-gap:56px;
  --open:#4FB286;           /* the office-hours dot, and nothing else */
}

/* ---------- motion vocabulary: one load sequence, plus responses to the reader ---------- */
@keyframes lx-rule{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lx-line{
  from{opacity:0;transform:translateY(.55em);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(-40% -6% -40% -6%)}
}
@keyframes lx-rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes lx-fade{from{opacity:0}to{opacity:1}}
@keyframes lx-panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- shared link treatment: a hairline that turns red from the left ---------- */
.lx-textlink{
  display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;color:var(--navy-900);
  background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 10px)/0 1px no-repeat,
             linear-gradient(var(--rule),var(--rule)) 0 calc(100% - 10px)/100% 1px no-repeat;
  transition:background-size .45s var(--ease),color .25s;
}
.lx-textlink:hover,.lx-textlink:focus-visible{background-size:100% 1px,100% 1px;color:var(--red)}

/* ---------- header: condenses once the reader is into the page ---------- */
.nav .container{transition:height .35s var(--ease)}
.nav-logo img{transition:height .35s var(--ease)}
.nav.compact .container{height:66px}
.nav.compact .nav-logo img{height:36px}
[data-office-status][data-state=open] svg{fill:var(--open)}

/* ============================================================
   HOME — hero with three pillars
   ============================================================ */
.lx-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--night)}
/* the Bangkok skyline (.hero-bg, original styles.css rule with its slow Ken Burns drift) sits
   behind; this layer darkens it under the text and draws the column lines on top */
.lx-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%,
    linear-gradient(98deg,rgba(10,16,41,.96) 0%,rgba(10,16,41,.88) 40%,rgba(10,16,41,.55) 72%,rgba(10,16,41,.62) 100%),
    linear-gradient(0deg,rgba(10,16,41,.85) 0%,rgba(10,16,41,0) 30%);
}
.lx-hero>.container{padding-top:72px;padding-bottom:132px}   /* room for the stats card that overlaps the foot */
.lx-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:52px;align-items:end}
.home-hero .lx-hero-grid{grid-template-columns:minmax(0,1fr)}
.home-hero .lx-hero-copy{max-width:800px}
.home-hero h1{font-size:clamp(42px,4.4vw,64px)}
.team-hero>.container{padding-top:52px;padding-bottom:64px}
.team-hero .lx-hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:42px}
.team-hero .lx-hero-copy{padding-bottom:24px}
.team-hero .lx-hero-copy::before{bottom:24px}
.team-hero .pillars{height:clamp(420px,min(43vw,calc(100svh - 270px)),590px)}
.team-hero .pillar-role{max-height:4.5em;opacity:1}
.team-hero .lx-textlink{gap:12px;white-space:nowrap}
.team-hero .lx-textlink svg{width:16px;height:16px;flex:none;fill:currentColor}
.lx-hero-copy{position:relative;padding:12px 0 64px 34px;align-self:center}
.lx-hero-copy::before{
  content:"";position:absolute;left:0;top:6px;bottom:64px;width:3px;background:var(--red);
  transform-origin:top;animation:lx-rule .9s var(--ease) both;
}
.lx-firm{font-family:'Marcellus',serif;font-size:15px;letter-spacing:.06em;color:var(--pewter);animation:lx-fade .8s .1s both}
.lx-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.8vw,56px);line-height:1.34;letter-spacing:-.015em;margin:20px 0 24px}
.lx-hero h1 .ln{display:block}
.lx-hero h1 .ln>span{display:block;animation:lx-line .95s var(--ease) both}
.lx-hero h1 .ln:nth-child(1)>span{animation-delay:.25s}
.lx-hero h1 .ln:nth-child(2)>span{animation-delay:.37s}
.lx-hero h1 .ln:nth-child(3)>span{animation-delay:.49s}
.lx-hero-sub{color:#CED2DF;font-size:17px;line-height:1.95;max-width:34em;animation:lx-fade .9s .65s both}
.lx-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:32px;animation:lx-fade .9s .75s both}
.lx-hero .btn{padding:16px 26px}
.lx-hero .lx-textlink{color:#fff;background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 10px)/0 1px no-repeat,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) 0 calc(100% - 10px)/100% 1px no-repeat}
.lx-hero .lx-textlink:hover,.lx-hero .lx-textlink:focus-visible{color:#fff;background-size:100% 1px,100% 1px}

/* the office-hours line (hero, dock, footer); the state is set by js/main.js */
.office-now{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:13.5px;color:var(--pewter);line-height:1.6;animation:lx-fade .9s .85s both}
.office-dot{width:8px;height:8px;border-radius:50%;background:#6B7389;flex:none}
[data-state=open] .office-dot{background:var(--open);box-shadow:0 0 0 4px rgba(79,178,134,.18)}

/* pillars: equal columns standing at the foot of the hero; the open one widens */
.pillars{display:flex;gap:10px;height:clamp(460px,44vw,600px)}
.pillar{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--navy-800);
  transition:flex-grow .75s var(--ease);
  animation:lx-rise 1s var(--ease) both;animation-delay:calc(.45s + var(--i) * .12s);
}
.pillar.is-open{flex-grow:2.2}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.pillar.is-open::before{transform:scaleX(1)}
.pillar::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,41,0) 42%,rgba(10,16,41,.55) 68%,rgba(10,16,41,.96) 100%)}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;opacity:.72;transition:opacity .6s,transform 1.2s var(--ease)}
.pillar.is-open img{opacity:1;transform:scale(1.025)}
.pillar-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 24px}
/* Closed portraits show the name; hover or keyboard focus reveals the co-founder title. */
.pillar-role{font-size:12.5px;color:#C9CEDC;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.pillar.is-open .pillar-role{max-height:4.5em;opacity:1}
.pillar h2{font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:1.45;margin-top:4px;word-break:keep-all;overflow-wrap:anywhere;transition:font-size .5s var(--ease)}
.pillar.is-open h2{font-size:22px}
.pillar h2 a::after{content:"";position:absolute;inset:0;z-index:1}   /* the whole pillar opens the profile */
.pillar-more{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s}
.pillar.is-open .pillar-more{max-height:140px;opacity:1}
.pillar-licence{font-size:13px;color:#C9CEDC;margin-top:6px}
.pillar-focus{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:36px;font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
.pillar-focus:hover{border-color:var(--red)}
.pillar-focus svg{width:13px;height:13px;fill:currentColor}

/* ============================================================
   HOME — the brief: a margin column and a body column
   ============================================================ */
.lx-sec{padding:104px 0;position:relative}
.lx-frame{display:grid;grid-template-columns:var(--margin-w) minmax(0,1fr);gap:0 var(--margin-gap)}
.lx-margin{position:relative;padding-left:22px}
.lx-margin::before{content:"";position:absolute;left:0;top:4px;width:3px;height:48px;background:var(--red)}
.lx-margin::after{content:"";position:absolute;left:1px;top:60px;bottom:0;width:1px;background:var(--rule)}
.lx-label{position:sticky;top:108px;font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--navy-900);padding-top:2px}
.lx-margin .lx-textlink{position:sticky;top:150px;margin-top:10px;font-size:14px}
.lx-h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.1vw,42px);line-height:1.45;color:var(--navy-900);max-width:760px}
.lx-lede{color:var(--muted);font-size:16.5px;line-height:1.9;margin-top:14px;max-width:620px}
.lx-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* ---------- matter desk ---------- */
.lx-desk{background:#fff}
.desk{display:grid;grid-template-columns:290px minmax(0,1fr);margin-top:44px;border-top:1px solid var(--line)}
.desk-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.desk-tabs button{
  position:relative;font:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:22px 26px 22px 0;min-height:72px;cursor:pointer;color:var(--muted);
  transition:color .25s,padding .4s var(--ease),background .3s;
}
.desk-tabs button::after{content:"";position:absolute;right:-2px;top:-1px;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transition:transform .45s var(--ease)}
.desk-tabs button:hover{color:var(--navy-900)}
.desk-tabs button[aria-selected=true]{color:var(--navy-900);padding-left:16px;background:linear-gradient(90deg,var(--pearl),rgba(238,240,245,0))}
.desk-tabs button[aria-selected=true]::after{transform:scaleY(1)}
.desk-tab-t{font-family:var(--serif);font-size:18px;line-height:1.5}
.desk-panel{padding:38px 0 38px 52px}
.desk-panel:not([hidden]){animation:lx-panel .45s var(--ease)}
.desk-panel:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.desk-panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,29px);line-height:1.5;color:var(--navy-900)}
.desk-panel>p{color:var(--muted);font-size:16px;line-height:1.95;margin-top:12px;max-width:62ch}
.desk-owner{display:flex;align-items:center;gap:18px;margin-top:28px;padding:14px 22px 14px 14px;max-width:480px;background:var(--pearl);border-left:3px solid var(--red);transition:background .3s}
.desk-owner:hover{background:#E4E7EF}
.desk-owner img{width:68px;height:68px;object-fit:cover;object-position:50% 12%;flex:none}
.desk-owner-k{display:block;font-size:12.5px;color:var(--muted)}
.desk-owner-n{display:block;font-family:var(--serif);font-size:18.5px;line-height:1.5;color:var(--navy-900)}
.desk-owner-r{display:block;font-size:13px;color:var(--muted)}
.desk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:30px}

/* ---------- practice index, with an image that follows the pointer ---------- */
/* clip (not hidden): hidden would make the section a scroll container and pin the sticky margin label to it */
.lx-practice{background:var(--pearl);overflow:clip}
.px-list{list-style:none;margin-top:44px;border-top:1px solid var(--rule)}
.px-row{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 150px;align-items:center;gap:30px;
  padding:26px 0;border-bottom:1px solid var(--rule);transition:padding .5s var(--ease),background .35s;
}
.px-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.px-row:hover,.px-row:focus-visible{padding-left:24px;background:rgba(255,255,255,.55)}
.px-row:hover::before,.px-row:focus-visible::before{transform:scaleY(1)}
.px-thumb{display:none}
.px-title{font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);line-height:1.45;color:var(--navy-900)}
.px-desc{font-size:14.5px;line-height:1.8;color:var(--muted);transition:color .3s}
.px-row:hover .px-desc{color:var(--ink)}
.px-count{justify-self:end;font-size:13px;color:var(--navy-700);text-align:right;line-height:1.5}
.px-float{position:absolute;left:0;top:0;z-index:4;width:300px;margin:0;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.px-float.on{opacity:1}
.px-float img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-top:3px solid var(--red);box-shadow:var(--shadow-lg);transform:scale(.9);transition:transform .5s var(--ease)}
.px-float.on img{transform:none}
@media (hover:none),(pointer:coarse),(max-width:980px){.px-float{display:none}}

/* ---------- roster: the whole team on one rail ---------- */
.lx-roster{background:#fff}
.roster-nav{display:flex;gap:8px}
.roster-btn{width:48px;height:48px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);cursor:pointer;transition:background .25s,border-color .25s}
.roster-btn svg{width:20px;height:20px;fill:var(--navy-900);transition:fill .25s}
.roster-btn:hover:not(:disabled){background:var(--navy-900);border-color:var(--navy-900)}
.roster-btn:hover:not(:disabled) svg{fill:#fff}
.roster-btn:disabled{opacity:.35;cursor:default}
.roster-viewport{--pad:calc((100% - min(1180px,92%)) / 2 + var(--margin-w) + var(--margin-gap))}
.roster-track{
  list-style:none;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:42px calc((100% - min(1180px,92%)) / 2) 6px var(--pad);scroll-padding-left:var(--pad);scrollbar-width:none;
}
.roster-track::-webkit-scrollbar{display:none}
.roster-track:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.roster-card{flex:0 0 clamp(214px,18.5vw,262px);scroll-snap-align:start}
.roster-card a{display:block}
.roster-photo{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--pearl)}
.roster-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .9s var(--ease),opacity .5s}
.roster-photo .photo-swap{position:absolute;inset:0;opacity:0}
.roster-card a:hover .roster-photo img{transform:scale(1.03)}
.roster-card a:hover .photo-swap{opacity:1}
.roster-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:1}
.roster-card a:hover .roster-photo::after,.roster-card a:focus-visible .roster-photo::after{transform:scaleX(1)}
.roster-name{display:block;margin-top:16px;font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--navy-900)}
.roster-role{display:block;margin-top:2px;font-size:13px;color:var(--red)}
.roster-cred{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ---------- process: the one dark band; the line fills as the reader scrolls ---------- */
.lx-process{background:var(--night);color:#fff}
.lx-process .lx-label,.lx-process .lx-h2{color:#fff}
.lx-process .lx-margin::after{background:var(--rule-d)}
.track{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin:58px 0 0;padding:0}
.track::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:rgba(255,255,255,.18)}
.track::after{content:"";position:absolute;left:0;top:21px;height:3px;width:calc(var(--fill,0) * 100%);background:var(--red)}
.track-step{position:relative;padding-top:68px}
.track-n{position:absolute;left:0;top:0;z-index:1;width:44px;height:44px;display:grid;place-items:center;background:var(--night);border:1px solid rgba(255,255,255,.3);font-family:'Marcellus',serif;font-size:18px;transition:background .45s,border-color .45s}
.track-step.lit .track-n{background:var(--red);border-color:var(--red)}
.track-step h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.5}
.track-step p{color:#B9C0D3;font-size:15px;line-height:1.85;margin-top:10px}
.lx-process-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:22px;margin-top:60px;padding-top:28px;border-top:1px solid var(--rule-d)}
.promises{list-style:none;display:flex;flex-wrap:wrap;gap:10px 34px;color:#C9CEDC;font-size:14px}
.promises li{display:flex;align-items:center;gap:12px}
.promises li::before{content:"";width:3px;height:14px;background:var(--red)}

/* ---------- clients: the original scrolling strip (styles.css .logos-*) under the margin label ---------- */
.lx-clients{background:#fff;padding-bottom:88px}
.lx-clients .logos-marquee{margin-top:48px}
.lx-clients .lx-h2{font-size:clamp(24px,2.4vw,32px)}

/* ---------- insights: one lead, two follow ---------- */
.lx-insights{background:var(--pearl)}
.ins-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin-top:44px;background:#fff;border-top:3px solid var(--navy-900)}
.ins-lead{padding:42px 46px;border-right:1px solid var(--line)}
.ins-side{display:flex;flex-direction:column}
.ins-follow{flex:1;padding:32px 36px;border-bottom:1px solid var(--line)}
.ins-follow:last-child{border-bottom:0}
.ins-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted)}
.ins-cat{color:var(--red)}
.ins-lead h3,.ins-follow h3{font-family:var(--serif);font-weight:400;color:var(--navy-900)}
.ins-lead h3{font-size:clamp(24px,2.3vw,31px);line-height:1.5;margin-top:14px}
.ins-follow h3{font-size:19.5px;line-height:1.6;margin-top:10px}
.ins-lead h3 a,.ins-follow h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ins-lead h3 a:hover,.ins-follow h3 a:hover{background-size:100% 1px}
.ins-sum{color:var(--muted);font-size:16px;line-height:1.95;margin-top:14px}
.ins-by{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:13.5px;color:var(--muted)}
.ins-by img{width:40px;height:40px;object-fit:cover;object-position:50% 12%}
.ins-by a{color:var(--navy-800);font-weight:500}
.ins-by a:hover{color:var(--red)}

/* ============================================================
   SHARED — closing band, footer line, contact dock (every page)
   ============================================================ */
.cta-band{background:#fff;color:var(--ink);padding:96px 0;border-top:1px solid var(--line)}
.cta-band::before,.cta-band::after{display:none}
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:center}
.cta-text h2{color:var(--navy-900)}
.cta-text p{color:var(--muted)}
.cta-text .btn{margin-top:28px}
.cta-ledger{list-style:none;background:var(--night);color:#fff;border-top:3px solid var(--red)}
.cta-ledger li>a,.cta-ledger li[data-office-status]{display:flex;align-items:center;gap:18px;padding:18px 28px;border-bottom:1px solid rgba(255,255,255,.09)}
.cta-ledger li:last-child>*{border-bottom:0}
.cta-ledger li[data-office-status]{border-bottom:0}
.cta-ledger li>a{transition:background .25s}
.cta-ledger li>a:hover{background:rgba(255,255,255,.05)}
.cta-ledger svg{width:20px;height:20px;fill:var(--red);flex:none}
.cta-ledger .l{display:block;font-size:12.5px;color:var(--pewter)}
/* contact details stay in the sans: Marcellus draws zero like the letter O, which misleads in a phone number */
.cta-ledger .n{display:block;font-family:var(--sans);font-size:17.5px;font-weight:500;line-height:1.5;letter-spacing:.01em;word-break:break-word}
.cta-ledger .office-text{font-size:15px;font-weight:400}

.f-now{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--pewter)}

.dock{position:fixed;right:26px;bottom:26px;z-index:46;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.dock-btn{
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;border:0;cursor:pointer;
  background:var(--red);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  box-shadow:0 18px 40px -14px rgba(215,40,47,.6);transition:background .25s,transform .25s;
}
.dock-btn:hover{background:var(--red-dark);transform:translateY(-2px)}
.dock-btn svg{width:20px;height:20px;fill:#fff}
.dock-x,.dock-btn[aria-expanded=true] .dock-ico{display:none}
.dock-btn[aria-expanded=true] .dock-x{display:block}
.dock-btn[aria-expanded=true]{background:var(--navy-800);box-shadow:var(--shadow-md)}
.dock-panel{width:320px;background:var(--night);color:#fff;padding:24px 24px 22px;border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--red);box-shadow:var(--shadow-lg);animation:lx-panel .35s var(--ease)}
.dock-panel[hidden]{display:none}
.dock-title{font-family:var(--serif);font-size:20px;line-height:1.4}
.dock-now{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:13px;line-height:1.6;color:var(--pewter)}
.dock-row{display:flex;align-items:center;gap:14px;min-height:48px;border-top:1px solid rgba(255,255,255,.1);font-size:15px;transition:color .25s}
.dock-row:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.dock-row svg{width:18px;height:18px;fill:var(--red);flex:none}
.dock-cta{width:100%;justify-content:center;margin-top:14px}
.to-top{bottom:92px}
.dock.open~.to-top{opacity:0;pointer-events:none}
@media(max-width:1024px){.dock{display:none}.to-top{bottom:84px}}
.quickbar a{white-space:nowrap}
@media(max-width:420px){.quickbar a.qb-main svg{display:none}.quickbar a{gap:6px;font-size:12.5px}}

/* ============================================================
   INNER PAGES — the same rule and columns, without new markup
   ============================================================ */
.page-hero::before{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%,
    linear-gradient(100deg,rgba(10,16,41,.97) 0%,rgba(10,16,41,.88) 45%,rgba(10,16,41,.6) 100%);
}
.page-hero .ph-inner::before{transform-origin:top;animation:lx-rule .9s var(--ease) both}
.page-hero h1{animation:lx-line .95s .2s var(--ease) both}
.page-hero .ph-sub{animation:lx-fade .9s .45s both}

/* ---------- article tools: reading time, sharing, printing ---------- */
.art-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin:-8px 0 30px;padding:0 0 14px;border-bottom:1px solid var(--line)}
/* phone numbers everywhere: Marcellus draws zero like the letter O */
.cta-phone .n{font-family:var(--sans);font-weight:500;letter-spacing:.01em}
.art-read{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.art-read svg{width:14px;height:14px;fill:var(--red)}
.art-share{display:flex;flex-wrap:wrap;gap:6px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:40px;height:40px;padding:0 11px;border:1px solid var(--line);background:#fff;color:var(--navy-800);font:inherit;font-size:13px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.share-btn svg{width:15px;height:15px;fill:currentColor}
.share-btn:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.art-share-status{flex-basis:100%;font-size:12.5px;color:var(--navy-700)}
.art-share-status:empty{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .lx-hero-grid{grid-template-columns:1fr;gap:8px}
  .team-hero .lx-hero-grid{grid-template-columns:1fr;gap:24px}
  .team-hero .pillars{height:clamp(380px,62vw,520px)}
  .lx-hero-copy{padding-bottom:40px}
  .lx-hero-copy::before{bottom:40px}
  .pillars{height:clamp(380px,62vw,520px)}
}
@media(max-width:980px){
  .lx-sec{padding:76px 0}
  .lx-frame{grid-template-columns:minmax(0,1fr)}
  .lx-margin{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding-left:16px}
  .lx-margin::before{top:2px;bottom:2px;height:auto}
  .lx-margin::after{display:none}
  .lx-label,.lx-margin .lx-textlink{position:static;margin:0}
  .roster-viewport{--pad:calc((100% - min(1180px,92%)) / 2)}
  .desk{grid-template-columns:minmax(0,1fr)}
  .desk-tabs{flex-direction:row;flex-wrap:wrap;border-right:0}
  .desk-tabs button{flex:1 1 50%;min-height:60px;padding:14px 16px;border-right:1px solid var(--line)}
  .desk-tabs button:nth-child(2n){border-right:0}
  .desk-tabs button::after{right:0;left:0;top:auto;bottom:-1px;width:auto;height:3px;transform:scaleX(0)}
  .desk-tabs button[aria-selected=true]{padding-left:16px}
  .desk-tabs button[aria-selected=true]::after{transform:scaleX(1)}
  .desk-tab-t{font-size:16px}
  .desk-panel{padding:30px 0 6px}
  .px-row{grid-template-columns:120px minmax(0,1fr);gap:6px 20px;padding:20px 0}
  .px-row:hover,.px-row:focus-visible{padding-left:0;background:none}
  .px-thumb{display:block;grid-row:1 / span 3;width:120px;height:auto;aspect-ratio:4/3;object-fit:cover;align-self:start}
  .px-count{justify-self:start;text-align:left;font-size:12.5px}
  .track{grid-template-columns:minmax(0,1fr);gap:0}
  .track::before{left:21.5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .track::after{left:21px;top:0;width:3px;height:calc(var(--fill,0) * 100%)}
  .track-step{padding:0 0 38px 72px}
  .track-step:last-child{padding-bottom:0}
  .ins-grid{grid-template-columns:minmax(0,1fr)}
  .ins-lead{border-right:0;border-bottom:1px solid var(--line);padding:32px 26px}
  .ins-follow{padding:26px}
  .cta-inner{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media(max-width:640px){
  .lx-hero>.container{padding-top:44px;padding-bottom:120px}
  .lx-hero-copy{padding-left:22px}
  .lx-hero h1{font-size:clamp(34px,9vw,44px)}
  .lx-hero-sub{font-size:16px}
  .pillars{gap:6px;height:clamp(320px,92vw,440px)}
  .team-hero .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:clamp(320px,92vw,440px)}
  .pillar.is-open{flex-grow:1.9}
  .pillar-cap{padding:14px 12px 16px}
  .pillar h2{font-size:13.5px}
  .pillar.is-open h2{font-size:17px}
  .team-hero .pillar.is-open h2{font-size:13.5px}
  .pillar-role{font-size:11.5px}
  .pillar-licence{font-size:12px}
  .pillar-focus{font-size:13px}
  .px-row{grid-template-columns:88px minmax(0,1fr)}
  .px-thumb{width:88px}
  .px-desc{font-size:14px}
  .roster-card{flex-basis:72vw}
  .cta-band{padding:72px 0}
  .cta-ledger li>a,.cta-ledger li[data-office-status]{padding:16px 20px}
  .lx-head-row .roster-nav{display:none}
}

/* ============================================================
   REDUCED MOTION — content arrives in place; nothing travels
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .lx-hero-copy::before,.lx-firm,.lx-hero h1 .ln>span,.lx-hero-sub,.lx-hero-actions,.office-now,.pillar,
  .page-hero .ph-inner::before,.page-hero h1,.page-hero .ph-sub,.desk-panel:not([hidden]),.dock-panel{animation:none}
  .pillar,.pillar img,.pillar-more,.px-row,.roster-photo img,.track::after{transition:none}
  .pillar.is-open img{transform:none}
  .roster-track{scroll-behavior:auto}
}

/* ============================================================
   PRINT — an article prints as a clean memorandum
   ============================================================ */
@media print{
  .topbar,.nav,.mobile-menu,.cta-band,footer,.dock,.to-top,.quickbar,.scroll-progress,.skip-link,
  .art-tools,.svc-aside,.breadcrumb,.art-consult .btn{display:none !important}
  body{font-size:11.5pt;color:#000;padding:0 !important}
  .page-hero{background:none !important;color:#000;padding:0 0 14pt}
  .page-hero::before,.page-hero::after,.page-hero .ph-bg{display:none}
  .page-hero h1,.page-hero .ph-sub{color:#000;animation:none}
  .svc-layout{display:block}
  .reveal{opacity:1 !important;transform:none !important}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ============================================================
   QUIET LUXURY (16 Oct 2026, night)
   User: no glossy after all — the colours should feel expensive and refined, never loud.
   So: one deep crimson instead of a bright red, used for the primary action and thin rules
   only; flat navy surfaces in two close tones (no glows, sheens or glass); plain white with
   hairlines in place of grey; soft, low shadows. Nothing shines; nothing shouts.
   ============================================================ */
:root{
  --red:#B3232B;               /* deep crimson: the logo's red, quietened for large areas */
  --red-dark:#921B22;
  --red-soft:rgba(179,35,43,.07);
  --bg:#FFFFFF;                /* no grey bands */
  --pearl:#FFFFFF;
  --muted:#4E5672;             /* secondary text, navy-tinted */
  --navy-tone:#111A38;         /* the second navy, for tone-on-tone bands */
  --hair:rgba(13,21,48,.10);
  --lift:0 1px 2px rgba(13,21,48,.04),0 14px 34px -22px rgba(13,21,48,.28);
}

/* buttons: flat, deep, no glow */
.btn-red,.nav-cta,.dock-btn{background:var(--red);box-shadow:none}
.btn-red:hover,.nav-cta:hover,.dock-btn:hover{background:var(--red-dark);box-shadow:0 10px 22px -14px rgba(146,27,34,.55)}
.btn-navy{background:var(--navy-800);box-shadow:none}
.btn-navy:hover{background:var(--navy-700)}
.dock-btn{box-shadow:0 12px 28px -16px rgba(8,14,34,.55)}
.dock-btn[aria-expanded=true]{background:var(--navy-800)}

/* header and the hero: calm, solid navy */
.nav{background:var(--navy-900)}
.nav.scrolled{background:rgba(13,21,48,.97);box-shadow:0 8px 24px -16px rgba(0,0,0,.5)}
.lx-hero::before{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%,
    linear-gradient(98deg,rgba(13,21,48,.96) 0%,rgba(13,21,48,.9) 42%,rgba(13,21,48,.66) 74%,rgba(13,21,48,.72) 100%),
    linear-gradient(0deg,rgba(13,21,48,.9) 0%,rgba(13,21,48,0) 32%);
}
.page-hero::before{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%,
    linear-gradient(100deg,rgba(13,21,48,.97) 0%,rgba(13,21,48,.9) 48%,rgba(13,21,48,.7) 100%);
}
.pillar{box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.pillar::before{height:2px}
.rd-cat,.lang-toggle a.on{background:var(--red)}

/* the stats card: white, hairline, soft lift; figures in solid navy */
.stats{background:#fff;border-top:2px solid var(--red);box-shadow:0 2px 4px rgba(13,21,48,.04),0 30px 60px -32px rgba(13,21,48,.38)}
.stat-num{color:var(--navy-900)}

/* bands: tone-on-tone navy, flat */
.lx-practice{background:var(--navy-tone);color:#fff}
.lx-process{background:var(--navy-900)}
footer{background:var(--navy-950)}
.cta-ledger,.dock-panel,.aside-card{background:var(--navy-900)}
.cta-ledger,.dock-panel{box-shadow:0 24px 50px -30px rgba(8,14,34,.6)}
.cta-ledger{border-top-width:2px}
.approach,.c-card,.evid-box,.exp-badge,.mobile-menu{background:var(--navy-900)}

/* the practice index on navy */
.lx-practice .lx-label,.lx-practice .lx-h2{color:#fff}
.lx-practice .lx-margin::after{background:var(--rule-d)}
.lx-practice .lx-textlink{color:#fff;background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 10px)/0 1px no-repeat,linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 0 calc(100% - 10px)/100% 1px no-repeat}
.lx-practice .lx-textlink:hover{color:#fff;background-size:100% 1px,100% 1px}
.lx-practice .px-list{border-top-color:rgba(255,255,255,.12)}
.lx-practice .px-row{border-bottom-color:rgba(255,255,255,.10)}
.lx-practice .px-row:hover,.lx-practice .px-row:focus-visible{background:rgba(255,255,255,.035)}
.lx-practice .px-title{color:#fff}
.lx-practice .px-desc{color:#A9B0C4}
.lx-practice .px-row:hover .px-desc{color:#DADEE8}
.lx-practice .px-count{color:#C3C8D6}
.px-float img{border-top-width:2px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}

/* insights: back to white, a single hairline frame under a navy rule */
.lx-insights{background:#fff;border-top:1px solid var(--hair)}
.ins-grid{background:#fff;border:1px solid var(--hair);border-top:2px solid var(--navy-900);box-shadow:var(--lift)}

/* light areas: white with hairlines and a soft lift, never a grey fill */
.desk-tabs button[aria-selected=true]{background:linear-gradient(90deg,var(--red-soft),rgba(179,35,43,0))}
.desk-owner,.desk-owner:hover{background:#fff;border:1px solid var(--hair);border-left:2px solid var(--red);box-shadow:var(--lift)}
.roster-photo{background:var(--navy-800)}
.cb-what,.fee-band,.law-card,.key-box{background:#fff;box-shadow:var(--lift)}
.pa-card,.sub-card,.person-card,.in-card{box-shadow:var(--lift)}
.sub-menu a:hover,.aside-links a:hover,.aside-links a.now,.sub-rows a:hover{background:var(--red-soft)}
.client-logos{background:#fff}
.lx-margin::before{width:2px}
[data-state=open] .office-dot{background:#5A9E7E;box-shadow:0 0 0 4px rgba(90,158,126,.16)}

/* Marcellus draws 1 like I and 0 like O ("10+" read "IO+"); figures use Noto Serif Thai's lining digits */
.stat-num{font-family:'Noto Serif Thai',Georgia,serif;font-weight:500;letter-spacing:-.01em}
.track-n{font-family:var(--sans);font-weight:600;font-size:16px}

/* ============================================================
   PEOPLE (16 Oct 2026, second pass): the team page and the profiles.
   No frames anywhere (user: the arches looked dated; "อยากได้ภาพใหญ่เต็มๆ เหมือน YACT").
   The profile pins a large photograph on the left like YACT's; DAP's own touches are the navy
   name block with its contact strip, the record as numbered sections on the red margin rule,
   and photo tiles with the name set over a navy fade. Red stays attached: the segment on the
   margin rule beside a heading, and the line that grows under a tile's caption on hover.
   ============================================================ */
.nw{white-space:nowrap}
.pf-index ol,.pf-line,.pf-team,.pf-writing,.pf-focus,.pf-grp ul,.pf-qual ul,.pf-facts,.pf-rows{list-style:none;margin-left:0;padding-left:0}

/* ---------- photo tiles (team page, "also on the team") ---------- */
.tm-tile{position:relative;display:block;overflow:hidden;color:#fff;background:var(--navy-800);isolation:isolate}
.tm-ph{position:relative;display:block;aspect-ratio:4/5}
.tm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.tm-ph .ph-swap{opacity:0}
.tm-tile:hover .ph-swap,.tm-tile:focus-visible .ph-swap{opacity:1}
.tm-tile:hover .tm-ph img,.tm-tile:focus-visible .tm-ph img{transform:scale(1.035)}
.tm-tile::after{content:"";position:absolute;inset:45% 0 0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,21,48,0),rgba(13,21,48,.55) 45%,rgba(13,21,48,.94))}
.tm-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:0 22px 22px}
.tm-cap::after{content:"";height:2px;margin-top:14px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.tm-tile:hover .tm-cap::after,.tm-tile:focus-visible .tm-cap::after{transform:scaleX(1)}
.tm-role{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9CEDC}
.tm-name{margin-top:6px;font-family:var(--serif);font-size:20px;line-height:1.4;color:#fff}
.tm-go{display:inline-flex;align-items:center;gap:8px;max-height:0;margin-top:0;overflow:hidden;opacity:0;font-size:13.5px;font-weight:500;color:#fff;transition:max-height .45s var(--ease),opacity .35s,margin .45s var(--ease)}
.tm-go svg{width:14px;height:14px;fill:currentColor}
.tm-tile:hover .tm-go,.tm-tile:focus-visible .tm-go{max-height:24px;margin-top:8px;opacity:1}

/* ---------- /team ---------- */
.tm-sec{padding:96px 0 112px;background:#fff}
.tm-head{position:relative;padding-left:26px;border-left:1px solid var(--hair);margin:0 0 44px}
.tm-head::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;max-height:64px;background:var(--red)}
.tm-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,38px);line-height:1.45;color:var(--navy-900);margin-top:6px}
html[lang=th] .tm-head .overline{letter-spacing:.02em}
.tm-partners+.tm-head{margin-top:100px}
.tm-partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tm-big .tm-ph{aspect-ratio:4/5}
.tm-big .tm-name{font-size:clamp(21px,2vw,27px)}
.tm-big .tm-cap{padding:0 24px 24px}
.tm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 18px}

/* ---------- profile: the large photograph, pinned, and the right column ---------- */
.pf{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);background:#fff}
.pf-photo{position:relative;background:var(--navy-800)}
.pf-stick{position:sticky;top:66px;height:calc(100vh - 66px);overflow:hidden}
.pf-stick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:opacity .8s var(--ease)}
.pf-stick .ph-swap{opacity:0}
.pf-photo:hover .ph-swap{opacity:1}
.pf-main{min-width:0}
.pf-head{position:relative;padding:56px clamp(28px,5vw,80px) 48px;background:var(--navy-900);color:#fff}
.pf-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.pf-head .breadcrumb{display:flex;gap:10px;font-size:13px;color:var(--pewter);margin-bottom:30px}
.pf-head .breadcrumb a{color:var(--pewter)}.pf-head .breadcrumb a:hover{color:#fff}
.pf-role{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter)}
.pf-name{margin:12px 0 6px;font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.8vw,56px);line-height:1.28;letter-spacing:-.01em}
.pf-alt{font-family:'Marcellus',serif;font-size:19px;letter-spacing:.04em;color:var(--pewter)}
.pf-facts{display:flex;flex-wrap:wrap;margin-top:24px;font-size:14px;color:#D6DAE6}
.pf-facts li{padding-right:18px;margin:0 18px 8px 0;border-right:1px solid var(--rule-d)}
.pf-facts li:last-child{border-right:0;margin-right:0}
.pf-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:26px;border-top:1px solid var(--rule-d)}
.pf-rows li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule-d);font-size:14px}
.pf-rows .k{flex:none;color:var(--pewter)}
.pf-rows .v{color:#fff;text-align:right;overflow-wrap:anywhere}
.pf-rows a.v:hover{text-decoration:underline;text-underline-offset:3px}
.pf-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.pf-save{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border:1px solid var(--rule-d);background:none;color:#fff;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:border-color .3s,background .3s}
.pf-save:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.pf-save svg{width:16px;height:16px;fill:currentColor}

/* ---------- profile: the record ---------- */
.pf-body{padding:72px clamp(28px,5vw,80px) 40px}
.pf-sec{position:relative;padding:0 0 56px 30px;border-left:1px solid var(--hair);scroll-margin-top:100px}
.pf-sec::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:38px;background:var(--red)}
.pf-lab{display:flex;align-items:baseline;gap:16px;margin:0 0 22px;font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.1vw,28px);line-height:1.4;color:var(--navy-900)}
.pf-n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--red)}
.pf-bio{font-family:'Noto Serif Thai',Georgia,serif;font-size:18px;line-height:1.95;color:var(--ink);max-width:44em}
html[lang=en] .pf-bio{font-family:Georgia,'Noto Serif Thai',serif;font-size:18.5px;line-height:1.75}
.pf-focus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.pf-focus li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--hair);font-size:16px;color:var(--navy-900)}
.pf-focus li::before{content:"";position:absolute;left:0;top:26px;width:13px;height:1px;background:var(--red)}
.pf-grps{border-bottom:1px solid var(--hair)}
.pf-grp{border-top:1px solid var(--hair)}
.pf-grp summary{display:flex;align-items:center;gap:14px;min-height:60px;cursor:pointer;list-style:none;font-weight:600;font-size:16.5px;color:var(--navy-900)}
.pf-grp summary::-webkit-details-marker{display:none}
.pf-grp summary em{margin-left:auto;padding:1px 10px;border:1px solid var(--hair);border-radius:99px;font-style:normal;font-size:12px;font-weight:500;color:var(--muted)}
.pf-grp summary svg{flex:none;width:20px;height:20px;fill:var(--muted);transition:transform .3s var(--ease)}
.pf-grp[open] summary svg{transform:rotate(180deg)}
.pf-grp summary:hover span{color:var(--red)}
.pf-grp ul{padding:0 0 22px}
.pf-grp li{position:relative;padding:7px 0 7px 24px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.pf-grp li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border:1px solid var(--red);border-radius:50%}
.pf-proj{width:100%;border-collapse:collapse}
.pf-proj th{padding:0 0 10px;border-bottom:1px solid var(--navy-900);text-align:left;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pf-proj td{padding:15px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.pf-proj .pj-no{width:150px;padding-right:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--red);white-space:nowrap}
.pf-proj td b{display:block;font-weight:600;color:var(--navy-900)}
.pf-proj td span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.pf-note{margin-top:12px;font-size:13px;color:var(--muted)}
.pf-line li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:15px 0;border-bottom:1px solid var(--hair);font-size:15.5px;color:var(--ink)}
.pf-line li:first-child{border-top:1px solid var(--hair)}
.pf-yr{font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy-900)}
.pf-line li:first-child .pf-yr{color:var(--red)}
.pf-line li:has(.pf-yr:empty){grid-template-columns:1fr}
.pf-line li:has(.pf-yr:empty) .pf-yr{display:none}
.pf-quals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pf-qual{padding:24px 24px 16px;border:1px solid var(--hair);background:#fff;box-shadow:var(--lift)}
.pf-qual h3{margin-bottom:10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pf-qual li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.6;color:var(--navy-900)}
.pf-qual li:last-child{border-bottom:0}

/* ---------- profile: after the record ---------- */
.pf-after{padding:0 0 112px;background:#fff}
.pf-after-block{margin-top:56px;padding-top:44px;border-top:1px solid var(--hair)}
.pf-after-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:24px}
.pf-after-h{margin-bottom:22px;font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.6vw,34px);line-height:1.4;color:var(--navy-900)}
.pf-after-top .pf-after-h{margin-bottom:0}
.pf-writing a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);color:inherit}
.pf-writing li:first-child a{border-top:1px solid var(--hair)}
.pf-wc{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pf-wt{font-family:'Noto Serif Thai',Georgia,serif;font-size:18px;line-height:1.55;color:var(--navy-900);transition:color .25s}
.pf-wd{font-size:13px;color:var(--muted);white-space:nowrap}
.pf-writing a:hover .pf-wt{color:var(--red)}
.pf-writing+.lx-textlink{margin-top:10px}
.pf-team{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pf-team li{scroll-snap-align:start}
.pf-team .tm-name{font-size:17px}
.pf-team .tm-cap{padding:0 16px 16px}
html[lang=th] :is(.pf-role,.pf-qual h3,.pf-proj th,.tm-role,.pf-wc){letter-spacing:.02em;font-size:13.5px}

@media(max-width:1180px){
  .pf-rows{grid-template-columns:1fr}
}
@media(max-width:960px){
  .pf{grid-template-columns:1fr}
  .pf-stick{position:relative;top:auto;height:auto;aspect-ratio:4/5;max-height:82vh}
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .tm-sec{padding:64px 0 80px}
  .tm-partners{grid-template-columns:1fr;gap:40px}
  .tm-grid{gap:14px}
  .tm-cap{padding:0 14px 14px}.tm-name{font-size:16px}.tm-role{font-size:11px}
  .tm-big .tm-cap{padding:0 20px 20px}
  .pf-head{padding:40px 20px 36px}
  .pf-body{padding:48px 20px 24px}
  .pf-facts{display:block}.pf-facts li{border-right:0;padding:0;margin:0 0 6px}
  .pf-sec{padding:0 0 44px 18px}
  .pf-focus,.pf-quals{grid-template-columns:1fr}
  .pf-line li{grid-template-columns:1fr;gap:2px}
  .pf-proj .pj-no{width:92px;white-space:normal}
  .pf-writing a{grid-template-columns:1fr;gap:6px}
  .pf-bio{font-size:17px}
  .pf-team{grid-auto-columns:minmax(160px,1fr)}
}
@media(prefers-reduced-motion:reduce){.tm-ph img,.pf-stick img,.tm-cap::after,.tm-go{transition:none}}
@media(max-width:860px) and (min-width:641px){.tm-partners{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   SERVICE DRAWINGS (16 Oct 2026): isometric line drawings from _build/make_illus.py, the YACT
   technique in DAP's setting — pearl lines on navy, ruled with the hero's 12-column hairlines,
   accent lines in a crimson light enough to read on navy. They replace the stock photographs in
   the page heads, the service cards and the homepage preview. Faces are filled with --iso-bg so
   a nearer object hides what is behind it; the strokes draw themselves in once.
   ============================================================ */
.iso{display:block;width:100%;height:auto;overflow:visible;--iso-ink:#E6E9F1;--iso-acc:#D2575D;--iso-bg:var(--navy-900)}
.iso .i-bg{fill:var(--iso-bg)}
.iso .i-v{fill:none;stroke:var(--iso-ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.iso .i-f{fill:none;stroke:var(--iso-acc);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.iso .i-h{fill:none;stroke:var(--iso-acc);stroke-opacity:.45;stroke-width:1;stroke-dasharray:4 5}
.iso .i-site{fill:rgba(210,87,93,.07);stroke:var(--iso-acc);stroke-width:1.3;stroke-dasharray:9 7;animation:iso-march 1.8s linear infinite}
.iso .i-trace{fill:none;stroke:var(--iso-acc);stroke-width:1.4;stroke-dasharray:7 6;animation:iso-march 1.6s linear infinite}
.iso .i-dot,.iso .i-arrow{fill:var(--iso-acc)}
.iso .i-lens circle{fill:rgba(255,255,255,.05);stroke:var(--iso-ink);stroke-width:1.3}
.iso .i-lens .i-lens-in{fill:none;stroke:var(--iso-acc);stroke-width:1}
.iso .i-handle{fill:none;stroke:var(--iso-ink);stroke-width:7;stroke-linecap:round}
.iso .i-plane path{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1.3;stroke-linejoin:round}
.iso .i-sea path{fill:none;stroke:var(--iso-acc);stroke-width:1;opacity:.55}
.iso .i-tx{font-family:var(--sans);font-weight:500;fill:var(--iso-ink)}
.iso .i-bulb path{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.iso .i-bulb .i-ray{fill:none;stroke:var(--iso-acc)}
.iso .i-lead{fill:none;stroke:var(--iso-acc);stroke-width:1}
.iso .i-badge{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1.3}
.iso .i-ico *{fill:none;stroke:var(--iso-acc);stroke-width:1.3}
.iso .i-ico .i-full{fill:var(--iso-acc)}
.iso .i-talk path,.iso .i-pen path{fill:var(--iso-bg);stroke:var(--iso-ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.iso .i-talk .i-talk-t{fill:none;stroke:var(--iso-acc)}
.iso .i-pen .i-nib{fill:none;stroke:var(--iso-acc);stroke-width:2}
@keyframes iso-march{to{stroke-dashoffset:-32}}
@keyframes iso-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* drawn in: the page head on load, a card when it is revealed */
.ph-art .iso :is(.i-v,.i-f){stroke-dasharray:1;animation:iso-draw 1.9s var(--ease) both;animation-delay:calc(.35s + var(--i,0) * 22ms)}
.reveal .iso :is(.i-v,.i-f){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease);transition-delay:calc(var(--i,0) * 20ms)}
.reveal.in .iso :is(.i-v,.i-f){stroke-dashoffset:0}

/* the page head of a service or a case type: the drawing stands at the right */
.page-hero.has-art .ph-art{position:absolute;z-index:0;top:50%;right:max(24px,calc((100vw - 1240px) / 2));width:min(38vw,500px);transform:translateY(-44%);pointer-events:none}
.page-hero.has-art .container{position:relative;z-index:1}
.page-hero.has-art .ph-inner{max-width:min(860px,54%)}
/* the service cards: the drawing on a navy panel ruled like the hero */
.pa-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7% 16%;
  background:var(--navy-900) repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%}
.pa-art .iso{width:auto;max-width:100%;height:100%;transition:transform .8s var(--ease)}
.pa-card:hover .pa-art .iso{transform:scale(1.04)}
/* the homepage preview and its small thumbnails show the self-contained files */
.px-float img,.px-thumb{background:var(--navy-900) repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%;object-fit:contain;padding:14px 22px}
.px-thumb{padding:6px 8px}
@media(max-width:960px){
  .page-hero.has-art .ph-art{position:relative;top:auto;right:auto;transform:none;width:min(86%,420px);margin:34px auto -20px}
  .page-hero.has-art{display:flex;flex-direction:column-reverse}
  .page-hero.has-art .ph-inner{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .ph-art .iso :is(.i-v,.i-f),.iso .i-site,.iso .i-trace{animation:none}
  .reveal .iso :is(.i-v,.i-f){transition:none;stroke-dashoffset:0}
}

/* Our People, second pass (16 Oct 2026, "รูปของ Partner ควรมีจุดโดดเด่นกว่าพนักงาน"): the partners
   stand on the navy band in large photographs, each carried on a crimson top edge with a deep
   shadow; the rest of the team sits on white in a row of six smaller photographs, name beneath. */
.tm-lead{position:relative;isolation:isolate;padding:96px 0 110px;color:#fff;
  background:var(--navy-900) repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 100%) 0 0/calc(100% / 12) 100%}
.tm-lead .tm-head{border-left-color:var(--rule-d)}
.tm-lead .tm-head h2{color:#fff}
.tm-lead .tm-tile{border-top:3px solid var(--red);box-shadow:0 34px 60px -30px rgba(0,0,0,.75)}
.tm-lead .tm-name{font-size:clamp(23px,2.2vw,30px)}
.tm-rest{padding:92px 0 112px}
.tm-person{display:block;color:inherit}
.tm-small .tm-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--navy-800)}
.tm-small .tm-role{display:block;margin-top:14px;font-size:11.5px;color:var(--red)}
.tm-small .tm-name{display:block;margin-top:4px;font-size:16.5px;line-height:1.45;color:var(--navy-900);transition:color .25s}
.tm-person:hover .tm-name,.tm-person:focus-visible .tm-name{color:var(--red)}
.tm-person:hover .tm-ph img,.tm-person:focus-visible .tm-ph img{transform:scale(1.04)}
.tm-person:hover .ph-swap{opacity:1}
@media(max-width:1180px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}}
@media(max-width:640px){
  .tm-lead{padding:64px 0 72px}.tm-rest{padding:64px 0 80px}
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .tm-small .tm-name{font-size:15.5px}
}
.tm-lead{border-top:1px solid var(--rule-d)}