@charset "UTF-8";
/* ==========================================================================
   Pakdis — contact page
   --------------------------------------------------------------------------
   A new page built on top of the home page's design system (css/style.css):
   same tokens, same header/footer, same card language (rounded 12/12/35/12
   corners, alternating purple/gold tint, the drip notch). Nothing here
   redefines identity — it borrows it and adds the components a contact page
   actually needs: a page banner, quick-contact cards, a form + office panel,
   and an FAQ accordion.
   ========================================================================== */

/* The brand gold is #baa660, which is where `--gold` in style.css now sits, so
   everything here just uses that token — one gold in the system, no local
   copy to drift out of sync. */

/* --------------------------------------------------------------------------
   1. Page hero
   Same purple-flood + corner-pattern language as the home hero, compressed
   into a page banner: no slider, just a breadcrumb, title and lead line.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--hero-top);        /* see --hero-top in css/style.css */
  background: var(--purple-flood);
  isolation: isolate;
}

.page-hero__pattern {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 352px;
  height: auto;
  max-width: none;
  opacity: .55;
  pointer-events: none;
}

/* A soft gold glow in the far corner — the one deliberately "extra" touch
   this page adds beyond straight reuse, kept faint enough to read as
   texture rather than decoration competing with the headline. */
.page-hero__glow {
  position: absolute;
  inset-inline-end: -180px;
  top: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 167, 96, .35) 0%, rgba(187, 167, 96, 0) 70%);
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 176px));
  margin-inline: auto;
  padding-block: 72px 148px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, .68);
}
.breadcrumb a { color: rgba(255, 255, 255, .68); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;                      /* RTL: chevron points start-ward */
}


.page-hero__lead {
  max-width: 640px;
  margin-top: 20px;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   2. Quick-contact cards
   Same corner language as the news cards (12/12/35/12, alternating tint),
   rebuilt as icon cards and floated half over the hero's bottom edge so the
   page has a confident, layered opening rather than a hard section seam.
   -------------------------------------------------------------------------- */
.info-cards { margin-top: -84px; position: relative; z-index: 2; }

.info-cards__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  direction: ltr;                      /* same RTL grid-order fix as .card-grid */
}
.info-cards__list > .info-card { direction: rtl; }

.info-card {
  --tint: 66 42 116;                   /* --purple-flood, matches .card */
  --card-accent: var(--gold);
  position: relative;
  padding: 30px 26px 28px;
  background: #fff;
  border-radius: 12px 12px 35px 12px;
  box-shadow: 0 24px 48px -24px rgba(30, 16, 60, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Cards 1 and 3 are filled gold, so the row alternates instead of reading as
   four near-identical white boxes. What makes the pair sit together rather
   than look like two unrelated styles is that the filled card is a true
   *inversion* of the white one, not a recolour of it:

     white card → white ground, gold chip, gold glyph   (gold as the accent)
     gold card  → gold ground,  purple chip, white glyph (purple as the accent)

   Purple is the page's dominant colour — the banner these cards overlap is a
   purple flood — so pulling purple onto the gold cards is what ties the row
   back to the page instead of leaving the gold floating on its own.

   Type colour follows the ground rather than staying put: on #baa660, white
   text measures only 2.4:1, but the brand purple reaches 4.60:1 and clears the
   4.5:1 needed for body copy, so both headline and body stay in brand purple —
   a deeper tone for the headline, the base token for the body. Note the body
   copy is *solid*, not faded: dropping it to 88% opacity to soften it read
   nicely but fell to 3.9:1, so the step between headline and body is carried
   by tone, size and weight instead of transparency.

   The gradient is deliberately shallow and lightens *upward* from the base
   gold: going darker would push the purple back under the contrast threshold,
   so the depth is bought at the light end where it's free. */
.info-card--filled {
  background: linear-gradient(158deg, #c8b67d 0%, #c0ad6d 34%, var(--gold) 100%);
  box-shadow: 0 24px 48px -24px rgba(96, 82, 30, .45);
}
/* A hairline of light along the top edge — the small touch that stops a flat
   fill from looking like a printed swatch and makes it read as a lifted card. */
.info-card--filled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgba(255, 255, 255, .38);
  pointer-events: none;
}
.info-card--filled .info-card__icon {
  background: var(--purple);
  color: #fff;
}
.info-card--filled .info-card__title { color: #2e1f52; }
.info-card--filled .info-card__text  { color: var(--purple); font-weight: 400; }
.info-card--filled:hover { box-shadow: 0 30px 56px -22px rgba(96, 82, 30, .5); }

/* The white cards keep the gold chip, now on the corrected token so both
   golds in the row are the same colour. */
.info-card--gold {
  --tint: 186 166 96;
  --card-accent: var(--gold);
}
.info-card:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -22px rgba(30, 16, 60, .4); }

.info-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px 14px 14px 4px;
  background: rgb(var(--tint) / .1);
  color: rgb(var(--tint));
}
.info-card__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.info-card__text {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   3. Form + office panel
   -------------------------------------------------------------------------- */
.reach { padding-block: 120px 96px; }

.reach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  direction: ltr;
}
.reach__grid > * { direction: rtl; }

.contact-form {
  padding: 48px;
  background: #fff;
  border: 1px solid #ede9f1;
  border-radius: 16px 16px 48px 16px;
  box-shadow: 0 30px 70px -40px rgba(30, 16, 60, .28);
}

.contact-form__title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--purple);
}
.contact-form__lead {
  max-width: 46em;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--grey-600);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

