:root{--ink:#211a17;--clay:#a95f45;--orange:#c97851;--sand:#e8d6bc;--cream:#f6f0e6;--blue:#7395a7;--line:rgba(33,26,23,.18);--pad:clamp(1.25rem,5vw,5.5rem);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.65 "Prompt",sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}.skip-link{position:fixed;top:-5rem;left:1rem;z-index:200;background:#fff;padding:.8rem}.skip-link:focus{top:1rem}.section-pad{padding:clamp(5rem,10vw,9rem) var(--pad)}em{font-style:normal;color:var(--orange)}.section-no,.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:99px;padding:.8rem 1.25rem;background:transparent;font-weight:500;transition:.35s var(--ease);cursor:pointer}.button:hover{transform:translateY(-3px)}.button--dark{background:var(--ink);color:var(--cream)}.button--light{background:var(--cream);color:var(--ink);border-color:var(--cream)}.button--ghost{color:var(--cream);border-color:#f6f0e680}.text-link{display:inline-block;border-bottom:1px solid;margin-top:1.5rem}.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.site-header{position:absolute;inset:0 0 auto;z-index:80;height:88px;padding:0 var(--pad);display:flex;align-items:center;gap:2rem;color:var(--cream);border-bottom:1px solid #f6f0e633}.site-header--solid{position:relative;background:var(--ink)}.brand{display:flex;align-items:center;gap:.72rem;font:600 1.2rem "Kanit",sans-serif;white-space:nowrap}.brand img{width:40px;height:40px;object-fit:contain}.brand em{font-weight:400}.desktop-nav{display:flex;gap:clamp(1rem,2.2vw,2.2rem);margin:auto;font-size:.88rem}.desktop-nav a{position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transition:.35s}.desktop-nav a:hover:after,.desktop-nav a.active:after{transform:scaleX(1)}.header-cta{border:1px solid;border-radius:99px;padding:.6rem 1rem;font-size:.86rem}.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;position:relative}.menu-toggle span{position:absolute;left:10px;top:18px;width:23px;height:1px;background:currentColor;transition:.45s var(--ease)}.menu-toggle span+span{top:25px;width:16px}.menu-toggle.is-active span{transform:translateY(3.5px) rotate(45deg)}.menu-toggle.is-active span+span{width:23px;transform:translateY(-3.5px) rotate(-45deg)}.mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(246,240,230,.97);padding:120px var(--pad) 3rem;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100%);visibility:hidden;transition:.7s var(--ease)}.mobile-menu.is-open{clip-path:inset(0);visibility:visible}.mobile-menu nav{display:grid}.mobile-menu nav a{font:500 clamp(2.1rem,10vw,4rem)/1.2 "Kanit";border-bottom:1px solid var(--line);padding:.08em 0}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--cream);padding:120px var(--pad) 80px}.hero__image,.hero__shade{position:absolute;inset:0;width:100%;height:100%}.hero__image{object-fit:cover;object-position:center}.hero__shade{background:linear-gradient(90deg,rgba(18,13,11,.88) 0%,rgba(18,13,11,.58) 42%,rgba(18,13,11,.05) 76%),linear-gradient(0deg,rgba(18,13,11,.4),transparent 45%)}.hero__content{position:relative;z-index:2;max-width:820px}.hero h1,.page-hero h1,.resume-hero h1{font:500 clamp(3.6rem,7.2vw,7.4rem)/.91 "Kanit";letter-spacing:-.045em;margin:.16em 0 .28em}.hero__content>p:not(.eyebrow){max-width:570px;color:#f6f0e6d0;font-size:clamp(1rem,1.4vw,1.18rem)}.hero__corner{position:absolute;z-index:2;right:var(--pad);bottom:2rem;display:grid;grid-template-columns:auto auto;gap:.2rem 1rem;font-size:.65rem;letter-spacing:.14em}.hero__corner span{color:var(--orange)}.marquee{overflow:hidden;background:var(--orange);padding:.7rem 0;white-space:nowrap;font:600 .75rem "Kanit";letter-spacing:.13em}.marquee div{width:max-content;animation:marquee 22s linear infinite}.marquee b{padding:0 1.5rem}.statement{display:grid;grid-template-columns:.35fr 1.65fr;gap:5vw}.statement h2,.section-head h2,.craft h2,.rate-tease h2,.contact h2,.included h2,.booking h2,.portfolio-lead h2,.resume-grid h2,.resume-contact h2{font:500 clamp(2.8rem,5.7vw,6rem)/.98 "Kanit";letter-spacing:-.035em;margin:.15em 0}.statement div{display:grid;grid-template-columns:1.3fr .7fr;gap:6vw;align-items:end}.statement div>p{font-size:1.08rem}.service-section{background:var(--sand)}.section-head{display:grid;grid-template-columns:.35fr 1.15fr .5fr;gap:4vw;align-items:end;margin-bottom:4rem}.section-head h2{margin:0}.service-list{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-width:1px 0 0 1px}.service-list article{min-height:300px;padding:1.5rem;border:1px solid var(--line);border-width:0 1px 1px 0;display:flex;flex-direction:column;transition:.4s var(--ease)}.service-list article:hover{background:var(--cream);transform:translateY(-5px)}.service-list span{color:var(--clay);font-size:.75rem}.service-list h3{font:500 1.6rem "Kanit";margin:auto 0 .4rem}.service-list p{margin:0}.craft{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;background:var(--ink);color:var(--cream)}.craft figure{margin:0}.craft figure img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}.craft figcaption{font-size:.72rem;letter-spacing:.1em;margin-top:.8rem;color:#f6f0e699}.craft ol{list-style:none;margin:2rem 0 0;padding:0}.craft li{display:grid;grid-template-columns:45px 1fr;gap:1rem;border-top:1px solid #f6f0e638;padding:1rem 0}.craft li span{color:var(--orange);font-size:.72rem}.craft li b{font:500 1.25rem "Kanit"}.craft li p{margin:.15rem 0;color:#f6f0e6ae}.rate-tease{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw;align-items:center}.rate-tease>div>p{line-height:1.8}.rate-frame{position:relative;box-shadow:0 24px 70px #211a1722;overflow:hidden}.rate-frame img{width:100%;display:block;transition:.6s var(--ease)}.rate-frame:hover img{transform:scale(1.018)}.rate-frame span{position:absolute;right:1rem;bottom:1rem;background:var(--cream);padding:.6rem .8rem;font-size:.7rem}.contact{background:var(--blue)}.contact>h2{margin:.2em 0 .7em}.contact__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw}.contact__grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.contact__grid>div>a{font:500 clamp(1.25rem,2vw,2rem) "Kanit"}.contact small{margin-top:1rem}.contact form{display:grid;gap:1rem}.contact form>div{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.contact label{display:grid;gap:.35rem;font-size:.82rem}.contact input,.contact select,.contact textarea{border:0;border-bottom:1px solid #211a1766;background:#f6f0e638;padding:.8rem;width:100%}.form-status{min-height:1.5em;margin:0}
footer{background:var(--ink);color:var(--cream);padding:2rem var(--pad);display:flex;justify-content:space-between;align-items:center;gap:2rem;font-size:.76rem}
.page-hero{background:var(--sand);padding:clamp(5rem,9vw,9rem) var(--pad);display:grid;grid-template-columns:.3fr 1.2fr .5fr;gap:4vw;align-items:end}.page-hero h1{margin:0}.page-hero>p:last-child{font-size:1.1rem}.package-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.package-card{padding:clamp(1.5rem,4vw,3.5rem);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;align-items:flex-start}.package-card--accent{background:var(--sand)}.package-card h2{font:600 clamp(2rem,4vw,3.8rem) "Kanit";margin:.2em 0}.price{font:500 clamp(4rem,7vw,7rem) "Kanit";letter-spacing:-.05em;color:var(--clay);line-height:1;margin:1.2rem 0 1.7rem}.price small{font-size:1rem;letter-spacing:0}.included{display:grid;grid-template-columns:.7fr 1.3fr;gap:5vw;margin-top:6rem;padding-top:4rem;border-top:1px solid var(--line)}.included ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}.included li{padding:1.2rem 0;border-bottom:1px solid var(--line)}.included li span{display:inline-block;width:3rem;color:var(--clay)}.addon{margin-top:3rem;padding:1.5rem 2rem;background:var(--ink);color:var(--cream);border-radius:18px;display:grid;grid-template-columns:1fr auto auto;gap:3rem;align-items:center}.addon h3{font:500 1.6rem "Kanit";margin:0}.rate-card-section{background:var(--sand)}.official-rate-card{margin:0}.media-open{border:0;padding:0;background:none;width:100%;cursor:zoom-in}.official-rate-card img{width:100%;display:block;box-shadow:0 25px 80px #211a172b}.official-rate-card figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.booking{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:.8fr .8fr auto;gap:4vw;align-items:center}.booking ul{line-height:2}
.resume-hero{background:var(--sand);padding:clamp(5rem,9vw,9rem) var(--pad);display:grid;grid-template-columns:1.4fr .6fr;gap:7vw;align-items:end}.resume-hero>div>p:not(.section-no){max-width:680px;font-size:1.1rem}.resume-hero aside{border-left:1px solid var(--line);padding-left:2rem;display:grid;gap:.4rem}.resume-hero aside span{font-size:.68rem;letter-spacing:.14em;color:var(--clay);margin-top:1rem}.portfolio-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center}.portfolio-lead figure{margin:0}.portfolio-lead img{width:100%;display:block}.work{background:var(--ink);color:var(--cream)}.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.empty-card{min-height:320px;border:1px solid #f6f0e63b;padding:2rem;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#2e2420,#211a17)}.empty-card:first-child{min-height:480px}.empty-card strong{font:500 2rem "Kanit"}.empty-card span{color:#f6f0e699}.resume-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:0;padding-bottom:0}.resume-grid article{padding:4rem;border:1px solid var(--line);border-width:0 1px 1px 0}.resume-grid h3{font:500 1.4rem "Kanit";margin:1.5rem 0 .3rem}.resume-grid li{padding:.8rem 0;border-bottom:1px solid var(--line)}.skill-cloud{display:flex;gap:.6rem;flex-wrap:wrap}.skill-cloud span{border:1px solid var(--line);border-radius:99px;padding:.55rem .8rem}.certs{background:var(--sand)}#certificateGrid .empty-card{border-color:var(--line);background:var(--cream);min-height:220px}.resume-contact{background:var(--blue)}.resume-contact>div{display:flex;gap:2rem;font:500 clamp(1.2rem,2vw,2rem) "Kanit"}
.media-modal{position:fixed;inset:0;z-index:200;background:#13100feb;display:grid;place-items:center;padding:3rem}.media-modal[hidden]{display:none}.media-modal img{max-width:95vw;max-height:90vh;object-fit:contain}.modal-close{position:absolute;right:1rem;top:.5rem;border:0;background:none;color:#fff;font-size:3rem}.reveal{opacity:0;transform:translateY(26px);transition:1s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
@keyframes marquee{to{transform:translateX(-50%)}}@media(max-width:1000px){.desktop-nav{display:none}.header-cta{margin-left:auto}.menu-toggle{display:block;color:inherit}.service-list{grid-template-columns:1fr 1fr}.section-head{grid-template-columns:.35fr 1.15fr}.section-head>p:last-child{grid-column:2}.statement div{display:block}.page-hero{grid-template-columns:.35fr 1.65fr}.page-hero>p:last-child{grid-column:2}.booking{grid-template-columns:1fr 1fr}.booking>a{grid-column:2}}
@media(max-width:700px){.site-header{height:76px}.brand span{font-size:1rem}.brand img{width:34px;height:34px}.header-cta{display:none}.hero{padding-top:110px;align-items:flex-end;min-height:92svh}.hero__image{object-position:64% center}.hero__shade{background:linear-gradient(0deg,rgba(18,13,11,.95) 0%,rgba(18,13,11,.55) 58%,rgba(18,13,11,.15))}.hero h1{font-size:clamp(3rem,15vw,5rem)}.hero__corner{display:none}.statement,.section-head,.craft,.rate-tease,.contact__grid,.page-hero,.included,.booking,.resume-hero,.portfolio-lead{grid-template-columns:1fr}.statement div{display:block}.service-list{grid-template-columns:1fr}.service-list article{min-height:210px}.section-head>p:last-child,.page-hero>p:last-child,.booking>a{grid-column:auto}.craft{padding-left:0;padding-right:0}.craft__copy{padding:0 var(--pad)}.craft figcaption{padding:0 var(--pad)}.rate-tease{gap:3rem}.contact form>div{grid-template-columns:1fr}.package-grid{grid-template-columns:1fr}.included ul{grid-template-columns:1fr}.addon{grid-template-columns:1fr;gap:.5rem}.official-rate-card figcaption{align-items:flex-start;gap:1rem;flex-direction:column}.resume-hero aside{border-left:0;border-top:1px solid var(--line);padding:1.5rem 0 0}.portfolio-grid{grid-template-columns:1fr}.empty-card,.empty-card:first-child{min-height:280px}.resume-grid{grid-template-columns:1fr}.resume-grid article{padding:2rem var(--pad)}.resume-contact>div{flex-direction:column;gap:.5rem}footer{align-items:flex-start;flex-direction:column}.section-pad{padding-top:5rem;padding-bottom:5rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media print{.site-header,.mobile-menu,footer,.actions,.certs,.resume-contact{display:none}.resume-hero,.resume-grid{display:block}.resume-grid article{break-inside:avoid;padding:1.5rem 0}.section-pad{padding:2rem}.portfolio-lead,.work{display:none}}

/* Balanced display lines for the key messages at desktop, tablet and phone widths. */
.hero h1{font-size:clamp(3rem,5.4vw,6rem)}
.mobile-line-break{display:none}
.statement h2{font-size:clamp(2.8rem,4.6vw,5rem)}
.portfolio-lead{grid-template-columns:.8fr 1.2fr;gap:5vw}
.portfolio-lead h2{font-size:clamp(2.6rem,4vw,5rem)}
@media(max-width:1000px){.portfolio-lead{grid-template-columns:1fr}.portfolio-lead figure{max-width:720px}}
@media(max-width:700px){.hero h1{font-size:clamp(2.6rem,10vw,4.2rem)}.mobile-line-break{display:inline}.statement h2{font-size:clamp(2.65rem,8.5vw,4rem)}.portfolio-lead h2{font-size:clamp(2.5rem,8vw,4rem)}}

/* v4 — clearer conversion copy, stable navigation and visual workflow */
#production,#contact,#rate-card,#consult,#work{scroll-margin-top:96px}
.brand img{flex:0 0 auto}
.menu-open .site-header{color:var(--ink)}
.line-contact-link{display:inline-flex;align-items:center;gap:.5em}
.line-contact-link img{display:block;width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.line-contact-link span{white-space:nowrap}
.button,.header-cta,.desktop-nav a,.mobile-menu a,.text-link,.brand{-webkit-tap-highlight-color:transparent}
.button:focus-visible,.header-cta:focus-visible,.desktop-nav a:focus-visible,.mobile-menu a:focus-visible,.text-link:focus-visible,.brand:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.button,.header-cta{min-height:44px}
.service-list--six{grid-template-columns:repeat(3,1fr)}
.service-list--six article{min-height:0;padding:0;overflow:hidden}
.service-card__image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--ink)}
.service-card__body{display:flex;flex:1;flex-direction:column;min-height:180px;padding:1.4rem 1.5rem 1.6rem}
.service-card__body h3{margin:auto 0 .4rem}
.service-card__body p{margin:0;line-height:1.55}
.contact .contact-name{font:500 clamp(1.75rem,3vw,2.8rem)/1.12 "Kanit";letter-spacing:-.025em;margin:0 0 .6rem}
.phone-contact-link{display:inline-flex;align-items:center;gap:.5em}
.phone-contact-link img{display:block;width:28px;height:28px;object-fit:contain;background:var(--ink);border-radius:7px;flex:0 0 auto}
.phone-contact-link span{white-space:nowrap}
.workflow{background:var(--ink);color:var(--cream)}
.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#f6f0e62b}
.workflow-grid article{background:var(--ink);min-width:0}
.workflow-grid img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover;filter:saturate(.9)}
.workflow-grid article>div{padding:1.5rem}
.workflow-grid span{font-size:.72rem;color:var(--orange);letter-spacing:.14em}
.workflow-grid h3{font:500 clamp(1.35rem,2vw,1.9rem) "Kanit";margin:.7rem 0 .35rem}
.workflow-grid p{margin:0;color:#f6f0e6b5}
.workflow__link{margin-top:2.5rem}
@media(max-width:1000px){.service-list--six{grid-template-columns:repeat(2,1fr)}.workflow-grid{grid-template-columns:1fr}.workflow-grid article{display:grid;grid-template-columns:1fr 1fr}.workflow-grid img{height:100%;aspect-ratio:auto}.workflow-grid article>div{align-self:center}}
@media(max-width:700px){.service-list--six{grid-template-columns:1fr}.workflow{padding-left:var(--pad);padding-right:var(--pad)}.workflow-grid article{display:block}.workflow-grid img{aspect-ratio:16/10}.hero__content>p:not(.eyebrow){font-size:1rem}.hero .actions{display:grid}.hero .button{width:100%}.menu-open .site-header{position:fixed}.menu-open .brand span{color:var(--ink)}}

/* Real portfolio media and a clear state while projects are being prepared. */
[hidden]{display:none!important}
.service-hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,80svh,820px);overflow:hidden;padding:clamp(5rem,8vw,8rem) var(--pad);background:var(--ink);color:var(--cream)}
.service-visual,.service-hero__shade{position:absolute;inset:0;margin:0}
.service-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.service-hero__shade{background:linear-gradient(90deg,rgba(18,13,11,.9) 0%,rgba(18,13,11,.72) 48%,rgba(18,13,11,.28) 100%)}
.service-hero .section-head{position:relative;z-index:1;width:100%;margin:0}
.service-hero .section-head>p:last-child{color:#f6f0e6d9}
.service-cards{background:var(--sand);padding-top:clamp(2.5rem,4vw,4.5rem)}
@media(max-width:700px){.service-hero{min-height:68svh;align-items:flex-end;padding:5rem var(--pad) 3.5rem}.service-visual img{object-position:50% center}.service-hero__shade{background:linear-gradient(0deg,rgba(18,13,11,.93) 0%,rgba(18,13,11,.64) 57%,rgba(18,13,11,.24) 100%)}}
body.modal-open{overflow:hidden}
.portfolio-grid.is-empty{grid-template-columns:1fr}
.empty-card--wide{min-height:300px!important;align-items:flex-start;gap:1rem}
.empty-card--wide p{margin:0 0 .5rem;color:#f6f0e6c7}
.project-card{min-width:0;background:#2e2420;border:1px solid #f6f0e63b}
.project-card__media{aspect-ratio:16/10;background:#16110f;display:grid;place-items:center;overflow:hidden}
.project-card__media .media-open,.project-card__media img,.project-card__media video,.project-card__media iframe{width:100%;height:100%;display:block}
.project-card__media img{object-fit:cover}
.project-card__media video{object-fit:contain}
.project-card__media iframe{border:0}
.project-card__missing{color:#f6f0e6a8}
.project-card__details{padding:1.5rem}
.project-card__details h3{font:500 1.65rem/1.25 "Kanit";margin:.45rem 0}
.project-card__details p{margin:.4rem 0}
.project-card__role{color:#f6f0e6c7}
#certificateGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.certificate-card{margin:0;background:var(--cream);border:1px solid var(--line)}
.certificate-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.certificate-card figcaption{display:grid;gap:.25rem;padding:1rem}
.certificate-card figcaption strong{font:500 1.2rem "Kanit"}
.certificate-card figcaption span{font-size:.85rem}
/* Portfolio credentials */
.resume-hero{align-items:center;min-height:calc(92svh - 88px);grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr)}
.resume-hero h1{font-size:clamp(3.3rem,6.6vw,7rem);overflow-wrap:anywhere}
.resume-hero__aside{min-width:0}
.resume-portrait{margin:0 0 1.4rem;padding:.55rem;background:var(--cream);box-shadow:18px 18px 0 rgba(33,26,23,.12)}
.resume-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 15%}
.resume-hero__facts{display:grid;gap:.25rem}
.resume-hero__facts span:not(.phone-contact-link span){font-size:.68rem;letter-spacing:.14em;color:var(--clay);margin-top:.6rem}
#certificates{scroll-margin-top:96px}
.certs{background:#ebe0d0}
.certs .section-head{align-items:end;margin-bottom:2.5rem}
.certs .section-head h2{font-size:clamp(3.2rem,6.5vw,6.8rem)}
.certs .section-head>p:last-child{max-width:330px}
.credential-note{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.5rem;padding:.8rem 0}
.credential-note span{font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--clay);white-space:nowrap}
.credential-note p{margin:0;font-size:.86rem}
#certificateGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.certificate-card{min-width:0;overflow:hidden;background:var(--cream);border:1px solid rgba(33,26,23,.14);box-shadow:0 8px 30px rgba(33,26,23,.05);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.certificate-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(33,26,23,.12)}
.certificate-card .media-open{display:block;overflow:hidden;background:#fdfbf7}
.certificate-card img{width:100%;height:310px;aspect-ratio:auto;object-fit:contain;padding:1.1rem;background:#fdfbf7;transition:transform .55s var(--ease)}
.certificate-card:hover img{transform:scale(1.025)}
.certificate-card figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.6rem 1.8rem 1.8rem}
.certificate-card__type{background:var(--ink);color:var(--cream);padding:.28rem .6rem;border-radius:99px;font-size:.63rem!important;font-weight:600;letter-spacing:.08em}
.certificate-card figcaption strong{font:500 clamp(1.35rem,2vw,1.8rem)/1.2 "Kanit"}
.certificate-card__issuer{color:var(--clay);font-weight:500}
.certificate-card figcaption p{margin:.2rem 0 .5rem;font-size:.9rem;line-height:1.7}
.certificate-card__view{font-size:.78rem!important;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.certificate-card--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--ink);color:var(--cream)}
.certificate-card--featured .media-open{height:100%}
.certificate-card--featured img{height:100%;min-height:390px;max-height:520px;object-fit:contain;padding:1.5rem}
.certificate-card--featured figcaption{justify-content:center;padding:clamp(2rem,5vw,5rem)}
.certificate-card--featured .certificate-card__type{background:var(--orange);color:var(--ink)}
.certificate-card--featured .certificate-card__issuer{color:#e7b794}
.certificate-card--featured figcaption strong{font-size:clamp(1.8rem,3vw,3rem)}
.certificate-card:last-child:not(.certificate-card--featured){grid-column:auto;display:block}
.certificate-card:last-child:not(.certificate-card--featured) img{height:310px;min-height:0}
@media(max-width:850px){.resume-hero{grid-template-columns:minmax(0,1fr) minmax(200px,.7fr);gap:3rem}.resume-hero h1{font-size:clamp(3.2rem,7vw,5.5rem)}.certificate-card--featured img{min-height:330px}}
@media(max-width:700px){.resume-hero{grid-template-columns:1fr;gap:2.5rem;min-height:auto}.resume-hero h1{font-size:clamp(3.2rem,13vw,5rem)}.resume-hero__aside{display:grid!important;grid-template-columns:minmax(0,180px) 1fr;gap:1.5rem;align-items:center}.resume-portrait{margin:0}.resume-hero__facts{min-width:0}.credential-note{align-items:flex-start;flex-direction:column;gap:.25rem}.certs .section-head{gap:1.2rem}#certificateGrid{grid-template-columns:1fr}.certificate-card--featured,.certificate-card:last-child:not(.certificate-card--featured){grid-column:auto;display:block}.certificate-card--featured .media-open{height:auto}.certificate-card img,.certificate-card--featured img,.certificate-card:last-child:not(.certificate-card--featured) img{height:auto;min-height:0;max-height:none;aspect-ratio:4/3;padding:.75rem}.certificate-card--featured figcaption{padding:1.6rem 1.8rem 1.8rem}}
@media(max-width:480px){.resume-hero__aside{grid-template-columns:1fr}.resume-portrait{max-width:230px}.resume-hero__facts{grid-template-columns:1fr 1fr;gap:0 1rem}.resume-hero__facts .phone-contact-link{grid-column:1/-1}.certificate-card figcaption{padding:1.25rem}.certificate-card--featured figcaption{padding:1.5rem}}
.brief-fallback{width:100%;min-height:180px;resize:vertical;background:var(--cream);border:1px solid var(--line);padding:1rem}
.form-line-link{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.media-open:focus-visible,.modal-close:focus-visible,.form-line-link:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.faq-section{background:var(--cream)}
.faq-list{max-width:960px;margin-left:auto;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:1.25rem 0}
.faq-list summary{cursor:pointer;list-style:none;font:500 clamp(1.25rem,2.4vw,1.7rem) "Kanit";display:flex;justify-content:space-between;gap:2rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--clay);font:400 1.7rem "Prompt"}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{max-width:760px;margin:.75rem 0 0}
.faq-list summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
/* Updated production and event packages */
#production-packages,#event-packages,#rate-card{scroll-margin-top:96px}
.package-intro{display:grid;grid-template-columns:.35fr 1.15fr .5fr;gap:4vw;align-items:end;margin-bottom:3rem}
.package-intro h2{font:500 clamp(2.8rem,5.7vw,6rem)/.98 "Kanit";letter-spacing:-.035em;margin:0}
.package-intro>p:last-child{font-size:1.05rem;max-width:350px;margin:0}
.package-card{min-height:330px}
.package-card h3{font:500 clamp(2rem,3.5vw,3.5rem)/1.05 "Kanit";margin:.3rem 0 .4rem}
.package-card>p:not(.section-no){margin:.4rem 0}
.package-card .price{font-size:clamp(3.4rem,5vw,5.6rem);margin:auto 0 1.5rem;white-space:nowrap}
.rate-tease{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.rate-tease__visuals{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-width:0}
.rate-tease__visuals .rate-frame{display:block;min-width:0;background:#fff}
.rate-tease__visuals .rate-frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rate-tease__visuals .rate-frame span{left:.5rem;right:.5rem;bottom:.5rem;text-align:center;font-size:.72rem}
.event-packages{background:#19384e;color:var(--cream)}
.event-packages .package-intro em{color:#b8d8e8}
.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.event-card{min-width:0;background:var(--cream);color:var(--ink);border-radius:20px;padding:clamp(1.4rem,2.5vw,2.5rem);display:flex;flex-direction:column}
.event-card__code{width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:12px;background:#2378bb;color:#fff;font:600 2rem "Kanit"}
.event-card h3{font:500 clamp(1.7rem,2.6vw,2.5rem)/1.1 "Kanit";margin:1rem 0 .4rem}
.event-card>strong{font:600 clamp(2.8rem,4.5vw,4.6rem)/1 "Kanit";color:#a95f45;white-space:nowrap}
.event-card>strong small{font-size:1rem;color:var(--ink)}
.event-card ul{list-style:none;margin:auto 0 0;padding:1.5rem 0 0}
.event-card li{border-top:1px solid var(--line);padding:.7rem 0}
.event-packages__cta{margin-top:2rem;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.rate-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.rate-card-grid .official-rate-card{min-width:0}
.rate-card-grid .official-rate-card img{aspect-ratio:16/9;object-fit:cover}
.rate-card-grid .official-rate-card figcaption{gap:1rem;font-weight:500}
/* Profile evidence */
.resume-grid article:nth-child(-n+2){display:flex;flex-direction:column;align-items:flex-start}
.education-degree{margin:auto 0 0;padding-top:2rem;width:100%}
.education-degree .media-open{display:block;overflow:hidden;aspect-ratio:1.2;background:#fff;border:1px solid var(--line)}
.education-degree img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center;transform:scale(1.1)}
.education-degree figcaption{font-size:.75rem;color:var(--clay);margin-top:.65rem}
.resume-contact h2 em{color:#102a3a}
@media(max-width:1000px){.package-intro{grid-template-columns:.35fr 1.15fr}.package-intro>p:last-child{grid-column:2}.event-card>strong{font-size:clamp(2.4rem,4vw,3.6rem)}}
@media(max-width:700px){.package-intro{grid-template-columns:1fr;gap:.75rem}.package-intro>p:last-child{grid-column:auto}.package-card{min-height:290px}.rate-tease{grid-template-columns:1fr}.rate-tease__visuals,.rate-card-grid,.event-grid{grid-template-columns:1fr}.rate-tease__visuals .rate-frame img{aspect-ratio:16/9}.event-card>strong{font-size:3.6rem}.rate-card-grid{gap:2.5rem}.resume-grid article:nth-child(-n+2){display:block}.education-degree{margin:1.5rem 0 0;padding-top:0}}
/* Identical certificate image windows for every document shape. */
#certificateGrid .certificate-card{display:flex;flex-direction:column;grid-column:auto}
#certificateGrid .certificate-card .media-open{height:auto;aspect-ratio:4/3;display:grid;place-items:center;background:#fff;overflow:hidden}
#certificateGrid .certificate-card img{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;padding:1rem;background:#fff}
#certificateGrid .certificate-card figcaption{flex:1}
@media(max-width:700px){#certificateGrid .certificate-card .media-open{aspect-ratio:4/3}#certificateGrid .certificate-card img{height:100%;aspect-ratio:auto;padding:.75rem}}

/* Compact the service and workflow chapters without dropping their copy. */
.service-hero{min-height:clamp(430px,52svh,580px);padding-top:clamp(4rem,6vw,6rem);padding-bottom:clamp(4rem,6vw,6rem)}
.service-cards.section-pad{padding-top:clamp(3.5rem,5vw,5.5rem);padding-bottom:clamp(3.5rem,5vw,5.5rem)}
.service-list--six .service-card__image{aspect-ratio:2.6/1;object-fit:cover;object-position:center 42%}
.service-list--six .service-card__body{min-height:125px;padding:1rem 1.25rem 1.2rem}
.service-list--six .service-card__body h3{font-size:1.4rem}
.workflow.section-pad{padding-top:clamp(4rem,6vw,6rem);padding-bottom:clamp(4rem,6vw,6rem)}
.workflow .section-head{margin-bottom:2.5rem}
.workflow-grid img{aspect-ratio:2.4/1;object-fit:cover;object-position:center 45%}
.workflow-grid article>div{padding:1.1rem 1.3rem}
.workflow-grid h3{margin:.45rem 0 .25rem}
.workflow__link{margin-top:1.75rem}

/* One rate card at a time in a restrained column. */
.rate-tease.section-pad{padding-top:clamp(4rem,6vw,6rem);padding-bottom:clamp(4rem,6vw,6rem)}
.rate-tease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.rate-tease__intro{display:block;margin:0}
.rate-tease__intro>div:last-child{padding:0}
.rate-tease__summary{font-size:clamp(1.2rem,1.5vw,1.35rem);line-height:1.65;margin:0 0 1.6rem}
.rate-carousel{width:100%;max-width:650px;min-width:0;justify-self:end}
.rate-carousel__stage{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:var(--ink);box-shadow:0 24px 70px #211a1722}
.rate-carousel__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s ease}
.rate-carousel__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.rate-carousel__slide img{display:block;width:100%;height:100%;object-fit:contain}
.rate-carousel__controls{display:grid;grid-template-columns:3.25rem minmax(0,1fr) 3.25rem;gap:1rem;align-items:center;margin-top:1rem}
.rate-carousel__arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);font:500 1.65rem "Kanit";cursor:pointer;transition:background .2s,color .2s}
.rate-carousel__arrow:hover{background:var(--ink);color:var(--cream)}
.rate-carousel__arrow:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.rate-carousel__status{display:flex;justify-content:center;align-items:center;gap:1rem;margin:0;text-align:center}
.rate-carousel__status strong{font:500 clamp(1rem,1.6vw,1.3rem) "Kanit"}
.rate-carousel__status span{font-size:.75rem;letter-spacing:.1em;color:var(--clay);white-space:nowrap}
@media(max-width:1000px){.rate-tease{grid-template-columns:1fr}.rate-carousel{justify-self:center}}
@media(max-width:700px){.service-hero{min-height:46svh;padding:4rem var(--pad) 3rem}.service-list--six .service-card__image{aspect-ratio:2.45/1}.service-list--six .service-card__body{min-height:125px}.workflow-grid img{height:auto;aspect-ratio:2.4/1}.rate-tease__intro{margin-bottom:1.75rem}.rate-tease__summary{font-size:1.2rem}.rate-carousel__controls{gap:.45rem}.rate-carousel__status{gap:.45rem;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.rate-carousel__slide{transition:none}}

/* Five compact certificate cards per desktop row. */
#certificateGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}
#certificateGrid .certificate-card .media-open{aspect-ratio:4/3}
#certificateGrid .certificate-card img{padding:.45rem}
#certificateGrid .certificate-card figcaption{min-width:0;padding:.85rem;gap:.3rem}
#certificateGrid .certificate-card figcaption strong{font-size:clamp(.95rem,1.15vw,1.15rem);line-height:1.25;overflow-wrap:anywhere}
#certificateGrid .certificate-card__issuer{font-size:.73rem;line-height:1.45;overflow-wrap:anywhere}
#certificateGrid .certificate-card figcaption p{font-size:.75rem;line-height:1.55;margin:.15rem 0 .3rem}
#certificateGrid .certificate-card__view{font-size:.7rem!important}
@media(max-width:1150px){#certificateGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#certificateGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#certificateGrid{grid-template-columns:1fr}}

/* ---------- Rate Card page: imagery-led layout ---------- */
.rate-hero{position:relative;min-height:clamp(430px,62svh,640px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink);color:var(--cream);padding:clamp(4rem,8vw,6rem) var(--pad) clamp(2rem,4vw,3rem)}
.rate-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.rate-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,11,.93) 0%,rgba(18,13,11,.64) 48%,rgba(18,13,11,.12) 88%),linear-gradient(0deg,rgba(18,13,11,.55),transparent 55%)}
.rate-hero__content{position:relative;z-index:2;max-width:860px}
.rate-hero h1{font:500 clamp(3rem,6.4vw,6.4rem)/.94 "Kanit";letter-spacing:-.045em;margin:.14em 0 .3em}
.rate-hero__content>p:not(.eyebrow){max-width:520px;margin:0;color:#f6f0e6d0;font-size:clamp(1rem,1.3vw,1.14rem)}
.rate-hero__jump{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.rate-hero__jump a{display:grid;gap:.35rem;padding:1rem 1.5rem;border:1px solid #f6f0e64d;border-radius:18px;background:rgba(246,240,230,.06);transition:.35s var(--ease)}
.rate-hero__jump a:hover{transform:translateY(-3px);border-color:var(--orange);background:rgba(246,240,230,.13)}
.rate-hero__jump span{font-size:.7rem;font-weight:600;letter-spacing:.14em;color:#f6f0e6b3}
.rate-hero__jump strong{font:500 clamp(1.5rem,2.4vw,2.1rem)/1 "Kanit";color:var(--orange);white-space:nowrap}
.rate-hero__jump small{font-size:.8rem;color:var(--cream)}
.rate-hero__note{position:relative;z-index:2;margin:2.6rem 0 0;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#f6f0e699}

.package-card--visual{display:block;padding:0;overflow:hidden}
.package-card__visual{margin:0;overflow:hidden;background:var(--sand)}
.package-card__visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .7s var(--ease)}
.package-card--visual:hover .package-card__visual img{transform:scale(1.04)}
.package-card__body{display:flex;flex-direction:column;align-items:flex-start;min-height:300px;padding:clamp(1.5rem,3.2vw,2.8rem)}
.package-card--visual .price{margin:auto 0 1.4rem}

.included__lead{margin:1.2rem 0 0;max-width:22rem;font-size:.95rem}
.included-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.included-strip li{min-width:0;overflow:hidden;background:var(--cream);border:1px solid var(--line);border-radius:16px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.included-strip li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(33,26,23,.1)}
.included-strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.included-strip li>div{display:grid;gap:.15rem;padding:.9rem 1rem 1.1rem}
.included-strip span{font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--clay)}
.included-strip b{font:500 1.05rem/1.35 "Kanit"}

.event-banner{position:relative;margin:0 0 2.5rem;overflow:hidden;border-radius:22px}
.event-banner img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.event-banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.6rem 1.2rem;font-size:.9rem;color:var(--cream);background:linear-gradient(0deg,rgba(11,25,35,.92),transparent)}

.faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.faq-visual{position:sticky;top:2rem;margin:0}
.faq-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.faq-visual figcaption{margin-top:.8rem;font-size:.78rem;font-weight:500;color:var(--clay)}
.faq-layout .faq-list{max-width:none;margin-left:0}

@media(max-width:1000px){.included-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-layout{grid-template-columns:1fr}.faq-visual{position:static}}
@media(max-width:700px){.rate-hero{min-height:auto;padding-top:5rem}.rate-hero__jump a{flex:1 1 100%}.included-strip{grid-template-columns:1fr 1fr;gap:.7rem}.included-strip b{font-size:.95rem}.event-banner img{aspect-ratio:16/10}.package-card__body{min-height:0}}
@media(max-width:480px){.included-strip{grid-template-columns:1fr}}

/* The degree scan is now cropped in the file, so show it whole and keep it small. */
.education-degree{max-width:340px}
.education-degree .media-open{aspect-ratio:1.21;border-radius:10px}
.education-degree img{object-fit:contain;object-position:center;transform:none;transition:transform .5s var(--ease)}
.education-degree .media-open:hover img{transform:scale(1.03)}
.certificate-card__undated{font-size:.7rem!important;font-weight:600;letter-spacing:.06em;color:var(--clay);opacity:.85}
.official-rate-card img{height:auto}

/* ---------- index: label-free section heads ---------- */
.statement.statement--plain{grid-template-columns:minmax(0,1fr)}
.section-head.section-head--plain{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
@media(max-width:700px){.section-head.section-head--plain{grid-template-columns:1fr}}

/* "แล้วคุยกันต่อ" now matches "และวางแผนงานร่วมกัน" on the resume page. */
.contact h2 em{color:#102a3a}

/* Rate carousel: a line of detail under the label and the counter. */
.rate-carousel__desc{margin:.7rem auto 0;max-width:46ch;text-align:center;font-size:clamp(.92rem,1.1vw,1.02rem);line-height:1.65;color:#211a17c4}

/* ---------- portfolio: masthead ---------- */
.resume-hero.resume-hero--v2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);grid-template-areas:"intro portrait" "facts facts";align-items:center;gap:clamp(2rem,5vw,4.5rem);min-height:0;padding:clamp(4.5rem,8vw,8rem) var(--pad) clamp(2.5rem,4vw,4rem)}
.resume-hero__intro{grid-area:intro;min-width:0}
.resume-hero--v2 .resume-portrait{grid-area:portrait;justify-self:end;width:100%;max-width:340px;margin:0}
.resume-hero--v2 h1{font:500 clamp(3.4rem,7vw,7rem)/.92 "Kanit";letter-spacing:-.045em;margin:.22em 0 .32em}
.resume-eyebrow{margin:0;font-size:clamp(.82rem,1vw,.95rem);font-weight:600;letter-spacing:.2em;color:var(--clay)}
.resume-hero--v2>div>p.resume-lead{max-width:34rem;margin:0;font-size:clamp(1.24rem,1.6vw,1.5rem);line-height:1.72}
.resume-hero--v2 .actions{margin-top:clamp(1.8rem,3vw,2.6rem)}
.resume-facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--line)}
.resume-facts>div{display:grid;gap:.55rem;align-content:start;min-width:0}
.resume-facts dt{font-size:clamp(.74rem,.9vw,.82rem);font-weight:600;letter-spacing:.18em;color:var(--clay)}
.resume-facts dd{margin:0;font:500 clamp(1.12rem,1.4vw,1.34rem)/1.5 "Kanit"}
.resume-facts .phone-contact-link{font:inherit}

/* ---------- portfolio: profile board ---------- */
.resume-grid.resume-grid--v2{display:block;border-top:1px solid var(--line);padding:clamp(4rem,7vw,7rem) var(--pad)}
.resume-board__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;padding-bottom:clamp(2.2rem,4vw,3.5rem);border-bottom:1px solid var(--line)}
.resume-grid--v2 h2{font:500 clamp(3rem,5.6vw,5.6rem)/.95 "Kanit";letter-spacing:-.035em;margin:.35rem 0 0}
.resume-board__lead{max-width:36rem;margin:0 0 .4rem;font-size:clamp(1.24rem,1.6vw,1.46rem);line-height:1.78}
.resume-board{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.25rem,2.5vw,2.25rem);align-items:start;margin-top:clamp(2.2rem,4vw,3.5rem)}
.resume-grid--v2 .resume-card{min-width:0;border:1px solid var(--line);border-radius:22px;background:var(--cream);padding:clamp(1.6rem,3vw,2.6rem)}
.resume-card--edu{grid-row:span 2}
.resume-grid--v2 .resume-eyebrow{margin:0 0 clamp(1.2rem,2vw,1.8rem)}
.resume-grid--v2 h3{font:500 clamp(1.4rem,1.9vw,1.75rem)/1.3 "Kanit";margin:0 0 .5rem}
.resume-edu{display:grid;gap:clamp(1.4rem,2.5vw,2rem)}
.resume-edu__item p{margin:0;font-size:clamp(1.08rem,1.3vw,1.24rem);line-height:1.8;color:#211a17cc}
.resume-edu .education-degree{margin:0;padding-top:.4rem;max-width:300px}
.resume-grid--v2 .skill-cloud{gap:.6rem}
.resume-grid--v2 .skill-cloud span{padding:.7rem 1.15rem;font-size:clamp(1.04rem,1.25vw,1.16rem)}
.resume-focus{list-style:none;margin:0;padding:0}
.resume-grid--v2 .resume-focus li{display:flex;gap:.85rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line);font-size:clamp(1.1rem,1.35vw,1.26rem);line-height:1.6}
.resume-grid--v2 .resume-focus li:first-child{padding-top:0}
.resume-grid--v2 .resume-focus li:last-child{padding-bottom:0;border-bottom:0}
.resume-focus li:before{content:"—";color:var(--clay);flex:0 0 auto}

@media(max-width:1000px){
  .resume-hero.resume-hero--v2{grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);gap:clamp(1.5rem,4vw,3rem)}
  .resume-board{grid-template-columns:1fr}
  .resume-card--edu{grid-row:auto}
  .resume-board__head{grid-template-columns:1fr;align-items:start;gap:1.5rem}
}
@media(max-width:820px){
  .resume-hero.resume-hero--v2{grid-template-columns:minmax(0,1fr);grid-template-areas:"portrait" "intro" "facts";padding-top:clamp(3.5rem,7vw,5rem)}
  .resume-hero--v2 .resume-portrait{justify-self:start;max-width:230px}
  .resume-facts{grid-template-columns:1fr 1fr}
  .resume-facts>div:last-child{grid-column:1/-1}
}
@media(max-width:520px){
  .resume-facts{grid-template-columns:1fr}
  .resume-facts>div:last-child{grid-column:auto}
  .resume-edu .education-degree{max-width:none}
}
@media print{
  .resume-hero.resume-hero--v2,.resume-grid.resume-grid--v2{display:block}
  .resume-grid--v2 .resume-card{border:0;padding:1.5rem 0;break-inside:avoid}
}

/* ---------- section heads without a label ---------- */
.section-head.section-head--center{display:block;text-align:center;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.section-head.section-head--left{display:block;text-align:left;margin-bottom:clamp(2rem,3.5vw,3rem)}

/* Service hero: the six steps drawn as a chain instead of a sentence. */
.flow-chain{list-style:none;margin:0;padding:0;counter-reset:flow}
.flow-chain li{position:relative;counter-increment:flow;padding:0 0 1.05rem 2.35rem;font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.35;color:#f6f0e6e8}
.flow-chain li:before{content:counter(flow,decimal-leading-zero);position:absolute;left:0;top:-.1rem;display:grid;place-items:center;width:1.65rem;height:1.65rem;border:1px solid currentColor;border-radius:50%;font-size:.6rem;font-weight:600;letter-spacing:.04em;opacity:.9}
.flow-chain li:after{content:"";position:absolute;left:.82rem;top:1.75rem;bottom:.2rem;width:1px;background:currentColor;opacity:.32}
.flow-chain li:last-child{padding-bottom:0}
.flow-chain li:last-child:after{display:none}
@media(max-width:700px){.flow-chain{margin-top:1.5rem}.flow-chain li{padding-bottom:.85rem}}

/* ---------- portfolio: degree beside its entry, with a milestone pin ---------- */
.resume-edu__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(1rem,2vw,1.75rem);align-items:start}
.resume-edu__row .education-degree{max-width:none;margin:0;padding-top:.35rem}
.education-degree{position:relative}
.degree-pin{position:absolute;z-index:2;top:.5rem;left:.5rem;padding:.3rem .7rem;border-radius:99px;background:var(--ink);color:var(--cream);font-size:.66rem;font-weight:600;letter-spacing:.08em;box-shadow:0 6px 16px rgba(33,26,23,.22)}
@media(max-width:620px){.resume-edu__row{grid-template-columns:1fr;gap:1rem}.resume-edu__row .education-degree{max-width:300px}}

/* ---------- rate card page: tighter scale, package-first ---------- */
body[data-page="services"] .section-pad{padding-top:clamp(3.25rem,5.5vw,5.5rem);padding-bottom:clamp(3.25rem,5.5vw,5.5rem)}
body[data-page="services"] .rate-hero{min-height:clamp(330px,44svh,460px);padding:clamp(3.5rem,6vw,5.5rem) var(--pad) clamp(1.6rem,2.5vw,2.25rem)}
body[data-page="services"] .rate-hero h1{font-size:clamp(2.5rem,4.4vw,4.2rem)}
body[data-page="services"] .rate-hero__jump{margin-top:1.6rem;gap:.7rem}
body[data-page="services"] .rate-hero__jump a{padding:.8rem 1.2rem;border-radius:14px}
body[data-page="services"] .rate-hero__jump strong{font-size:clamp(1.2rem,1.8vw,1.6rem)}
body[data-page="services"] .rate-hero__note{margin-top:1.7rem}
.rate-hero__note a{border-bottom:1px solid;color:var(--orange)}
body[data-page="services"] .package-intro{margin-bottom:2.25rem}
body[data-page="services"] .package-intro h2,body[data-page="services"] .section-head h2{font-size:clamp(2.1rem,3.7vw,3.4rem)}
body[data-page="services"] .included h2{font-size:clamp(1.9rem,3vw,2.8rem)}
body[data-page="services"] .package-card h3{font-size:clamp(1.55rem,2.3vw,2.2rem)}
body[data-page="services"] .package-card__body{min-height:0;padding:clamp(1.35rem,2.3vw,2rem)}
body[data-page="services"] .price{font-size:clamp(2.5rem,3.5vw,3.9rem);margin:auto 0 1.15rem}
body[data-page="services"] .event-card h3{font-size:clamp(1.35rem,2vw,1.85rem)}
body[data-page="services"] .event-card>strong{font-size:clamp(2.1rem,3.1vw,3.1rem)}
body[data-page="services"] .included{margin-top:clamp(2.75rem,4.5vw,4rem);padding-top:clamp(2.25rem,3.5vw,3rem)}
body[data-page="services"] .addon{margin-top:2.25rem}
body[data-page="services"] .event-banner{margin-bottom:2rem}
body[data-page="services"] .event-banner img{aspect-ratio:2.8/1}
body[data-page="services"] .section-head{margin-bottom:2.5rem}

.package-flag{display:flex;align-items:center;gap:.6rem}
.package-flag b{padding:.22rem .6rem;border-radius:99px;background:var(--ink);color:var(--cream);font-size:.62rem;font-weight:600;letter-spacing:.06em}

.custom-pack{background:var(--sand)}
.custom-pack__inner{max-width:52rem}
.custom-pack h2{font:500 clamp(2.1rem,3.7vw,3.4rem)/1 "Kanit";letter-spacing:-.03em;margin:.35rem 0 .9rem}
.custom-pack p{margin:0;max-width:40rem;font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.75}
.custom-pack .actions{margin-top:1.8rem}
.custom-pack .line-contact-link img{border-radius:6px}

/* ---------- round 4 ---------- */
/* Label-free package intros: heading flush left, a touch larger. */
.package-intro.package-intro--plain{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
body[data-page="services"] .package-intro--plain h2{font-size:clamp(2.4rem,4.2vw,4rem)}
@media(max-width:1000px){.package-intro.package-intro--plain{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}}
@media(max-width:700px){.package-intro.package-intro--plain{grid-template-columns:1fr}}

/* Rate card images now sit straight under the custom block, with no captions. */
body[data-page="services"] .rate-card-section{padding-top:0}
.rate-card-grid .official-rate-card{border-radius:14px;overflow:hidden}

/* FAQ head: centred and larger. */
.section-head.section-head--big h2{font-size:clamp(2.4rem,4.4vw,4.2rem)}
body[data-page="services"] .section-head--big h2{font-size:clamp(2.4rem,4.4vw,4.2rem)}
.section-head--center>p:last-child{max-width:none;margin-left:auto;margin-right:auto}
.section-head--center .section-no{margin-bottom:.6rem}

/* Nickname above the full name. */
.contact-nickname{display:block;font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--ink);opacity:.72;margin-bottom:.35rem}

/* Profile heading: two tones, one per line, a touch larger. */
.resume-grid--v2 h2.resume-board__title{font-size:clamp(3.3rem,6.2vw,6.2rem);margin:0}

/* ---------- round 5 ---------- */
/* Tighter vertical rhythm across every page. */
.section-pad{padding-top:clamp(3.25rem,5.5vw,5.5rem);padding-bottom:clamp(3.25rem,5.5vw,5.5rem)}
.section-head{margin-bottom:clamp(2rem,3.5vw,3rem)}
.statement{gap:3vw}
.resume-hero.resume-hero--v2{padding:clamp(3.5rem,6vw,6rem) var(--pad) clamp(2rem,3vw,3rem);gap:clamp(1.75rem,4vw,3.5rem)}
.resume-facts{margin-top:clamp(1.25rem,2.5vw,2rem);padding-top:clamp(1.25rem,2.5vw,1.8rem)}
.resume-grid.resume-grid--v2{padding:clamp(3.25rem,5.5vw,5.5rem) var(--pad)}
.resume-board__head{padding-bottom:clamp(1.75rem,3vw,2.6rem)}
.resume-board{margin-top:clamp(1.75rem,3vw,2.6rem)}
.workflow__link{margin-top:1.5rem}
.custom-pack .actions{margin-top:1.5rem}

/* Phone + LINE stacked under CONTACT on the resume masthead. */
.resume-facts__links{display:grid;gap:.5rem;justify-items:start}
.resume-facts__links a{font:inherit}
.line-contact-link{display:inline-flex;align-items:center;gap:.5em}
.resume-facts__links img{width:26px;height:26px;flex:0 0 auto}

/* FAQ head: label left, heading centred, note right. */
.section-head.section-head--split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.25rem,3vw,3rem);align-items:center;text-align:center}
.section-head--split .section-no{justify-self:start;text-align:left;margin:0}
.section-head--split h2{margin:0}
.section-head--split>p:last-child{justify-self:end;text-align:right;max-width:22rem;margin:0}
@media(max-width:820px){
  .section-head.section-head--split{display:block;text-align:center}
  .section-head--split h2{margin:.5rem 0}
  .section-head--split .section-no,.section-head--split>p:last-child{justify-self:center;text-align:center}
}

/* Credential grid: wider cards, even heights, tidier line breaks. */
#certificateGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;grid-auto-rows:1fr}
#certificateGrid .certificate-card{display:flex;flex-direction:column;height:100%}
#certificateGrid .certificate-card figcaption{flex:1;padding:1rem 1.1rem 1.15rem;gap:.38rem}
#certificateGrid .certificate-card figcaption strong{font-size:clamp(1rem,1.05vw,1.12rem);line-height:1.3;text-wrap:balance;overflow-wrap:normal}
#certificateGrid .certificate-card__issuer{font-size:.76rem;line-height:1.5;overflow-wrap:normal;text-wrap:pretty}
#certificateGrid .certificate-card figcaption p{font-size:.78rem;line-height:1.6;margin:.1rem 0 .55rem;text-wrap:pretty}
#certificateGrid .certificate-card__view{margin-top:auto}
@media(max-width:1250px){#certificateGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){#certificateGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#certificateGrid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ---------- round 6: framing for the new Rate Card photography ---------- */
/* Hero 2092x752. Wide screens show the full frame, so the dark wall on the left
   stays clear for the headline. Narrow screens crop hard, so bias right to keep
   the camera crew in frame — the 90deg shade still darkens the text side. */
.rate-hero__image{object-fit:cover;object-position:50% 42%}
@media(max-width:900px){.rate-hero__image{object-position:66% 45%}}
@media(max-width:520px){.rate-hero__image{object-position:70% 45%}}

/* Package visuals are 16:9 in a 16:9 box — no crop, centre is safe.
   Below 700px the card is full width and the box stays 16:9, still no crop. */
.rate-visual{object-fit:cover;object-position:50% 50%}
.rate-visual--halfday{object-position:50% 46%}
.rate-visual--fullday{object-position:50% 48%}

/* Event banner 2098x749 matches the 2.8/1 box exactly on desktop.
   The mobile box is 16/10, so lift the crop to keep the stage and speaker. */
.event-banner img{object-fit:cover;object-position:50% 46%}
@media(max-width:700px){.event-banner img{object-position:44% 34%}}

/* FAQ visual is 4:3 in a 4:3 box — no crop. */
.faq-visual img{object-fit:cover;object-position:50% 48%}
/* The 2.8:1 event banner collapses to ~120px on a phone and the caption swamps it. */
@media(max-width:700px){body[data-page="services"] .event-banner img{aspect-ratio:3/2}.event-banner figcaption{padding:2.2rem 1.1rem 1rem;font-size:.82rem}}

/* ================= Portfolio v3: intro + milestones ================= */
/* --- intro --- */
.resume-hero.resume-hero--v3{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);grid-template-areas:"intro portrait" "strip strip";align-items:center;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,5rem);min-height:0;background:var(--sand);padding:clamp(3.5rem,6vw,5.5rem) var(--pad) 0}
.resume-hero--v3 .resume-hero__intro{grid-area:intro;min-width:0;padding-bottom:clamp(2rem,4vw,3.5rem)}
.resume-hero--v3 h1{font:500 clamp(3.4rem,7.4vw,7.2rem)/.92 "Kanit";letter-spacing:-.045em;margin:.2em 0 .3em}
.resume-hero--v3 .resume-eyebrow{font-size:clamp(.85rem,1.05vw,1rem);letter-spacing:.22em}
.resume-hero--v3>div>p.resume-lead{max-width:36rem;margin:0;font-size:clamp(1.3rem,1.75vw,1.62rem);line-height:1.62;color:#211a17e0}
.resume-hero--v3 .actions{margin-top:clamp(1.8rem,3vw,2.5rem)}
.resume-hero--v3 .button{padding:1rem 1.7rem;font-size:clamp(1.02rem,1.2vw,1.12rem);gap:.6rem}
.resume-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;margin-top:clamp(1.5rem,2.5vw,2rem);padding-top:clamp(1.1rem,2vw,1.5rem);border-top:1px solid var(--line);font:500 clamp(1rem,1.2vw,1.12rem) "Kanit"}
.resume-hero__place{color:var(--clay);font-weight:600;letter-spacing:.04em}
.resume-hero__meta img{width:26px;height:26px;flex:0 0 auto}

.resume-portrait--v3{position:relative;grid-area:portrait;justify-self:end;width:100%;max-width:400px;margin:0;padding:0;background:none;box-shadow:none}
.resume-portrait--v3:before{content:"";position:absolute;z-index:0;left:-12%;top:-6%;width:86%;aspect-ratio:1;border-radius:50%;background:var(--cream)}
.resume-portrait--v3:after{content:"";position:absolute;z-index:0;right:-7%;top:16%;width:34%;height:74%;border-radius:12px;background:#dcc7ab}
.resume-portrait--v3 img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;border-radius:14px}

.focus-strip{grid-area:strip;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:clamp(1.5rem,2.5vw,2.2rem) 0 clamp(2rem,3.5vw,3rem);border-top:1px solid var(--line)}
.focus-strip li{position:relative;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no title" "no text";column-gap:1rem;row-gap:.3rem;padding:.2rem clamp(1rem,2vw,2rem)}
.focus-strip li+li{border-left:1px solid var(--line)}
.focus-strip li:first-child{padding-left:0}
.focus-strip li:last-child{padding-right:0}
.focus-strip span{grid-area:no;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--cream);color:var(--clay);font:600 1.1rem "Kanit"}
.focus-strip b{grid-area:title;align-self:center;font:500 clamp(1.18rem,1.5vw,1.42rem)/1.25 "Kanit"}
.focus-strip p{grid-area:text;margin:0;font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.6;color:#211a17c4}

/* --- milestones --- */
.milestones{background:var(--cream);border-top:1px solid var(--line)}
.milestones__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;padding-bottom:clamp(2rem,3.5vw,3rem)}
.milestones__head h2{font:500 clamp(2.8rem,6vw,5.6rem)/.98 "Kanit";letter-spacing:-.035em;margin:.3rem 0 0}
.milestones__lead{margin:0 0 .4rem;font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.6;color:#211a17cc;border-left:1px solid var(--line);padding-left:clamp(1.25rem,2.5vw,2.25rem)}

.milestone-track{list-style:none;margin:0;padding:clamp(1.75rem,3vw,2.5rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);position:relative}
.milestone-track:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.milestone{position:relative;min-width:0;display:flex;flex-direction:column;background:#efe6d6;border:1px solid var(--line);border-radius:20px;padding:clamp(1.5rem,2.6vw,2.2rem)}
.milestone:before{content:"";position:absolute;top:calc(-1 * clamp(1.75rem,3vw,2.5rem) - 6px);left:clamp(1.5rem,2.6vw,2.2rem);width:13px;height:13px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 5px var(--cream)}
.milestone__no{font:600 clamp(1.5rem,2vw,1.9rem)/1 "Kanit";color:var(--clay);letter-spacing:-.02em}
.milestone h3{font:500 clamp(1.42rem,2vw,1.85rem)/1.28 "Kanit";margin:.6rem 0 .5rem}
.milestone>p{margin:0;font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.75;color:#211a17cc}
.milestone__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:auto;padding-top:clamp(1.25rem,2.2vw,1.8rem)}
.milestone__icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--cream);color:var(--clay);flex:0 0 auto}
.milestone__icon svg{width:1.7rem;height:1.7rem}
.milestone__proof{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .8rem .35rem .35rem;border:1px solid var(--line);border-radius:99px;background:var(--cream);cursor:zoom-in;font:600 .82rem "Prompt";transition:.3s var(--ease)}
.milestone__proof:hover{transform:translateY(-2px);border-color:var(--clay)}
.milestone__proof img{width:42px;height:35px;object-fit:cover;border-radius:6px}
.milestone--now{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.milestone--now .milestone__no{color:#f6d9c8}
.milestone--now>p{color:#f6f0e6e0}
.milestone--now .milestone__icon{background:var(--cream);color:var(--clay)}
.milestone--now:before{background:var(--ink)}

.research-band{position:relative;display:flex;align-items:center;overflow:hidden;border-radius:22px;margin-top:clamp(1.5rem,2.5vw,2.25rem);min-height:clamp(180px,20vw,230px);background:var(--ink)}
.research-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.research-band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,17,14,.96) 0%,rgba(24,17,14,.85) 42%,rgba(24,17,14,.15) 100%)}
.research-band__body{position:relative;z-index:1;padding:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.8rem);color:var(--cream);max-width:36rem}
.research-band__body .resume-eyebrow{color:var(--orange)}
.research-band__body h3{font:500 clamp(1.6rem,2.8vw,2.6rem)/1.2 "Kanit";margin:.5rem 0 .35rem}
.research-band__body p:last-child{margin:0;font-size:clamp(1.02rem,1.2vw,1.15rem);color:#f6f0e6c9}

.skill-strip{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem clamp(1rem,2vw,2rem);margin:clamp(2rem,3.5vw,3rem) 0 0;padding-top:clamp(1.5rem,2.5vw,2rem);border-top:1px solid var(--line)}
.skill-strip li{font-size:clamp(.78rem,.9vw,.86rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.skill-strip li+li:before{content:"/";margin-right:clamp(1rem,2vw,2rem);color:var(--line);font-weight:400}

@media(max-width:1000px){
  .resume-hero.resume-hero--v3{grid-template-columns:minmax(0,1fr) minmax(240px,.75fr);gap:clamp(1.5rem,3vw,2.5rem)}
  .focus-strip{grid-template-columns:1fr;gap:1.4rem}
  .focus-strip li+li{border-left:0;border-top:1px solid var(--line);padding-top:1.4rem}
  .focus-strip li{padding-left:0;padding-right:0}
  .milestones__head{grid-template-columns:1fr;align-items:start}
  .milestones__lead{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.25rem;margin-bottom:0}
  .milestone-track{grid-template-columns:1fr}
  .milestone:before{display:none}
  .milestone-track:before{display:none}
}
@media(max-width:820px){
  .resume-hero.resume-hero--v3{grid-template-columns:minmax(0,1fr);grid-template-areas:"portrait" "intro" "strip";padding-top:clamp(2.5rem,6vw,4rem)}
  .resume-portrait--v3{justify-self:start;max-width:260px}
  .resume-hero--v3 .resume-hero__intro{padding-bottom:0}
  .research-band{flex-direction:column;align-items:stretch;min-height:0}
  .research-band img{position:relative;height:160px}
  .research-band:after{inset:auto 0 0 0;height:100%;background:linear-gradient(0deg,rgba(24,17,14,.97) 46%,rgba(24,17,14,.4) 100%)}
  .research-band__body{max-width:none}
}
@media(max-width:520px){
  .resume-hero__meta{gap:.6rem 1rem;font-size:1rem}
  .skill-strip{justify-content:flex-start}
}
@media print{.resume-hero.resume-hero--v3,.milestones{display:block}.milestone--now{background:none;color:inherit}}

/* ---------- supplied icon set + certificates backdrop ---------- */
.milestone__icon-svg{width:100%;height:100%;display:block}
.milestone__icon{padding:.78rem}
.milestone--now .milestone__icon{color:var(--clay)}
.certificate-card__icon{width:.95rem;height:.95rem;flex:0 0 auto;stroke-width:3.4}
.certificate-card__type{display:inline-flex;align-items:center;gap:.4rem}
.certs.certs--bg{position:relative;background-image:linear-gradient(rgba(246,240,230,.86),rgba(246,240,230,.9)),url("assets/certs-bg.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- portrait backdrop: larger photo, layered shapes (matches the ref) ---------- */
.resume-hero--v3 .resume-portrait--v3{max-width:clamp(320px,34vw,470px)}
.resume-portrait--v3:before{left:-26%;top:-9%;width:112%;aspect-ratio:1;background:#fbf6ec}
.resume-portrait--v3:after{right:-11%;top:9%;width:30%;height:84%;border-radius:10px;background:#ddc9ad}
.resume-portrait--v3 img{aspect-ratio:4/4.6;object-position:50% 18%;border-radius:10px;box-shadow:0 26px 60px rgba(33,26,23,.16)}
.resume-hero--v3 .resume-hero__intro{position:relative}
@media(min-width:1001px){.resume-hero--v3 .resume-hero__intro:after{content:"";position:absolute;right:calc(-1 * clamp(1rem,2.5vw,2.5rem));top:14%;bottom:26%;width:1px;background:var(--line)}}
@media(max-width:820px){.resume-hero--v3 .resume-portrait--v3{max-width:280px}.resume-portrait--v3:before{left:-18%;width:100%}.resume-portrait--v3:after{right:-8%;width:24%}}

/* ---------- milestones: icon leads the heading, degree shown as a picture ---------- */
.milestone__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem;margin-bottom:.85rem}
.milestone__head h3{margin:0}
.milestone__head .milestone__icon{width:3rem;height:3rem;padding:.62rem}
.milestone__degree{position:relative;margin:auto 0 0;padding-top:clamp(1.1rem,2vw,1.5rem)}
.milestone__degree button{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in}
.milestone__degree img{display:block;width:100%;height:auto;aspect-ratio:1.21;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;transition:transform .45s var(--ease)}
.milestone__degree button:hover img{transform:scale(1.03)}

/* ---------- certificates backdrop: let the gradient actually read ---------- */
.certs.certs--bg{background-image:linear-gradient(rgba(246,240,230,.58),rgba(246,240,230,.68)),url("assets/certs-bg.jpg")}
/* Degree proof reads as a small reference, not a feature image. */
.milestone__degree{max-width:190px}
@media(max-width:1000px){.milestone__degree{max-width:210px}}

/* v25 — showreel background for the "เรื่องของคุณ พร้อมเล่า เป็นวิดีโอแล้ว" statement */
.statement--reel{position:relative;isolation:isolate;overflow:hidden;align-content:center;min-height:clamp(480px,66svh,720px);background:var(--ink);color:var(--cream)}
.statement--reel .statement__video,.statement--reel .statement__shade{position:absolute;inset:0;width:100%;height:100%;border:0}
.statement--reel .statement__video{object-fit:cover;object-position:center;z-index:0;pointer-events:none;background:var(--ink)}
.statement--reel .statement__shade{z-index:1;background:linear-gradient(90deg,rgba(18,13,11,.9) 0%,rgba(18,13,11,.76) 44%,rgba(18,13,11,.42) 100%),linear-gradient(0deg,rgba(18,13,11,.55),transparent 58%)}
.statement--reel>div{position:relative;z-index:2}
.statement--reel p{color:#f6f0e6d6}
@media(max-width:700px){.statement--reel{min-height:58svh}.statement--reel .statement__video{object-position:58% center}.statement--reel .statement__shade{background:linear-gradient(0deg,rgba(18,13,11,.94) 0%,rgba(18,13,11,.66) 55%,rgba(18,13,11,.34) 100%)}}
@media(prefers-reduced-motion:reduce){.statement--reel .statement__video{display:none}.statement--reel{background:var(--ink) url("assets/showreel-statement-poster.jpg") center/cover no-repeat}}

/* v26 — lighter mobile motion, reliable reel fallback, shorter portfolio */
.marquee div{display:flex;animation-duration:30s;will-change:transform}
.marquee div>span{display:inline-block;flex:0 0 auto}
.statement--reel{background:var(--ink) url("assets/showreel-statement-poster.jpg") center/cover no-repeat}
.statement--reel .statement__video{opacity:0;background:transparent;transition:opacity .35s ease}
.statement--reel .statement__video.is-playing{opacity:1}
.milestones.section-pad{padding-bottom:clamp(3rem,5vw,5rem)}
@media(max-width:700px){.marquee div{animation-duration:44s}}

/* v27 — single-line milestone titles and portfolio location marker */
.resume-hero__place{display:inline-flex;align-items:center;gap:.5rem}
.resume-hero__place img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.milestone__head{grid-template-columns:2.75rem minmax(0,1fr);gap:.7rem}
.milestone__head .milestone__icon{width:2.75rem;height:2.75rem;padding:.55rem}
.milestone__head h3{font-size:clamp(.95rem,1.15vw,1.5rem);line-height:1.15;letter-spacing:-.025em;white-space:nowrap}
.milestone__detail{line-height:1.75;margin-top:.7rem}
@media(max-width:520px){.milestone{padding:1.2rem}.milestone__head{grid-template-columns:2.35rem minmax(0,1fr);gap:.5rem}.milestone__head .milestone__icon{width:2.35rem;height:2.35rem;padding:.48rem}.milestone__head h3{font-size:.95rem;letter-spacing:-.04em}}

/* v28 — larger single-line milestone titles and calmer mobile marquee */
.milestone{container-type:inline-size}
.milestone__head h3{font-size:clamp(1.05rem,4.5cqw,1.8rem);letter-spacing:-.045em}
@media(max-width:700px){.marquee div{animation-duration:80s}}

/* v29 — Music Video service copy and structured portfolio experience */
#music-video-packages{scroll-margin-top:96px}
.music-video-packages{background:var(--clay)}
.music-video-packages .package-intro em{color:#f7d6c4}
.music-video-packages .event-card__code{background:var(--ink)}
.music-video-card__note{margin:.25rem 0 0;font:500 clamp(1.05rem,1.5vw,1.28rem)/1.4 "Kanit";color:var(--clay)}
.milestone__detail{font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.75;color:#211a17cc}
.milestone__detail p{margin:0 0 .55rem;font-weight:500;color:var(--ink)}
.milestone__detail ol{margin:0;padding-left:1.45rem}
.milestone__detail li{padding:.18rem 0}

/* v30 — clearer graduate-study hierarchy */
.milestone__study{display:grid;gap:.65rem}
.milestone__study h4{margin:0;font:500 clamp(1.02rem,1.25vw,1.18rem)/1.5 "Kanit";color:#f6f0e6e8}

/* ---- 2026-10-10 ---- */

/* Workflow steps: small framed stills, same size across the three cards, less page height. */
.workflow.section-pad{padding-top:clamp(2.75rem,4.2vw,4rem);padding-bottom:clamp(2.75rem,4.2vw,4rem)}
.workflow .section-head{margin-bottom:1.9rem}
.workflow-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem;background:none}
.workflow-grid article{background:#2b221e;border:1px solid #f6f0e61f;border-radius:14px;padding:1.1rem 1rem 1.2rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.workflow-grid img{width:100%;max-width:216px;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;margin:0 auto .85rem;padding:7px;background:#f6f0e6;border:1px solid #c8ae87;border-radius:3px;box-shadow:0 12px 26px #00000047;filter:saturate(.95)}
.workflow-grid article>div{padding:0;max-width:30ch}
.workflow-grid h3{font-size:clamp(1.15rem,1.5vw,1.4rem);margin:.4rem 0 .3rem}
.workflow-grid p{font-size:.92rem;line-height:1.55}
.workflow__link{margin-top:1.6rem}
@media(max-width:1000px){
  .workflow-grid{grid-template-columns:repeat(3,1fr)}
  .workflow-grid article{display:flex;grid-template-columns:none}
  .workflow-grid img{height:auto;aspect-ratio:4/3;max-width:180px}
}
@media(max-width:700px){
  .workflow-grid{grid-template-columns:1fr;gap:.75rem}
  .workflow-grid article{flex-direction:row;align-items:center;text-align:left;gap:.95rem;padding:.8rem}
  .workflow-grid img{width:112px;max-width:112px;flex:0 0 auto;margin:0;padding:5px}
  .workflow-grid article>div{max-width:none}
  .workflow-grid h3{font-size:1.08rem;margin:.3rem 0 .2rem}
  .workflow-grid p{font-size:.85rem}
}

/* Contact sign-off: the nickname leads, the full name sits under it. */
.contact .contact-name{font:400 1rem/1.4 "Prompt";letter-spacing:0;margin:0 0 .8rem}
.contact .contact-name .contact-nickname{display:block;font:500 clamp(1.9rem,3.2vw,2.9rem)/1.1 "Kanit";letter-spacing:-.025em;color:var(--ink);opacity:1;margin-bottom:.1rem}
.contact .contact-name .contact-fullname{display:block;font-size:.95rem;font-weight:400;letter-spacing:.01em;color:var(--ink);opacity:.66}

/* Four rate-card entries now sit in the hero, so each one is tighter on a phone. */
@media(max-width:700px){
  body[data-page="services"] .rate-hero__jump{gap:.5rem;margin-top:1.3rem}
  body[data-page="services"] .rate-hero__jump a{gap:.2rem;padding:.6rem .95rem;border-radius:12px}
  body[data-page="services"] .rate-hero__jump span{font-size:.63rem;letter-spacing:.1em}
  body[data-page="services"] .rate-hero__jump strong{font-size:1.3rem}
  body[data-page="services"] .rate-hero__note{margin-top:1.3rem}
}

/* Rate carousel: no caption text under the image — dots carry the position. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rate-carousel__dots{display:flex;justify-content:center;align-items:center;gap:.5rem}
.rate-carousel__dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#211a1740;cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease)}
.rate-carousel__dot:hover{background:#211a1770}
.rate-carousel__dot[aria-current="true"]{width:26px;background:var(--orange)}
.rate-carousel__dot:focus-visible{outline:3px solid var(--orange);outline-offset:3px}