/* ==========================================================
   Caesar Apparels Ltd — Contact page (extends style.css)
   ========================================================== */

/* ---------- Hero ---------- */
.ct-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bone);
  padding: clamp(150px, 20vh, 200px) 0 clamp(64px, 8vw, 104px);
}
.ct-thread { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; z-index: -1; overflow: visible; }
#thread-path { fill: none; stroke: var(--forest); stroke-width: 1.5; stroke-dasharray: 8 7; opacity: .35; vector-effect: non-scaling-stroke; }
.ct-plane path { fill: var(--forest); stroke: none; }
.ct-kicker { margin-bottom: 22px; }
.ct-title {
  font-size: clamp(48px, 8.4vw, 132px); line-height: .95; letter-spacing: -.045em; font-weight: 450;
  max-width: 14ch;
}
.ct-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ct-char { display: inline-block; will-change: transform; }
.ct-lede { margin-top: 28px; max-width: 48ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); }

.ct-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(40px, 5vw, 64px); max-width: 980px; }
.ct-quick a {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.ct-quick a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--forest);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.ct-quick a:hover { color: #fff; border-color: var(--forest); }
.ct-quick a:hover::before { transform: translateY(0); }
.ct-quick-label { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); transition: color .45s var(--ease); }
.ct-quick a:hover .ct-quick-label { color: var(--leaf); }
.ct-quick-value { grid-column: 1; font-size: 16px; font-weight: 550; }
.ct-quick .ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform .45s var(--ease); }
.ct-quick a:hover .ic { transform: translateX(4px) rotate(-45deg); }

/* ---------- Form + info ---------- */
.ct-main { padding-block: var(--section); }
.ct-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct-form { position: relative; }
.ct-form-head { margin-bottom: clamp(28px, 3.5vw, 44px); }

