/* ============================================================================
   Durusi — contact.css (2026-08-24)
   Scope: contact.html + ar/contact.html ONLY. Loaded last, after
   main.css → glass.css → rb.css → rb-bg.css.

   Why this file exists: the trial-request form was a translucent glass ".card"
   on a white canvas, so it read as a heavy, blurry box with no honest edge.
   This replaces it with a Stripe-style panel: solid white, one hairline
   border, one soft shadow, top-aligned labels, roomy fields, and a single
   primary action in the brand mint.

   Conventions kept from the design system:
   · ink #1A1914 for primary text, #4A4740 for secondary (v30 "black text only")
   · green is for GRAPHICS only: icons, step numbers, focus ring, the CTA fill
   · logical properties throughout, so [dir="rtl"] mirrors with almost no
     extra rules

   The form element no longer carries .card or .rb-glow, so none of glass.css's
   !important glass rules reach it. !important appears below only where a
   global rule (glass.css .hero/.lead/.btn) has to be beaten.
   ============================================================================ */

/* ── local tokens ─────────────────────────────────────────────────────────── */
.ct-hero,
.ct-more{
  --ct-ink:#1A1914;
  --ct-ink-2:#4A4740;
  --ct-ink-3:#6E6B63;
  --ct-hair:#E3E6E5;
  --ct-field-line:#D5D9D8;
  --ct-field-line-hover:#B7BDBB;
  --ct-placeholder:#77746C;
  --ct-green:#0B7C57;          /* graphic green, 4.9:1 on white */
  --ct-green-soft:rgba(11,124,87,0.10);
  --ct-radius:14px;
}

/* ============================================================================
   1 · Page section frame
   ========================================================================== */

main > .hero.ct-hero{
  padding:clamp(30px,4vw,46px) 0 clamp(46px,7vw,78px) !important;
}

.ct-hero .container.ct-grid{
  max-width:1100px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
  align-items:start;
  text-align:start;
}

/* desktop: intro over reassurance on one side, the form on the other */
@media (min-width:900px){
  .ct-hero .container.ct-grid{
    grid-template-columns:minmax(0,0.9fr) minmax(0,1fr);
    grid-template-areas:
      "intro form"
      "aside form";
    grid-template-rows:auto 1fr;
    column-gap:clamp(40px,5.5vw,80px);
    row-gap:clamp(26px,3vw,38px);
  }
  .ct-intro{ grid-area:intro; }
  .ct-panel{ grid-area:form; }
  .ct-aside{ grid-area:aside; }
}

/* ============================================================================
   2 · Intro column
   ========================================================================== */

.ct-intro{ text-align:start; padding-top:2px; }
.ct-intro h1{ margin:0; letter-spacing:-0.015em; }
.ct-hero .ct-intro .lead{
  /* glass.css v4 forces .hero .lead to cocoa brown; v30 wants neutral grey */
  color:var(--ct-ink-2) !important;
  font-size:1.08rem;
  line-height:1.6;
  max-width:42ch;
  margin:1.05rem 0 0;
}

/* ============================================================================
   3 · The form panel
   ========================================================================== */

.ct-hero .ct-panel{
  position:relative;
  display:grid;
  gap:17px;
  margin:0;
  padding:clamp(22px,2.6vw,30px);
  text-align:start;
  background-color:#FFFFFF;
  background-image:none;
  border:1px solid var(--ct-hair);
  border-radius:20px;
  box-shadow:
    0 1px 2px rgba(16,24,20,0.05),
    0 18px 44px -26px rgba(16,24,20,0.34);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
}

/* panel heading */
.ct-hero .ct-panel .ct-head{
  display:grid;
  gap:5px;
  padding-bottom:3px;
}
.ct-hero .ct-panel .ct-head h2{
  margin:0;
  font-size:1.18rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.008em;
}
.ct-hero .ct-panel .ct-head p{
  margin:0;
  font-size:0.9rem;
  line-height:1.5;
  color:var(--ct-ink-2) !important;
}

/* rows: two fields side by side on desktop, stacked on small screens */
.ct-panel .ct-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}
@media (max-width:560px){
  .ct-panel .ct-row{ grid-template-columns:minmax(0,1fr); }
}

.ct-panel .ct-field{
  display:grid;
  gap:6px;
  min-width:0;
}

/* labels: real, top-aligned, always visible */
.ct-hero .ct-panel label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:0.875rem;
  font-weight:600;
  line-height:1.35;
  color:var(--ct-ink);
  cursor:pointer;
}
.ct-panel .ct-opt{
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--ct-ink-3);
  flex:none;
}

