/* ============================================================
   UAA COMPANY LIMITED — website
   Built to the approved design in "UAA COMPANY/WEB PAGE"
   ============================================================ */

@font-face{
  font-family:'LINE Seed Sans TH';
  src:url('fonts/LINESeedSansTH_Rg.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'LINE Seed Sans TH';
  src:url('fonts/LINESeedSansTH_Bd.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --navy:#10294c;
  --orange:#ff4725;
  --grey:#d3d3d3;
  --nav-h:84px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--navy);
  font-family:'Inter','LINE Seed Sans TH',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ============================================================
   NAV — floating bar, rounded bottom corners
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-inline:clamp(12px,3.2vw,46px);
}
.nav-bar{
  height:var(--nav-h);
  border-radius:0 0 22px 22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding-inline:clamp(18px,2.6vw,38px);
  transition:box-shadow .3s ease;
}
.nav--light .nav-bar{background:#fff;box-shadow:0 10px 28px -18px rgba(0,0,0,.45)}
.nav--dark  .nav-bar{background:var(--navy)}

.nav-logo{height:44px;width:auto}

.nav-links{display:flex;align-items:center;gap:clamp(20px,3.4vw,52px)}
.nav-links a{
  font-size:clamp(13px,1.05vw,16px);
  font-weight:500;letter-spacing:.02em;
  transition:color .25s ease;
}
.nav--light .nav-links a{color:var(--navy)}
.nav--dark  .nav-links a{color:#fff}
.nav-links a:hover{color:var(--orange)}
.nav-links a.is-active{color:var(--orange)}

.nav-right{display:flex;align-items:center;gap:14px}
.nav-lang{font-size:clamp(13px,1.05vw,16px);font-weight:500;white-space:nowrap;display:flex;gap:6px}
.nav--light .nav-lang{color:var(--navy)}
.nav--dark  .nav-lang{color:#fff}
.nav-lang button{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  opacity:.55;transition:opacity .25s ease,color .25s ease;
}
.nav-lang button.is-active{opacity:1;color:var(--orange)}

.nav-burger{
  display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-burger span{display:block;width:22px;height:2px;background:currentColor;position:relative}
.nav-burger span::before,.nav-burger span::after{
  content:'';position:absolute;left:0;width:22px;height:2px;background:currentColor;
}
.nav-burger span::before{top:-7px}
.nav-burger span::after{top:7px}
.nav--light .nav-burger{color:var(--navy)}
.nav--dark  .nav-burger{color:#fff}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;z-index:3;
  min-height:clamp(520px,52vw,760px);
  display:flex;align-items:flex-end;
}
/* the photo layers are inset:0 so they can't spill — the arcs are meant to */
.hero-img,.hero-tint{border-radius:inherit}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,41,76,.62) 0%,rgba(16,41,76,.5) 45%,rgba(16,41,76,.72) 100%);
}
.hero-inner{position:relative;width:100%;padding-block:0 clamp(38px,5.5vw,86px)}
.hero h1{
  margin:0;color:#fff;
  font-size:clamp(30px,4.3vw,62px);
  font-weight:700;line-height:1.18;letter-spacing:-.01em;
}

/* decorative logo-arc cut-outs */
.hero-arcs{
  position:absolute;right:clamp(-26px,2.2vw,64px);bottom:clamp(-96px,-6.5vw,-38px);
  width:clamp(250px,42vw,650px);aspect-ratio:600/589;
  pointer-events:none;transform:rotate(-8deg);
}
/* every layer carries a full-canvas mask, so stacking them rebuilds the symbol */
.hero-arcs .arc{
  position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.hero-arcs .a1  {-webkit-mask-image:url(web/arc1.png);   mask-image:url(web/arc1.png);   background:url(img/svc-machining.jpg) center/cover}
.hero-arcs .a1-o{-webkit-mask-image:url(web/arc1-o.png); mask-image:url(web/arc1-o.png); background:#fff}
.hero-arcs .a2  {-webkit-mask-image:url(web/arc2.png);   mask-image:url(web/arc2.png);   background:url(img/svc-casting.jpg) center/cover}
.hero-arcs .a2-o{-webkit-mask-image:url(web/arc2-o.png); mask-image:url(web/arc2-o.png); background:#fff}
.hero-arcs .a3  {-webkit-mask-image:url(web/arc3.png);   mask-image:url(web/arc3.png);   background:url(img/svc-trading.jpg) center/cover}
.hero-arcs .a3-o{-webkit-mask-image:url(web/arc3-o.png); mask-image:url(web/arc3-o.png); background:#fff}

/* ============================================================
   TAGLINE (orange quotes + navy italic)
   ============================================================ */
.tagline{
  display:flex;align-items:flex-start;gap:clamp(8px,1vw,16px);
  padding-block:clamp(34px,4.4vw,70px);
}
.tagline .q{
  color:var(--orange);font-size:clamp(34px,4.4vw,62px);
  font-weight:700;line-height:.85;flex:none;
}
.tagline .q.close{align-self:flex-end}
.tagline p{
  margin:0;color:var(--navy);
  font-size:clamp(19px,2.35vw,34px);
  font-weight:700;font-style:italic;line-height:1.35;
}
.tagline--center{justify-content:center;text-align:center}

/* ============================================================
   POLICY BAND (grey)
   ============================================================ */
.policy{background:var(--grey);padding-block:clamp(34px,4.6vw,72px)}
.policy .inner{max-width:900px;margin-inline:auto}
.policy blockquote{
  margin:0 0 clamp(18px,2vw,30px);
  font-size:clamp(17px,1.9vw,27px);
  font-weight:700;font-style:italic;line-height:1.4;color:var(--navy);
}
.policy p{margin:0 0 clamp(14px,1.5vw,22px);font-size:clamp(14px,1.35vw,19px);font-weight:700}
.policy ol{margin:0;padding-left:1.6em;font-size:clamp(14px,1.35vw,19px);font-weight:700}
.policy ol li{margin-bottom:.45em}

/* ============================================================
   SERVICE CARDS (home)
   ============================================================ */
.cards{
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(3,1fr);
  padding-block:clamp(40px,5vw,84px);
}
.card{display:flex;flex-direction:column}
.card-imgwrap{overflow:hidden;line-height:0}
.card-img{aspect-ratio:4/3.35;object-fit:cover;width:100%}
.card-cap{
  background:var(--navy);color:#fff;
  padding:clamp(16px,1.8vw,26px) clamp(14px,1.6vw,22px);
  display:flex;gap:clamp(10px,1.1vw,16px);align-items:stretch;flex:1;
}
.card-cap::before{content:'';width:3px;background:var(--orange);flex:none;border-radius:2px}
.card-cap span{
  font-size:clamp(14px,1.35vw,20px);font-weight:500;line-height:1.35;
}

/* ============================================================
   CUSTOMERS
   ============================================================ */
.customers{padding-block:clamp(10px,2vw,30px) clamp(40px,5vw,84px)}
.sec-title{
  margin:0 0 clamp(18px,2vw,30px);
  font-size:clamp(19px,2.1vw,30px);font-weight:700;color:var(--navy);
  display:inline-block;
}
.sec-title::after{
  content:'';display:block;height:4px;width:78%;
  background:var(--orange);margin-top:8px;border-radius:2px;
}
.logo-row{
  display:grid;gap:clamp(20px,3vw,52px);
  grid-template-columns:repeat(5,1fr);align-items:center;
}
.logo-row img{
  max-height:clamp(38px,4.4vw,68px);width:auto;margin-inline:auto;
  object-fit:contain;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy);color:#fff;padding-block:clamp(40px,5vw,78px)}
.footer-grid{
  display:grid;gap:clamp(30px,5vw,80px);
  grid-template-columns:1fr 1fr;align-items:start;
}
.footer-logo{height:clamp(56px,6vw,92px);width:auto;margin-bottom:clamp(24px,3vw,44px)}
.f-line{display:flex;gap:16px;align-items:flex-start;margin-bottom:clamp(16px,1.8vw,26px)}
.f-ico{
  width:clamp(30px,2.8vw,40px);height:clamp(30px,2.8vw,40px);border-radius:50%;
  background:#fff;color:var(--navy);flex:none;
  display:grid;place-items:center;
}
.f-ico svg{width:52%;height:52%}
.f-line div{font-size:clamp(13px,1.15vw,17px);line-height:1.55}

.f-form h3{
  margin:0 0 clamp(18px,2vw,28px);
  font-size:clamp(14px,1.25vw,18px);font-weight:700;letter-spacing:.04em;
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,34px)}
.f-field{margin-bottom:clamp(16px,1.9vw,28px)}
.f-field label{
  display:block;font-size:clamp(9px,.78vw,11px);letter-spacing:.08em;
  font-weight:600;margin-bottom:6px;
}
.f-field input{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.75);
  color:#fff;font:inherit;font-size:clamp(13px,1.1vw,16px);padding:4px 0 8px;
  transition:border-color .25s ease;
}
.f-field textarea{
  width:100%;background:none;border:1px solid rgba(255,255,255,.75);
  color:#fff;font:inherit;font-size:clamp(13px,1.1vw,16px);padding:10px;
  min-height:clamp(90px,9vw,132px);resize:vertical;
  transition:border-color .25s ease;
}
.f-field input:focus,.f-field textarea:focus{outline:none;border-color:var(--orange)}
.f-send{
  background:var(--orange);color:#fff;border:0;border-radius:5px;
  font:inherit;font-size:clamp(11px,.95vw,14px);font-weight:600;
  padding:8px 26px;cursor:pointer;transition:filter .25s ease;
}
.f-send:hover{filter:brightness(1.1)}

.copyright{
  background:#fff;color:var(--navy);
  font-size:clamp(11px,1vw,15px);font-weight:600;
  padding-block:clamp(14px,1.6vw,24px);
}

/* ============================================================
   PAGE HEADS / INNER PAGES
   ============================================================ */
.page{padding-top:calc(var(--nav-h) + clamp(28px,4vw,70px))}

.page-title{
  margin:0 0 clamp(20px,2.6vw,40px);
  font-size:clamp(24px,3vw,42px);font-weight:700;color:var(--navy);
}
.page-title--center{text-align:center;letter-spacing:.14em}

/* about ---------------------------------------------------- */
.about-top{
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,5vw,78px);align-items:center;
}
.about-mark{width:min(100%,430px);margin-bottom:clamp(24px,3vw,46px)}
.about-photo-wrap{position:relative}
.about-photo{
  position:relative;z-index:1;
  width:100%;border-radius:22px;object-fit:cover;aspect-ratio:4/3.05;
}
/* one arc of the UAA symbol, masked from the logo artwork and tucked
   behind the photo at opposite corners */
.arc-deco{
  position:absolute;z-index:0;pointer-events:none;
  aspect-ratio:447/444;
  -webkit-mask:url(web/deco3.png) center/contain no-repeat;
  mask:url(web/deco3.png) center/contain no-repeat;
}
.arc-deco.tl{width:11.5%;left:-5.5%;top:-7%;background:var(--navy)}
.arc-deco.br{width:11.5%;right:-6.5%;bottom:-8.5%;background:var(--orange);transform:rotate(180deg)}

/* the About column is narrower than the home page band */
.about-top .tagline p{font-size:clamp(16px,1.85vw,27px)}
.about-top .tagline .q{font-size:clamp(28px,3.4vw,48px)}

.about-mid{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  padding-block:clamp(34px,4.6vw,76px);
}
.about-collage{width:100%;border-radius:6px}
.claim{
  background:var(--navy);color:#fff;
  border-radius:24px;
  clip-path:polygon(0 0,100% 0,100% 68%,84% 100%,0 100%);
  padding:clamp(26px,3.4vw,54px) clamp(24px,3vw,48px);
}
.claim p{
  margin:0 0 clamp(22px,2.6vw,40px);
  font-size:clamp(17px,2.05vw,31px);font-weight:700;line-height:1.28;
  text-transform:uppercase;letter-spacing:.005em;
}
.claim img{height:clamp(34px,3.6vw,54px);width:auto}

.about-body{
  max-width:960px;margin-inline:auto;
  padding-bottom:clamp(34px,4.6vw,74px);
}
.about-body p{
  margin:0 0 1.1em;text-indent:2.4em;
  font-size:clamp(14px,1.35vw,19px);font-weight:600;line-height:1.6;color:var(--navy);
}

.certs{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);
  justify-items:center;text-align:center;
  padding-bottom:clamp(44px,5.4vw,90px);
}
.certs h4{
  margin:0 0 clamp(16px,1.9vw,28px);
  font-size:clamp(15px,1.6vw,23px);font-weight:700;font-style:italic;color:var(--navy);
}
.certs img{max-height:clamp(70px,8vw,124px);width:auto}

/* products ------------------------------------------------- */
.prod-hero{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,50px);
  align-items:center;padding-bottom:clamp(20px,3vw,44px);
}
.prod-badges{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,34px)}
.prod-badges img{max-width:clamp(96px,11vw,180px);width:100%}
.prod-circle{width:min(100%,560px);margin-inline:auto}

