/* Thai Easy International — portable "About us" module.
   Everything is scoped to .te-about. To re-colour for another site, override the --ta-* variables below
   (for example: .te-about{--ta-accent:#0f5c4d;--ta-accent-deep:#0a3f35}). See modules/about/README.md. */

.te-about{
 --ta-accent:#38205f;--ta-accent-deep:#2a1749;--ta-accent-soft:#6b4a9c;--ta-tint:#f4effa;--ta-tint-line:#e2d8ee;
 --ta-gold:#aa8345;--ta-gold-ink:#8a682f;--ta-gold-soft:#dcc08d;
 --ta-ink:#221536;--ta-muted:#665c72;--ta-line:#e6dfed;--ta-paper:#fbf9f6;--ta-card:#fff;--ta-on-accent:#fff;
 --ta-serif:'Fraunces','Noto Serif TC',Georgia,serif;--ta-sans:'IBM Plex Sans','Noto Sans TC',system-ui,-apple-system,sans-serif;
 --ta-max:1280px;--ta-gutter:clamp(22px,4.6vw,64px);--ta-inset:10px;--ta-radius:20px;--ta-radius-lg:32px;
 --ta-ease:cubic-bezier(.16,.7,.24,1);--ta-shadow:0 30px 70px -36px rgba(34,21,54,.34);
 background:var(--ta-paper);color:var(--ta-ink);font:400 16px/1.7 var(--ta-sans);-webkit-font-smoothing:antialiased
}
.te-about:lang(zh-Hant){line-height:1.85}
.te-about *,.te-about *::before,.te-about *::after{box-sizing:border-box}
.te-about :where(h1,h2,h3,p,figure,ul,blockquote,address){margin:0;padding:0}
.te-about :is(h1,h2,h3){color:inherit;font-family:var(--ta-serif);font-weight:400;line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.te-about :is(h1,h2) em{color:var(--ta-accent-soft);font-style:italic;font-weight:300}
.te-about:lang(zh-Hant) :is(h1,h2,h3){font-weight:500;line-height:1.32;letter-spacing:.01em}
.te-about:lang(zh-Hant) :is(h1,h2) em{font-style:normal;font-weight:500}
.te-about :where(p){color:var(--ta-muted);text-wrap:pretty}
.te-about :where(ul){list-style:none}
.te-about img{display:block;max-width:100%}
.te-about :where(a){color:inherit;text-decoration:none}
.te-about address{font-style:normal}
.te-about :focus-visible{outline:2px solid var(--ta-accent-soft);outline-offset:4px;border-radius:4px}
.ta-wrap{width:min(var(--ta-max),100% - var(--ta-gutter)*2);margin-inline:auto}
.ta-section{padding:clamp(72px,9vw,132px) 0}
.ta-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px;color:var(--ta-gold-ink);font:500 .75rem/1.4 var(--ta-sans);letter-spacing:.2em;text-transform:uppercase}
.ta-eyebrow::before{content:'';flex:none;width:28px;height:1px;background:currentColor;opacity:.7}
.ta-link{display:inline-block;padding-bottom:5px;font-size:.92rem;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--ta-ease),color .3s}
.ta-link:hover{background-size:38% 1px;color:var(--ta-accent-soft)}

/* Section heading: title on the left, supporting copy on the right */
.ta-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.ta-head>.ta-eyebrow,.ta-head>h2{grid-column:1}
.ta-head h2{font-size:clamp(2.1rem,3.7vw,3.5rem)}
.te-about:lang(zh-Hant) .ta-head h2{font-size:clamp(1.8rem,3.1vw,2.9rem)}
.ta-head-copy{grid-column:2;grid-row:1/span 2;align-self:end;display:grid;gap:14px;max-width:440px;justify-self:end;padding-bottom:.4em}
.ta-head-copy p:first-child{color:var(--ta-ink)}

