

:root {
  
  --color-base: #ffffff;
  --color-main: #231f20;
  --color-accent: #31bde0; 

  
  --fs-note: 0.813rem; 
  --fs-body: 1rem; 
  --fs-heading: 1.25rem; 
  --fs-plate: 1.625rem; 
  --fs-tagline: 2.063rem; 

  --lh-reading: 1.618; 
  --lh-display: 1.272; 
  --lh-khmer: 1.618; 

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-plate-latin: 0.04em; 
  --ls-kicker: 0.08em; 

  
  --sp-micro: 0.625rem; 
  --sp-small: 1rem; 
  --sp-base: 1.625rem; 
  --sp-large: 2.625rem; 
  --sp-xlarge: 4.25rem; 

  
  --content-max-tablet: 480px;
  --content-max-desktop: 680px; 

  
  --radius: 0px; 

  
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-base);
  color: var(--color-main);
  font-family: var(--font-stack);
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
}

img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



header.site-header,
main,
footer.site-footer {
  padding-left: var(--sp-base);
  padding-right: var(--sp-base);
}

@media (min-width: 600px) {
  header.site-header,
  main,
  footer.site-footer {
    max-width: var(--content-max-tablet);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 960px) {
  header.site-header,
  main,
  footer.site-footer {
    max-width: var(--content-max-desktop);
  }
}



header.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--sp-xlarge); 
}

.lang-switch {
  display: flex;
  justify-content: center;
  gap: var(--sp-small);
  font-size: var(--fs-note);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; 
  padding: 0 var(--sp-small);
  color: var(--color-main);
  text-decoration: none;
}

.lang-switch a:focus-visible {
  text-decoration: underline; 
}

.lang-switch a[aria-current="page"] {
  font-weight: var(--fw-bold);
}

.lang-switch--standalone {
  margin-top: var(--sp-large);
}


.site-header__logo {
  margin: var(--sp-large) 0 0; 
}

.site-header__logo img {
  width: 160px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .site-header__logo img {
    width: 200px;
  }
}



.tagline {
  margin-top: var(--sp-large); 
  text-align: center;
}

.tagline p {
  margin: 0;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: 0;
}

:lang(km) .tagline p {
  line-height: var(--lh-khmer);
}



.origin-claim {
  margin-top: var(--sp-large); 
  text-align: center;
}

.origin-claim__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-main); 
  font-size: var(--fs-plate);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-plate-latin);
  padding: 17px 24px; 
  border-radius: var(--radius);
}

:lang(km) .origin-claim__badge {
  letter-spacing: 0; 
  line-height: var(--lh-khmer);
}



.about {
  margin-top: var(--sp-large);
  text-align: left;
}

.about__kicker {
  margin: 0;
  font-size: var(--fs-note);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-kicker);
  line-height: var(--lh-reading);
}

.about__heading {
  margin: var(--sp-micro) 0 0; 
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
}

.about__body {
  margin: var(--sp-small) 0 0; 
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}



.inquiry {
  margin-top: var(--sp-large); 
  text-align: center;
}

.inquiry__cta {
  margin: 0;
}

.inquiry__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem; 
  padding: var(--sp-small) var(--sp-base); 
  background: var(--color-main);
  color: var(--color-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.inquiry__cta-link:hover,
.inquiry__cta-link:focus-visible {
  background: var(--color-base);
  color: var(--color-main);
  border-color: var(--color-main);
}

.inquiry__cta-link:active {
  opacity: 0.85;
}


.email-protect {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.inquiry__note {
  margin: var(--sp-small) 0 0;
  font-size: var(--fs-note);
  opacity: 0.75;
}



.inquiry-form {
  display: grid;
  gap: var(--sp-small);
  margin-top: var(--sp-large);
  text-align: left;
}

.inquiry-form label {
  display: block;
  font-size: var(--fs-note);
  margin-bottom: 0.25rem;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(35, 31, 32, 0.3);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: var(--color-base);
}

.inquiry-form button {
  justify-self: start;
  min-height: 3.25rem;
  padding: var(--sp-small) var(--sp-base);
  background: var(--color-main);
  color: var(--color-base);
  border: none;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border-radius: var(--radius);
}

.inquiry-form__error {
  font-weight: var(--fw-bold);
  padding: 0.5em 0.75em;
  border-left: 3px solid var(--color-main);
  background: rgba(35, 31, 32, 0.06);
}



main {
  padding-bottom: var(--sp-xlarge);
}



.hero {
  margin-top: var(--sp-large);
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
}

.hero p {
  margin: var(--sp-small) 0 0;
  font-size: var(--fs-body);
}

.u-text-center {
  text-align: center;
}