.prod-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,50px);align-items:center;
  padding-block:clamp(20px,2.8vw,46px);
}
.prod-row img{width:100%;aspect-ratio:16/9.4;object-fit:cover}
.prod-label{display:flex;gap:clamp(14px,1.8vw,28px);align-items:center}
.prod-label::before{content:'';width:4px;align-self:stretch;background:var(--orange);flex:none}
.prod-label h3{margin:0;font-weight:700;color:#1c1c1c;line-height:1.2}
.prod-label h3 b{display:block;font-size:clamp(21px,2.9vw,42px);font-weight:700}
.prod-label h3 span{display:block;font-size:clamp(15px,1.95vw,29px);font-weight:500}
.prod-row.rev .prod-label{order:1;justify-content:flex-end;text-align:right}
.prod-row.rev .prod-label::before{order:2}
.prod-row.rev .prod-label h3{order:1}
.prod-row.rev img{order:2}

/* contact -------------------------------------------------- */
.contact-photo{width:100%;object-fit:cover;aspect-ratio:16/9.7;margin-bottom:clamp(28px,4vw,64px)}
.contact-list{max-width:820px;margin-inline:auto;padding-bottom:clamp(44px,5.4vw,92px)}
.c-line{display:flex;gap:clamp(16px,2vw,30px);align-items:flex-start;margin-bottom:clamp(22px,2.6vw,40px)}
.c-ico{
  width:clamp(40px,4vw,60px);height:clamp(40px,4vw,60px);border-radius:50%;
  background:var(--navy);color:#fff;flex:none;display:grid;place-items:center;
}
.c-ico svg{width:50%;height:50%}
.c-line div{font-size:clamp(15px,1.6vw,23px);line-height:1.5;color:var(--navy)}

/* ============================================================
   MOTION — scroll reveals, hovers, focus
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-dir="left"]{transform:translateX(-32px)}
[data-reveal][data-dir="right"]{transform:translateX(32px)}
[data-reveal][data-dir="zoom"]{transform:scale(.94)}
[data-reveal][data-dir].in{transform:none}

/* nav condenses once the page scrolls */
.nav.scrolled .nav-bar{box-shadow:0 14px 34px -20px rgba(0,0,0,.6)}
.nav.scrolled .nav-logo{height:36px}
.nav-logo{transition:height .35s cubic-bezier(.16,1,.3,1)}

/* nav link underline */
.nav-links a{position:relative}
@media (min-width:901px){
  .nav-links a::after{
    content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
    background:var(--orange);transform:scaleX(0);transform-origin:left;
    transition:transform .32s cubic-bezier(.16,1,.3,1);
  }
  .nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
}

/* language toggle */
.nav-lang button{position:relative;padding:2px 2px}
.nav-lang button:hover{opacity:1}
.nav-lang button::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--orange);transform:scaleX(0);transition:transform .3s ease;
}
.nav-lang button.is-active::after{transform:scaleX(1)}