.field { display: block; }
.field + .field { margin-top: 20px; }
.field-grid .field { margin-top: 0; }

.field__label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.field__label em { color: var(--gold); font-style: normal; }

.field__input {
  width: 100%;
  padding: 13px 16px;
  border: 1.4px solid #e5e0eb;
  border-radius: 10px;
  background: #fbfafd;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--grey-400); }
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(187 167 96 / .18);
}
/* The ring above replaces the native outline, which is fine for a pointer but
   leaves keyboard users without a clearly visible focus target on anything
   that isn't an input. Restore a real outline for keyboard focus only, so
   mouse users don't see it on click but tab navigation stays followable. */
.field__input:focus-visible,
.info-card a:focus-visible,
.faq__q:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.field__select-wrap { position: relative; display: block; }
.field__input--select {
  appearance: none;
  padding-inline-end: 40px;
  color: var(--ink);
  cursor: pointer;
}
.field__select-icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--grey-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.field__textarea { resize: vertical; min-height: 132px; }

.contact-form__submit {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--purple);
  font-size: 16px;
  font-weight: 500;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.contact-form__submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.contact-form__submit:hover { background: var(--purple); color: #fff; }
.contact-form__submit:hover svg { transform: translate(2px, -2px); }
.contact-form__submit:active { transform: scale(.97); }

.contact-form__note {
  margin-top: 16px;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.contact-form__note.is-error { color: #b0304a; }

/* -- office panel: a small "business card" in the plate's own material --- */
.office-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 48px 16px;
  background: linear-gradient(165deg, var(--purple-flood) 0%, #2c1a5c 100%);
}

/* object-fit:cover, not a fixed height, so the pattern always fills the
   card completely regardless of how tall the card ends up (the form beside
   it can grow with content) — the earlier version sized itself by its own
   aspect ratio and simply ran out before reaching the card's bottom edge. */
.office-card__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 30% 0%;
  opacity: .18;
  pointer-events: none;
}

.office-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 44px 38px 36px;
}

.office-card__logo { width: 138px; height: auto; }

.office-card__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 36px;
}
.office-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.office-card__list svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-card__social {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 34px;
}
.office-card__social img { width: 46px; height: 50px; transition: transform .2s var(--ease); }
.office-card__social a:hover img { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   4. FAQ
   -------------------------------------------------------------------------- */
.faq { padding-bottom: 128px; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq__item {
  border: 1.4px solid #ede9f1;
  border-radius: 14px;
  padding: 4px 26px;
  background: #fff;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.faq__item[open] { border-color: rgb(187 167 96 / .55); background: #fdfcf9; }

.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 22px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--purple);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.faq__chev {
  flex: none;
  margin-inline-start: auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--grey-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); stroke: var(--gold); }

.faq__a {
  margin: 0 0 24px 25px;
  max-width: 62em;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .info-cards__list { grid-template-columns: repeat(2, 1fr); }
  .reach__grid { grid-template-columns: 1fr; }
  .office-card { min-height: 360px; }
}

@media (max-width: 1024px) {
  .page-hero__content { padding-block: 56px 120px; }
  .info-cards { margin-top: -64px; }
  /* Matches the home hero's pattern at this breakpoint exactly (style.css
     ≤1024: 170px / .55), so the two pages read as one system.

     pattern-hero.png is a 705×1867 strip — 2.65× taller than wide — so at
     170px it runs 450px down the banner, well past where the lead starts
     (~276px). On the home page that never collides because the hero copy is
     parked on the right; here the lead is a normal paragraph that fills the
     column, and below ~816px viewport the column narrows enough to reach into
     the pattern's own 168px-wide strip. Rather than shrink the artwork, hold
     the lead clear of that strip: at this size the column is still wide enough
     (410–640px) that the shorter measure reads comfortably. */
  .page-hero__pattern { width: 170px; opacity: .55; }
  .page-hero__lead { margin-inline-end: 112px; }
}

@media (max-width: 700px) {
  /* Pattern matches the home hero's mobile size exactly (style.css ≤620:
     100px / .4). At that width it stands 265px tall, so its foot lands just
     where the lead used to begin.

     Narrowing the column the way the tablet rule does would leave only ~220px
     of measure on a 360px phone — too tight to read. There's more room to give
     vertically, so instead the whole content block starts lower and the lead
     gets a little extra space above it, which together put its first line at
     ~280px, clear of the pattern's foot. The breadcrumb and title are short
     and sit against the right edge, so they never reach the pattern. */
  .page-hero__content { width: calc(100% - 40px); padding-block: 56px 96px; }
  .page-hero__lead { font-size: 16px; margin-top: 36px; margin-inline-end: 0; }
  .page-hero__pattern { width: 100px; opacity: .4; }

  .info-cards { margin-top: -48px; }
  .info-cards__list { grid-template-columns: 1fr; gap: 16px; }

  .reach { padding-block: 64px 56px; }
  .contact-form { padding: 28px 22px; border-radius: 14px 14px 32px 14px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  /* iOS Safari auto-zooms the page whenever a focused field's text is under
     16px, which on a form this long leaves people scrolled sideways and
     hunting for the next field. 16px is the threshold that stops it — the
     one size here that isn't a purely visual choice. */
  .field__input { font-size: 16px; }

  .office-card__body { padding: 32px 26px 28px; }

  .faq { padding-bottom: 80px; }
  .faq__item { padding-inline: 18px; }
  .faq__q { font-size: 15px; padding-block: 18px; }
}