/* ==========================================================================
   R.B. Diamond Jewellers — Bangkok link page
   Every colour and typeface below is lifted from the live rbdiamond.com
   theme (yootheme-rbdiamonds/css/custom.css + theme.1.css) so this page and
   the main site read as one brand.
   ========================================================================== */

/* --- Typefaces ---------------------------------------------------------- */
@font-face{font-family:'Now';src:url('../fonts/Now-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Now';src:url('../fonts/Now-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Now';src:url('../fonts/Now-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Now';src:url('../fonts/Now-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Dream Avenue';src:url('../fonts/DreamAvenue.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Brand navy — --color-primary and its ramp */
  --navy:#1F306D;
  --navy-700:#16224C;
  --navy-800:#101837;
  --navy-400:#4C598A;
  --navy-300:#7983A7;

  /* Warm grounds — --color-default and the theme's cream tints */
  --cream:#FFFFFA;
  --cream-2:#FFFCF2;
  --cream-3:#FFF6D9;

  /* Accents — --color-secondary, --color-tertiary-500, frieze gold */
  --amber:#F08F4D;
  --gold:#C49B72;
  --gold-soft:#F5E6C5;
  --brown:#784827;

  /* Ink + neutrals */
  --ink:#1D1D1D;
  --ink-h:#1C1C1C;
  --muted:#7B7979;
  --muted-2:#A7A5A6;
  --rule:#E4E4E4;

  /* State */
  --danger:#BF534A;
  --ok:#76A76B;

  --font-body:'Now',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Dream Avenue','Now',Georgia,serif;

  --gutter:clamp(20px,5vw,44px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2{margin:0;font-weight:400;color:var(--ink-h)}
p{margin:0}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Keyboard focus, everywhere, in brand navy. */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ==========================================================================
   The frieze — the signature. It is the Newari architectural band that runs
   along the top and bottom of sections on rbdiamond.com, recoloured through
   a CSS mask so it holds its own against the cream ground.
   ========================================================================== */
.frieze{
  flex:0 0 auto;
  height:38px;
  background-color:var(--gold);
  opacity:.55;
  -webkit-mask-image:url('../img/pattern1.svg');
  mask-image:url('../img/pattern1.svg');
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;
  mask-size:auto 100%;
}
.frieze--bottom{transform:scaleY(-1)}

/* ==========================================================================
   Card — the jeweller's calling card the whole page sits inside
   ========================================================================== */
.card{
  flex:1 0 auto;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:clamp(28px,6vw,52px) var(--gutter) clamp(32px,6vw,56px);
}

/* Shared hairline-and-gem divider */
.rule{display:flex;align-items:center;gap:14px;width:100%}
.rule__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 35%,var(--gold) 65%,transparent)}
.rule__gem{flex:0 0 auto;color:var(--gold)}

.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}

/* ==========================================================================
   Crest
   ========================================================================== */
.crest{text-align:center;display:flex;flex-direction:column;align-items:center}
.crest__mark{width:82px;height:auto;margin-bottom:20px}
.crest__wordmark{
  font-size:11.5px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--navy);
}
.crest__place{
  font-family:var(--font-display);
  font-size:clamp(58px,16vw,86px);
  line-height:.92;
  letter-spacing:.01em;
  color:var(--navy);
  margin:6px 0 22px;
}
.crest .rule{max-width:280px;margin-bottom:22px}
.crest__lede{
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  max-width:40ch;
  text-wrap:balance;
}

/* ==========================================================================
   Link tiles — square corners, hairline borders, the theme's inset frame
   ========================================================================== */
.links{margin-top:clamp(34px,7vw,48px);display:flex;flex-direction:column;gap:12px}
.links__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:17px 20px;
  border:1px solid var(--rule);
  background:var(--cream-2);
  text-decoration:none;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
/* The inset frame from .testimonial-slider-item, drawn on interaction only. */
.tile::after{
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .25s var(--ease);
}
.tile:hover::after,.tile:focus-visible::after{border-color:currentColor;opacity:.35}

.tile__icon{flex:0 0 auto;width:24px;height:24px}
.tile__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile__label{font-size:15px;font-weight:500;line-height:1.3}
.tile__handle{
  font-size:12px;font-weight:300;letter-spacing:.05em;
  opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tile__arrow{
  flex:0 0 auto;width:19px;height:19px;margin-left:auto;
  transition:transform .25s var(--ease);
}
.tile:hover .tile__arrow{transform:translateX(5px)}

/* Primary — the shop. Navy fill, exactly like .uk-button-primary. */
.tile--shop{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.tile--shop:hover{background:var(--navy-700);border-color:var(--navy-700)}
.tile--shop .tile__label{letter-spacing:.02em}

/* Social — the quiet three */
.tile--social{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 10px 17px;
  color:var(--navy);
}
.tile--social:hover{background:var(--cream);border-color:var(--navy)}
.tile--social .tile__text{align-items:center;width:100%}
.tile--social .tile__label{font-size:13.5px}
.tile--social .tile__handle{font-size:11.5px;color:var(--muted)}

/* Chat — amber, the theme's --color-secondary, for the one live action */
.tile--chat{color:var(--navy);border-color:var(--gold)}
.tile--chat:hover{background:var(--cream);border-color:var(--amber);color:var(--amber)}
.tile--chat .tile__handle{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enquiry{margin-top:clamp(44px,9vw,64px);text-align:center}
.enquiry__title{
  font-family:var(--font-display);
  font-size:clamp(34px,8vw,44px);
  line-height:1.05;
  color:var(--navy);
  margin:8px 0 12px;
}
.enquiry__lede{
  font-weight:300;font-size:14.5px;line-height:1.6;color:var(--muted);
  max-width:44ch;margin:0 auto;text-wrap:balance;
}

.form{margin-top:28px;text-align:left;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{
  font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.field__input{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--rule);
  border-radius:0;
  background:var(--cream-2);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field__input--area{resize:vertical;min-height:112px}
.field__input::placeholder{color:var(--muted-2)}
.field__input:hover{border-color:var(--muted-2)}
.field__input:focus{outline:none;border-color:var(--navy);background:var(--cream)}
.field__input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.field__input[aria-invalid='true']{border-color:var(--danger)}

.field__error{
  font-size:12px;color:var(--danger);min-height:0;
}
.field__error:empty{display:none}

/* Spam trap — off-screen, never focusable in the tab order. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;
  margin-top:4px;
  padding:0 24px;
  height:52px;
  border:1px solid var(--navy);
  border-radius:0;
  background:var(--navy);
  color:var(--cream);
  font-family:inherit;
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.submit:hover:not(:disabled){background:var(--navy-700);border-color:var(--navy-700)}
.submit:disabled{
  background:var(--cream-2);border-color:var(--rule);
  color:var(--muted-2);cursor:not-allowed;
}
.submit__arrow{width:18px;height:18px;transition:transform .25s var(--ease)}
.submit:hover:not(:disabled) .submit__arrow{transform:translateX(5px)}
.submit.is-busy .submit__arrow{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

.form__status{
  font-size:13.5px;line-height:1.55;text-align:center;
  padding:2px 0;
}
.form__status:empty{display:none}
.form__status[data-state='ok']{color:var(--ok)}
.form__status[data-state='error']{color:var(--danger)}

/* Success panel replacing the form */
.sent{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:38px 24px;
  border:1px solid var(--gold);
  background:var(--cream-2);
  text-align:center;
}
.sent__gem{width:28px;height:28px;color:var(--gold)}
.sent__title{font-family:var(--font-display);font-size:30px;line-height:1.1;color:var(--navy)}
.sent__body{font-size:14.5px;font-weight:300;color:var(--muted);max-width:38ch}

/* ==========================================================================
   Colophon
   ========================================================================== */
.colophon{margin-top:clamp(44px,9vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.colophon .rule{max-width:220px;margin-bottom:14px}
.colophon__addr{font-size:13.5px;font-weight:300;color:var(--muted)}
.colophon__contact{font-size:13.5px;font-weight:400;color:var(--navy);display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.colophon__contact a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.colophon__contact a:hover{border-bottom-color:var(--navy)}
.colophon__dot{color:var(--muted-2)}
.colophon__legal{
  margin-top:5px;
  font-size:10.5px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);
}

/* ==========================================================================
   Load sequence — one orchestrated settle, not scattered effects
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);animation:settle .8s var(--ease) forwards}
.crest.reveal{animation-delay:.05s}
.links.reveal{animation-delay:.2s}
.enquiry.reveal{animation-delay:.32s}
.colophon.reveal{animation-delay:.42s}
@keyframes settle{to{opacity:1;transform:none}}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width:519px){
  .links__row{grid-template-columns:1fr}
  .tile--social{flex-direction:row;text-align:left;padding:17px 20px;gap:16px}
  .tile--social .tile__text{align-items:flex-start}
}

/* ==========================================================================
   Respect the setting
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .frieze{display:none}
  .card{max-width:none}
}