/* fields */
.ct-panel .ct-input{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  min-height:46px;
  margin:0;
  padding:11px 13px;
  font-family:inherit;
  font-size:16px;              /* 16px keeps iOS from zooming on focus */
  line-height:1.45;
  color:var(--ct-ink);
  background-color:#FFFFFF;
  border:1px solid var(--ct-field-line);
  border-radius:var(--ct-radius);
  box-shadow:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.ct-panel .ct-input::placeholder{ color:var(--ct-placeholder); opacity:1; }
.ct-panel .ct-input:hover:not(:focus){ border-color:var(--ct-field-line-hover); }

.ct-panel textarea.ct-input{
  min-height:112px;
  padding-top:12px;
  resize:vertical;
  line-height:1.55;
}

/* select: native arrow removed, brand chevron drawn in the inline end corner */
.ct-panel select.ct-input{
  padding-inline-end:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.6 6 6.4 11 1.6' stroke='%236E6B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  cursor:pointer;
}
[dir="rtl"] .ct-panel select.ct-input{
  background-position:left 14px center;
}

/* focus: one ring, same for pointer and keyboard, never colour alone
   (the border thickens in tone and a 3px halo appears) */
.ct-hero .ct-panel .ct-input:focus{
  outline:2px solid transparent;      /* placeholder for forced-colors mode */
  outline-offset:2px;
  border-color:var(--ct-green);
  box-shadow:0 0 0 3px rgba(11,124,87,0.22);
}
.ct-hero .ct-panel .ct-input:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  border-color:var(--ct-green);
  box-shadow:0 0 0 3px rgba(11,124,87,0.22);
}
@media (forced-colors:active){
  .ct-hero .ct-panel .ct-input:focus,
  .ct-hero .ct-panel .ct-input:focus-visible{ outline-color:Highlight; }
}

/* Chrome autofill: keep the panel white instead of the browser's yellow */
.ct-panel .ct-input:-webkit-autofill,
.ct-panel .ct-input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ct-ink);
  -webkit-box-shadow:0 0 0 1000px #FFFFFF inset;
  box-shadow:0 0 0 1000px #FFFFFF inset;
}
.ct-panel .ct-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #FFFFFF inset, 0 0 0 3px rgba(11,124,87,0.22);
  box-shadow:0 0 0 1000px #FFFFFF inset, 0 0 0 3px rgba(11,124,87,0.22);
}

/* primary action: the site's mint CTA, full width, no directional arrow
   (this submits, it does not navigate, and the arrow would need mirroring) */
.ct-hero .ct-panel .ct-submit{
  display:flex;
  width:100%;
  min-height:52px;
  margin-top:5px;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:14px 24px;
  font-size:1rem;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  text-align:center;
}
.ct-hero .ct-panel .ct-submit::after{ content:none; }
/* the lift on :hover and the press on :active stay with main.css / glass.css,
   so this button behaves exactly like every other CTA on the site */
.ct-hero .ct-panel .ct-submit:focus-visible{
  outline:2px solid #102718;
  outline-offset:3px;
}

.ct-hero .ct-panel .ct-fine{
  margin:0;
  font-size:0.79rem;
  line-height:1.5;
  text-align:center;
  color:var(--ct-ink-3) !important;
}
.ct-hero .ct-panel .ct-fine a{ font-weight:600; }

/* ============================================================================
   4 · Reassurance column
   ========================================================================== */

.ct-aside{
  text-align:start;
  border-top:1px solid var(--ct-hair);
  padding-block-start:26px;
}
@media (min-width:900px){
  .ct-aside{ border-top:0; padding-block-start:0; }
}

.ct-hero .ct-aside .ct-aside-h{
  margin:0 0 14px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ct-ink-2) !important;
}

.ct-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:15px;
}
.ct-steps li{
  display:block;
  margin:0;
}
.ct-steps .ct-step-t{ display:block; }
.ct-hero .ct-steps b{
  display:block;
  font-size:0.97rem;
  font-weight:600;
  line-height:1.4;
  color:var(--ct-ink);
}
.ct-hero .ct-steps span.ct-step-d{
  display:block;
  margin-top:2px;
  font-size:0.9rem;
  line-height:1.5;
  color:var(--ct-ink-2);
}

.ct-hero .ct-reply{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid var(--ct-hair);
  font-size:0.9rem;
  line-height:1.5;
  color:var(--ct-ink-2) !important;
}
.ct-reply svg{
  flex:none;
  width:17px;
  height:17px;
  margin-top:2px;
  color:var(--ct-green);
}