.chips { border: 0; margin: 0 0 clamp(28px, 3.5vw, 40px); padding: 0; }
.field-legend { font-size: 15px; font-weight: 600; margin-bottom: 14px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  position: relative; display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--muted);
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.chip span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--forest); border-radius: inherit;
  transform: scale(0); transition: transform .45s var(--ease);
}
.chip:hover span { border-color: var(--forest); color: var(--forest); }
.chip input:checked + span { color: #fff; border-color: var(--forest); }
.chip input:checked + span::before { transform: scale(1); }
.chip input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: 3px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { position: relative; }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 24px 0 10px; outline: none; resize: vertical;
  -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6960' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat; }
.field label {
  position: absolute; left: 0; top: 24px; font-size: 16px; color: var(--muted); pointer-events: none;
  transform-origin: left top; transition: transform .35s var(--ease), color .35s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field-select label { transform: translateY(-22px) scale(.8); }
.field input:focus + label, .field textarea:focus + label, .field select:focus + label { color: var(--forest); }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--forest); box-shadow: 0 1px 0 var(--forest); }
.field-error { display: none; margin-top: 6px; font-size: 13px; color: #b3261e; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #b3261e; }
.field.is-invalid label { color: #b3261e; }
.field.is-invalid .field-error { display: block; }

.ct-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(32px, 4vw, 44px); }
.ct-submit { height: 56px; padding: 0 28px; font-size: 16px; }
.ct-submit[disabled] { opacity: .7; pointer-events: none; }
.ct-note { font-size: 13.5px; color: var(--muted); max-width: 38ch; }

.ct-success {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
  background: var(--paper);
}
.ct-success[hidden] { display: none; }
.ct-check { width: 72px; height: 72px; }
.ct-check circle, .ct-check path { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-success h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 450; letter-spacing: -.02em; }
.ct-success p { color: var(--muted); max-width: 46ch; }
.ct-success a { color: var(--forest); font-weight: 600; }

.ct-info { position: sticky; top: 104px; }
.ct-info-inner {
  position: relative; overflow: hidden;
  background: var(--forest-deep); color: #fff; border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
}
.ct-info-inner::after {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  border: 1px dashed rgba(124,197,150,.35); pointer-events: none;
  transform: rotate(calc(var(--spin, 0) * 180deg));
}
.info-block { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.info-block:first-of-type { border-top: 0; padding-top: 4px; }
.info-block h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); margin-bottom: 10px; }
.info-block li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-block li + li { margin-top: 8px; }
.info-block a { font-size: 17px; transition: color .3s; }
.info-block a:hover { color: var(--leaf); }
.info-block p { color: rgba(255,255,255,.72); font-size: 15px; }
.copy {
  position: relative; height: 30px; padding: 0 12px; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.28); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85);
  transition: background-color .3s, border-color .3s, color .3s;
}
.copy:hover { background: #fff; color: var(--pine); border-color: #fff; }
.copy span { display: inline-block; }
.copy.is-done { background: var(--leaf); border-color: var(--leaf); color: var(--pine); }
.info-motto { margin-top: 12px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; color: var(--leaf); }

/* ---------- Offices + clocks ---------- */
.ct-offices { background: var(--bone); padding-block: var(--section); }
.ct-offices-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.clocks { display: flex; gap: clamp(20px, 3vw, 40px); }
.clock { display: flex; align-items: center; gap: 16px; }
.clock svg { width: 76px; height: 76px; flex: none; }
.clock-face { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.clock-ticks line { stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.hand { stroke-linecap: round; }
.hand-h { stroke: var(--ink); stroke-width: 3.2; }
.hand-m { stroke: var(--ink); stroke-width: 2.2; }
.hand-s { stroke: var(--forest); stroke-width: 1.2; }
.clock-pin { fill: var(--forest); }
.clock-label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.clock-time { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.clock-place { font-size: 13px; color: var(--muted); }

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { margin: 0; }
.acc-btn {
  width: 100%; display: grid; grid-template-columns: 56px 1.2fr 1fr auto 40px; align-items: center; gap: 16px;
  font-weight: 400;
  padding: clamp(20px, 2.4vw, 30px) 0; text-align: left; cursor: pointer;
}
.acc-num { font-size: 14px; font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; }
.acc-name { font-size: clamp(24px, 2.8vw, 40px); font-weight: 450; letter-spacing: -.025em; line-height: 1.1; transition: transform .5s var(--ease), color .35s var(--ease); }
.acc-btn:hover .acc-name, .acc-item.is-open .acc-name { color: var(--forest); }
.acc-btn:hover .acc-name { transform: translateX(8px); }
.acc-city { font-size: 15px; color: var(--muted); }
.acc-time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-icon { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .35s, border-color .35s; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink);
  transform: translate(-50%, -50%); transition: transform .45s var(--ease), background-color .35s;
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.is-open .acc-icon { background: var(--forest); border-color: var(--forest); }
.acc-item.is-open .acc-icon::before, .acc-item.is-open .acc-icon::after { background: #fff; }
.acc-item.is-open .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-panel { overflow: hidden; }
.acc-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 0 clamp(24px, 3vw, 36px) 72px; }
.acc-inner address { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--muted); }

/* Pre-animation state for the intro */
.js .page-contact .ct-title,
.js .page-contact .ct-kicker,
.js .page-contact .ct-lede,
.js .page-contact .ct-quick { opacity: 0; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1060px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-info { position: static; }
  .ct-offices-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .ct-quick { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .ct-submit { width: 100%; justify-content: center; }
  .clocks { flex-direction: column; gap: 16px; }
  .acc-btn { grid-template-columns: 36px 1fr 40px; gap: 4px 12px; }
  .acc-city, .acc-time { grid-column: 2; font-size: 13.5px; }
  .acc-icon { grid-column: 3; grid-row: 1 / span 3; }
  .acc-inner { flex-direction: column; align-items: flex-start; padding-left: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-plane { display: none; }
  .js .page-contact .ct-title, .js .page-contact .ct-kicker, .js .page-contact .ct-lede, .js .page-contact .ct-quick { opacity: 1; }
}