/* language swap fade */
.lang-swap{transition:opacity .22s ease}
.lang-swap.out{opacity:0}

/* hero photo drift + arc float */
.hero-img{transform:scale(1.04);animation:heroDrift 26s ease-in-out infinite alternate}
@keyframes heroDrift{to{transform:scale(1.12) translate3d(-1.4%,-1%,0)}}
.hero h1{animation:heroRise 1s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-arcs{animation:arcIn 1.1s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes arcIn{from{opacity:0;transform:rotate(-8deg) scale(.9)}to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* service cards */
.card{overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -26px rgba(16,41,76,.65)}
.card>.card-imgwrap{overflow:hidden}
.card-img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .card-img{transform:scale(1.07)}
.card-cap{transition:background-color .35s ease}
.card:hover .card-cap{background:#16386a}
.card-cap::before{transition:width .35s ease}
.card:hover .card-cap::before{width:5px}

/* customer logos — only desaturate where a pointer can restore the colour,
   otherwise touch devices would be stuck on the grey state */
.logo-row img{transition:filter .4s ease,opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){
  .logo-row img{filter:grayscale(100%);opacity:.72}
  .logo-row img:hover{filter:grayscale(0);opacity:1;transform:translateY(-4px)}
}

/* section rule grows in */
.sec-title::after{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .2s}
[data-reveal].in .sec-title::after,.sec-title.in::after{transform:scaleX(1)}

/* product rows */
.prod-row img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.prod-imgwrap{overflow:hidden}
.prod-imgwrap:hover img{transform:scale(1.05)}
.prod-label::before{transition:height .4s ease}

/* about photo + claim */
.about-photo{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.about-photo-wrap{overflow:visible}
.about-photo-wrap:hover .about-photo{transform:scale(1.02)}
.arc-deco{transition:transform .8s cubic-bezier(.16,1,.3,1)}
/* keep each arc's base rotation when nudging on hover */
.about-photo-wrap:hover .arc-deco.tl{transform:translate(-6px,-6px)}
.about-photo-wrap:hover .arc-deco.br{transform:rotate(180deg) translate(-6px,-6px)}

/* contact rows */
.c-line{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.c-line:hover{transform:translateX(6px)}
.c-ico{transition:background-color .35s ease,transform .35s ease}
.c-line:hover .c-ico{background:var(--orange);transform:scale(1.06)}
.f-ico{transition:transform .35s ease}
.f-line:hover .f-ico{transform:scale(1.08)}

/* buttons */
.f-send{transition:filter .25s ease,transform .25s ease,box-shadow .25s ease}
.f-send:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(255,71,37,.9)}

/* keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
    padding-inline:var(--pad);
  }
  .nav-links.open{max-height:340px}
  .nav-links a{color:#fff !important;padding-block:15px;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav-burger{display:flex}

  .about-top,.about-mid,.certs,.footer-grid,.prod-hero{grid-template-columns:1fr}
  .prod-row{grid-template-columns:1fr}
  .prod-row.rev .prod-label{order:0;justify-content:flex-start;text-align:left}
  .prod-row.rev img{order:1}
  .cards{grid-template-columns:1fr}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .f-row{grid-template-columns:1fr}
  .prod-hero{justify-items:center}
  .prod-badges{flex-direction:row;justify-content:center}
}

@media (max-width:560px){
  .logo-row{grid-template-columns:repeat(2,1fr)}
  .hero-arcs{display:none}
}