/* Opening: headline, team photograph, figures */
.ta-hero{padding-top:clamp(36px,5.5vw,84px)}
.ta-hero-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.ta-hero h1{font-size:clamp(2.6rem,5.2vw,4.8rem);font-weight:300;line-height:1.02;letter-spacing:-.03em}
.te-about:lang(zh-Hant) .ta-hero h1{font-size:clamp(2.2rem,4.3vw,3.9rem);line-height:1.25}
.ta-hero-lead p{color:var(--ta-ink);font-size:1.08rem}
.ta-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ta-langs li{padding:6px 16px;border:1px solid var(--ta-line);border-radius:999px;color:var(--ta-accent);font-size:.85rem}
.ta-hero-photo{margin:0 var(--ta-inset);aspect-ratio:21/9;border-radius:var(--ta-radius-lg);overflow:hidden;background:var(--ta-tint)}
.ta-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ta-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(-64px,-4.5vw,-36px);padding:clamp(22px,2.6vw,34px) 0;border-radius:var(--ta-radius);background:var(--ta-card);box-shadow:var(--ta-shadow)}
.ta-stats div{padding:0 clamp(18px,2.6vw,40px)}
.ta-stats div+div{border-left:1px solid var(--ta-line)}
.ta-stats strong{display:block;color:var(--ta-accent);font-family:var(--ta-serif);font-weight:300;font-size:clamp(2.4rem,4.4vw,4rem);line-height:1;letter-spacing:-.03em}
.ta-stats span{display:block;margin-top:10px;color:var(--ta-muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}

/* Team photographs */
.ta-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,260px);gap:12px}
.ta-photo{position:relative;overflow:hidden;border-radius:var(--ta-radius);background:var(--ta-tint)}
.ta-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ta-ease)}
.ta-photo:hover img{transform:scale(1.04)}
.ta-gallery-lead{grid-column:span 2;grid-row:span 2}
.ta-photo figcaption{position:absolute;inset:auto 0 0;padding:40px 18px 14px;background:linear-gradient(180deg,transparent,rgba(24,12,44,.62));color:#fff;font-size:.8rem;letter-spacing:.04em}

/* How we work */
.ta-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
.ta-compare-col{padding:clamp(28px,3.4vw,44px);border:1px solid var(--ta-line);border-radius:var(--ta-radius)}
.ta-compare-col h3{margin-bottom:18px;font-size:1.35rem}
.ta-compare-col li{position:relative;padding:15px 0 15px 26px;border-top:1px solid var(--ta-line);color:var(--ta-muted)}
.ta-compare-col li::before{content:'';position:absolute;left:2px;top:1.6em;width:10px;height:1px;background:currentColor}
.ta-compare-ours{border-color:transparent;background:linear-gradient(135deg,var(--ta-accent-deep),var(--ta-accent));color:var(--ta-on-accent)}
.ta-compare-ours li{border-color:rgba(255,255,255,.16);color:var(--ta-on-accent)}
.ta-compare-ours li::before{top:1.4em;width:7px;height:7px;border-radius:50%;background:var(--ta-gold-soft)}

/* Resource centre */
.ta-resources{margin:0 var(--ta-inset);border-radius:var(--ta-radius-lg);background:var(--ta-tint)}
.ta-centres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ta-centres article{padding:28px 26px 30px;border-radius:var(--ta-radius);background:var(--ta-card)}
.ta-centres span{color:var(--ta-gold);font-family:var(--ta-serif);font-style:italic;font-weight:300;font-size:1.9rem;line-height:1}
.ta-centres h3{margin:18px 0 10px;font-size:1.25rem}
.ta-centres p{font-size:.92rem}
.ta-quote{max-width:780px;margin:clamp(44px,5vw,68px) auto 0;color:var(--ta-accent);font-family:var(--ta-serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.35;text-align:center;text-wrap:balance}
.te-about:lang(zh-Hant) .ta-quote{font-style:normal;font-weight:500;line-height:1.6}

/* Brands */
.ta-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ta-brand{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.2vw,42px);border:1px solid var(--ta-line);border-radius:var(--ta-radius);background:var(--ta-card);transition:transform .45s var(--ta-ease),box-shadow .45s}
.ta-brand:hover{transform:translateY(-4px);box-shadow:var(--ta-shadow)}
.ta-brand h3{font-size:clamp(1.6rem,2.4vw,2rem);letter-spacing:-.01em}
.te-about .ta-brand h3{font-weight:400;line-height:1.15}
.ta-brand h3 em{color:var(--ta-accent-soft);font-style:italic;font-weight:300}
.ta-brand-tag{margin-top:10px;color:var(--ta-gold-ink);font-size:.82rem;font-weight:500;letter-spacing:.06em}
.ta-brand p+p{margin-top:16px}
.ta-brand .ta-link{margin-top:auto;padding-top:26px;background-position:0 100%;color:var(--ta-accent)}

/* Contact */
.ta-contact{padding-top:0}
.ta-contact-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px clamp(40px,6vw,96px);align-items:end;padding:clamp(36px,5vw,72px);border-radius:var(--ta-radius-lg);background:radial-gradient(80% 120% at 100% 0,#5a3d86 0,transparent 60%),linear-gradient(135deg,var(--ta-accent-deep),var(--ta-accent));color:var(--ta-on-accent)}
.ta-contact .ta-eyebrow{color:var(--ta-gold-soft)}
.ta-contact h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.ta-contact address{margin-top:22px;color:#ddd2ec;line-height:1.8}
.ta-contact-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ta-contact-side>a:not(.ta-button){font-family:var(--ta-serif);font-size:clamp(1.25rem,2vw,1.6rem);overflow-wrap:anywhere;transition:color .3s}
.ta-contact-side>a:not(.ta-button):hover{color:var(--ta-gold-soft)}
.ta-contact-side p{color:#b9abc9;font-size:.9rem}
.ta-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:12px 30px;border-radius:999px;background:var(--ta-on-accent);color:var(--ta-accent);font-weight:500;font-size:.95rem;transition:transform .3s var(--ta-ease),box-shadow .3s}
.ta-button:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.6)}

@media(max-width:1100px){
 .ta-centres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .te-about{--ta-inset:8px;--ta-radius-lg:26px}
 .ta-hero-head,.ta-head,.ta-compare,.ta-contact-panel{grid-template-columns:minmax(0,1fr)}
 .ta-head-copy{grid-column:1;grid-row:auto;justify-self:start;margin-top:20px;padding-bottom:0}
 .ta-hero-photo{aspect-ratio:16/10}
 .ta-contact-panel{align-items:start}
}
@media(max-width:640px){
 .te-about{font-size:15.5px}
 .ta-hero-photo{aspect-ratio:4/3}
 .ta-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;margin-top:-28px}
 .ta-stats div:nth-child(3){border-left:0}
 .ta-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,36vw,180px);gap:8px}
 .ta-gallery-lead{grid-column:span 2;grid-row:span 1}
 .ta-photo figcaption{padding:28px 12px 10px;font-size:.72rem}
 .ta-centres,.ta-brand-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 .te-about *{transition:none!important}
}