.ct-hero .ct-alt{
  margin:11px 0 0;
  font-size:0.9rem;
  line-height:1.6;
  color:var(--ct-ink-2) !important;
}
.ct-hero .ct-alt a{ font-weight:600; }

/* ============================================================================
   5 · "Other ways to reach us" — three plain columns, hairlines, no boxes
   ========================================================================== */

.ct-more{
  padding:clamp(44px,6vw,72px) 0 clamp(52px,7vw,84px);
  text-align:start;
}
.ct-more .container{ max-width:1100px; }

.ct-more .ct-more-head{ margin-bottom:clamp(24px,3vw,34px); }
.ct-more .ct-more-head .eyebrow{ margin-bottom:0.6rem; }
.ct-more .ct-more-head h2{ margin:0; letter-spacing:-0.01em; }

.ct-ways{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-top:1px solid var(--ct-hair);
}
.ct-ways > li{
  margin:0;
  padding:24px 0;
  border-bottom:1px solid var(--ct-hair);
}
@media (min-width:860px){
  .ct-ways{
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid var(--ct-hair);
  }
  .ct-ways > li{
    padding:26px clamp(22px,2.5vw,32px);
    border-bottom:0;
    border-inline-start:1px solid var(--ct-hair);
  }
  .ct-ways > li:first-child{
    border-inline-start:0;
    padding-inline-start:0;
  }
  .ct-ways > li:last-child{ padding-inline-end:0; }
}

.ct-way-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:12px;
  border-radius:10px;
  color:var(--ct-green);
  background-color:var(--ct-green-soft);
}
.ct-way-ic svg{ width:18px; height:18px; }

.ct-more .ct-ways h3{
  margin:0 0 5px;
  font-size:1.02rem;
  font-weight:600;
  line-height:1.3;
}
.ct-more .ct-ways p{
  margin:0 0 10px;
  font-size:0.92rem;
  line-height:1.55;
  color:var(--ct-ink-2) !important;
  max-width:34ch;
}
.ct-way-link{
  font-size:0.92rem;
  font-weight:600;
}

/* ============================================================================
   6 · RTL — logical properties do most of it; these are the leftovers
   ========================================================================== */

[dir="rtl"] .ct-intro,
[dir="rtl"] .ct-aside,
[dir="rtl"] .ct-panel,
[dir="rtl"] .ct-more{ text-align:right; }

[dir="rtl"] .ct-hero .ct-panel .ct-fine{ text-align:center; }
[dir="rtl"] .ct-hero .ct-panel .ct-submit{ text-align:center; }

/* phone + email stay left-to-right inside an RTL paragraph */
[dir="rtl"] .ct-input[type="tel"],
[dir="rtl"] .ct-input[type="email"]{ direction:ltr; text-align:right; }
[dir="rtl"] .ct-input[type="tel"]::placeholder,
[dir="rtl"] .ct-input[type="email"]::placeholder{ direction:ltr; text-align:right; }
[dir="rtl"] .ct-tel{ direction:ltr; unicode-bidi:isolate; }

/* ============================================================================
   7 · Small screens
   ========================================================================== */

@media (max-width:640px){
  .ct-hero .container.ct-grid{ gap:28px; }
  .ct-hero .ct-panel{
    padding:20px 18px;
    border-radius:18px;
    gap:16px;
  }
  .ct-hero .ct-intro .lead{ font-size:1.02rem; }
  .ct-hero .ct-panel .ct-head h2{ font-size:1.1rem; }
}

@media (max-width:400px){
  .ct-hero .ct-panel{ padding:18px 15px; }
  .ct-steps{ gap:14px; }
}

/* ============================================================================
   8 · Motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .ct-panel .ct-input{ transition:none; }
  .ct-hero .ct-panel .ct-submit{ transition:none; }
  .ct-hero .ct-panel .ct-submit:hover,
  .ct-hero .ct-panel .ct-submit:active{ transform:none; }
}

/* ── Invalid field feedback (2026-08-30) ──────────────────────────────────────
   :user-invalid, NOT :invalid. A required-but-empty field is :invalid from the
   moment the page loads, so plain :invalid paints every empty box red before
   anyone has typed. :not(:placeholder-shown) was the first attempt and was
   wrong too: "Parent name" carries no placeholder attribute, so the guard never
   applied to it and it lit up red while empty. :user-invalid only matches after
   the visitor has actually interacted with the field and left it wrong. */
.ct-panel .ct-input:user-invalid{
  border-color:#C0492B;
  box-shadow:0 0 0 3px rgba(192,73,43,0.12);
}
.ct-panel .ct-input:user-invalid:focus{
  border-color:#C0492B;
}