/* =========================================================
   NIRMANA STUDIO — About & Contact (contact.html)
   Page-only styles. Uses the :root tokens from css/style.css.
   Signature moment: the "drafting table" value cards. Each
   blueprint panel draws itself in on scroll; on hover the
   cube lifts into an exploded view, the spirit level settles
   true, and the compass swings around its needle to draw its
   arc. On touch screens the same states play once on reveal.
   ========================================================= */

/* ---------- Hero ---------- */
.ct-define {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: -6px 0 22px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 253, 248, .7); box-shadow: inset 0 0 0 1.5px rgba(194, 133, 63, .28);
  font-size: 15px; color: var(--navy-2);
}
.ct-define__word { font-size: 22px; font-weight: 600; line-height: 1; color: var(--copper-d); }
.ct-define .mono { color: var(--muted); font-size: 12px; }
.ct-define i { color: var(--muted); }

/* quick-contact card styled like a drawing title block */
.ct-facts { padding: 0; overflow: hidden; }
.ct-facts__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 22px 16px; border-bottom: 1.5px solid var(--navy);
}
.ct-facts ul { margin: 0; gap: 0; }
.ct-facts li {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: baseline;
  padding: 14px 22px; border-bottom: 1px dashed rgba(27, 42, 58, .14);
}
.ct-facts li:last-child { border-bottom: 0; }
/* replace the default dot with a copper sweep that fills the row on hover */
.ct-facts li::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, rgba(226, 176, 119, .28), rgba(226, 176, 119, 0) 85%);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.ct-facts li::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px;
  background: var(--copper); translate: 0 -50%; transition: height .45s var(--spring);
}
.ct-facts li:hover::before { transform: scaleX(1); }
.ct-facts li:hover::after { height: 60%; }
.page-hero__aside .ct-facts li small { font-size: 10.5px; transition: letter-spacing .4s var(--ease); }
.ct-facts li:hover small { letter-spacing: .16em; }
.ct-facts li a, .ct-facts li span { font-size: 15.5px; font-weight: 500; color: var(--navy); }

/* ---------- Studio story ---------- */
.ct-story { padding-top: clamp(30px, 5vw, 70px); }
.ct-story .about__badge { width: 164px; height: 164px; transition: scale .6s var(--spring); }
.ct-story .about__badge img { width: 72px; margin: 0; }
.ct-story .about__media:hover .about__badge { scale: 1.08; }
.ct-ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: ctSpin 24s linear infinite; pointer-events: none; }
.ct-ring text { font-family: var(--f-mono); font-size: 15px; font-weight: 500; letter-spacing: .12em; fill: var(--copper-d); }
@keyframes ctSpin { to { rotate: 360deg; } }

.ct-story .stat { transition: transform .6s var(--spring), box-shadow .4s; }
.ct-story .stat:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow), var(--inset); }
.ct-team-label { margin: 0 0 14px; color: var(--copper-d); font-size: 11px; }

.ct-story .member {
  position: relative; padding: 18px 8px 16px; border-radius: var(--r-md);
  transition: background .4s, box-shadow .4s, transform .6s var(--spring);
}
.ct-story .member:hover { background: var(--paper); box-shadow: var(--shadow-sm), var(--inset); transform: translateY(-6px); }
/* dashed "measuring" ring that locks on around the avatar */
.ct-story .member::before {
  content: ""; position: absolute; left: 50%; top: 10px; width: 112px; height: 112px; margin-left: -56px;
  border-radius: 50%; border: 1.5px dashed var(--copper); pointer-events: none;
  opacity: 0; scale: .78; transition: opacity .4s, scale .7s var(--spring);
}
.ct-story .member:hover::before { opacity: 1; scale: 1; animation: ctSpin 10s linear infinite; }

/* ---------- Values: drafting-table cards ---------- */
.ct-values { overflow: hidden; }
.ct-values .section-head--split .lead { max-width: 420px; }
.ct-values__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ct-value { display: flex; flex-direction: column; padding: 12px 12px 30px; color: var(--navy); }
/* fade + spring in with the stagger, but lift instantly on hover */
.ct-value.reveal { transition: opacity 1s var(--ease) calc(var(--d, 0) * 90ms), transform .8s var(--spring) calc(var(--d, 0) * 90ms), box-shadow .4s; }
.ct-value.reveal:hover { transition-delay: 0s; }
.ct-value h3 { margin: 26px 18px 10px; font-size: 26px; }
.ct-value p { margin: 0 18px; }

.ct-draw {
  position: relative; height: 192px; border-radius: calc(var(--r-lg) - 10px); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, var(--navy-3), var(--navy-2) 60%, var(--navy));
  box-shadow: inset 0 0 0 1px rgba(158, 195, 230, .14);
}
.ct-draw .blueprint-grid { z-index: -1; mask-image: none; animation: ctGrid 7s linear infinite paused; }
/* shift by one full 96px tile on both axes so the loop has no visible jump */
@keyframes ctGrid { to { background-position: 96px 96px, 96px 96px, 96px 96px, 96px 96px; } }
/* scan line that sweeps the panel on hover */
.ct-draw::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; pointer-events: none;
  background: linear-gradient(180deg, rgba(158, 195, 230, 0), rgba(158, 195, 230, .16) 70%, rgba(226, 176, 119, .5) 100%);
  translate: 0 -110%; opacity: 0;
}
.ct-draw svg { position: absolute; left: 50%; top: 10px; width: 236px; height: 148px; translate: -50% 0; overflow: visible; }

.ct-d { fill: none; stroke: var(--copper-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ct-d--thin { stroke-width: 1.1; stroke: rgba(226, 176, 119, .75); }
.ct-d--lead { stroke-width: 3.2; stroke: var(--copper); }
.ct-g { fill: none; stroke: rgba(158, 195, 230, .4); stroke-width: 1; stroke-dasharray: 3 4; }
.ct-f { fill: rgba(226, 176, 119, .16); }
.ct-f--soft { fill: rgba(226, 176, 119, .07); }
.ct-f--lid { fill: rgba(226, 176, 119, .26); transition: fill .5s; }
.ct-sat, .ct-bubble { fill: var(--copper-2); }
.ct-dot { fill: rgba(158, 195, 230, .7); }
.ct-hinge { fill: var(--navy-2); stroke: var(--copper-2); stroke-width: 1.7; }
.ct-orbit { fill: none; stroke: rgba(158, 195, 230, .55); stroke-width: 1.2; stroke-dasharray: 5 6; animation: ctMarch 2.4s linear infinite paused; }
@keyframes ctMarch { to { stroke-dashoffset: -22; } }

/* draw-in on reveal */
.ct-value .ct-d { stroke-dashoffset: 1; }
.ct-value.is-in .ct-d { animation: ctDraw 1.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + .35s); }
@keyframes ctDraw { from { stroke-dashoffset: 1; opacity: .25; } to { stroke-dashoffset: 0; opacity: 1; } }

/* moving parts (rest state) */
.ct-lid { transition: transform .9s var(--spring); }
.ct-explode { opacity: 0; transition: opacity .5s; }
.ct-level { transform-box: view-box; transform-origin: 80px 40px; transform: rotate(-6deg); transition: transform 1.1s var(--spring); }
.ct-bubble { transition: transform 1.3s var(--spring); transform: translateX(11px); }
.ct-true { opacity: 0; transform-box: view-box; transform-origin: 80px 40px; transform: scaleX(.2); transition: opacity .4s, transform .9s var(--ease); }
.ct-compass { transform-box: view-box; transform-origin: 58px 74px; transition: transform 1.5s var(--ease); }
.ct-arc { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease); }

/* dimension-line caption */
.ct-dim {
  position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; align-items: center; gap: 10px;
  justify-content: center; color: rgba(158, 195, 230, .9); font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* active state: hover on pointer devices, once on reveal for touch */
@media (hover: hover) {
  .ct-value:hover .ct-draw::after { animation: ctScan 1.5s var(--ease); }
  .ct-value:hover .ct-draw .blueprint-grid,
  .ct-value:hover .ct-orbit { animation-play-state: running; }
  .ct-value:hover .ct-lid { transform: translateY(-10px); }
  .ct-value:hover .ct-f--lid { fill: rgba(226, 176, 119, .45); }
  .ct-value:hover .ct-explode { opacity: 1; }
  .ct-value:hover .ct-level { transform: none; }
  .ct-value:hover .ct-bubble { transform: none; }
  .ct-value:hover .ct-true { opacity: 1; transform: none; }
  .ct-value:hover .ct-compass { transform: rotate(-45deg); }
  .ct-value:hover .ct-arc { stroke-dashoffset: .667; }
  .ct-value:hover   .ct-value:hover .ct-dim { color: var(--copper-2); }
}
@media (hover: none) {
  .ct-value.is-in .ct-orbit { animation-play-state: running; }
  .ct-value.is-in .ct-lid { transform: translateY(-10px); transition-delay: 1.4s; }
  .ct-value.is-in .ct-explode { opacity: 1; transition-delay: 1.5s; }
  .ct-value.is-in .ct-level,
  .ct-value.is-in .ct-bubble { transform: none; transition-delay: 1.4s; }
  .ct-value.is-in .ct-true { opacity: 1; transform: none; transition-delay: 1.6s; }
  .ct-value.is-in .ct-compass { transform: rotate(-45deg); transition-delay: 1.4s; }
  .ct-value.is-in .ct-arc { stroke-dashoffset: .667; transition-delay: 1.4s; }
  .ct-value.is-in }
@keyframes ctScan { 0% { translate: 0 -110%; opacity: 1; } 100% { translate: 0 240%; opacity: 0; } }

/* ---------- Booking: rounded blueprint band behind the form ---------- */
.book { isolation: isolate; }
.book::before {
  content: ""; position: absolute; z-index: -1;
  inset: clamp(24px, 4vw, 56px) clamp(8px, 1.4vw, 20px);
  border-radius: var(--r-xl);
  background:
    linear-gradient(rgba(27, 42, 58, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(27, 42, 58, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--cream-2);
}

/* ---------- Visit: map viewfinder ---------- */
.ct-visit { padding-top: clamp(10px, 3vw, 40px); scroll-margin-top: 90px; }
.ct-visit .map { min-height: 460px; }
/* keep the logo pin clear of Google's place card / "Open in Maps" chip (top-left)
   and of the layer thumbnail (bottom-left) */
.ct-visit .map__pin { z-index: 2; top: auto; bottom: 66px; }
.ct-hud { position: absolute; inset: 14px; z-index: 1; pointer-events: none; }
.ct-hud i {
  position: absolute; width: 30px; height: 30px; border: 2.5px solid var(--navy);
  filter: drop-shadow(0 0 1.5px rgba(255, 253, 248, .9));
  transition: translate .7s var(--spring), border-color .4s;
}
.ct-hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.ct-hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.ct-hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.ct-hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.ct-hud__target {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; border: 2px dashed var(--copper);
  opacity: 0; scale: 1.8; transition: opacity .4s, scale .8s var(--spring);
}
.ct-hud__target::before, .ct-hud__target::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--copper); }
.ct-hud__target::before { width: 130px; height: 1.5px; margin: -.75px 0 0 -65px; }
.ct-hud__target::after { width: 1.5px; height: 130px; margin: -65px 0 0 -.75px; }
.ct-hud span {
  position: absolute; top: 0; right: 44px; padding: 8px 14px; border-radius: 999px;
  background: var(--navy); color: var(--cream); font-size: 10.5px; white-space: nowrap;
  box-shadow: var(--shadow-sm); opacity: 0; translate: 0 -6px; transition: opacity .4s, translate .6s var(--spring);
}
.map:hover .ct-hud i { border-color: var(--copper); }
.map:hover .ct-hud i:nth-child(1) { translate: 10px 10px; }
.map:hover .ct-hud i:nth-child(2) { translate: -10px 10px; }
.map:hover .ct-hud i:nth-child(3) { translate: 10px -10px; }
.map:hover .ct-hud i:nth-child(4) { translate: -10px -10px; }
.map:hover .ct-hud__target { opacity: 1; scale: 1; animation: ctSpin 12s linear infinite; }
.map:hover .ct-hud span { opacity: 1; translate: 0 0; }
.ct-visit .c-item a { font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ct-values__grid { grid-template-columns: 1fr; gap: 16px; }
  .ct-value { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; grid-template-rows: auto 1fr; column-gap: 8px; align-items: start; padding: 12px; }
  .ct-value .ct-draw { grid-row: 1 / span 2; }
  .ct-value h3 { margin: 18px 18px 8px; }
  .ct-value p { margin: 0 18px 12px; }
  .ct-story .about__badge { right: 0; }
  .ct-hud span { opacity: 1; translate: 0 0; }
  .ct-visit .map { min-height: 400px; }
}
@media (max-width: 680px) {
  .ct-define { border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; }
  .ct-define__word { font-size: 20px; }
  .ct-hero .page-hero__actions .btn { flex: 1 1 100%; }
  .ct-facts__head { padding: 16px 18px 14px; }
  .ct-facts li { grid-template-columns: 78px 1fr; padding: 12px 18px; }
  .ct-facts li a, .ct-facts li span { font-size: 15px; }
  .ct-story .about__badge { width: 124px; height: 124px; }
  .ct-story .about__badge img { width: 54px; }
  .ct-ring text { font-size: 16px; }
  .ct-story .member { padding: 14px 4px 12px; }
  .ct-story .member::before { width: 92px; height: 92px; margin-left: -46px; top: 6px; }
  .ct-story .member small { display: block; line-height: 1.35; }
  .ct-value { display: flex; align-items: stretch; padding: 10px 10px 26px; }
  .ct-draw { height: 164px; }
  .ct-draw svg { width: 196px; height: 122px; }
  .ct-value h3 { margin: 20px 14px 8px; font-size: 24px; }
  .ct-value p { margin: 0 14px; }
  .ct-visit .map { min-height: 340px; }
  .ct-hud { inset: 10px; }
  .ct-hud i { width: 24px; height: 24px; }
  .ct-hud span { right: auto; left: 50%; top: auto; bottom: 34px; transform: translateX(-50%); font-size: 9.5px; }
}

/* =========================================================
   PARENT COMPANIES (#group)
   ========================================================= */
.group-sec { padding-block: clamp(70px, 9vw, 120px) clamp(60px, 8vw, 110px); }
.group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.group-card {
  position: relative; display: grid; grid-template-columns: clamp(120px, 12vw, 150px) 1fr; gap: clamp(18px, 2.4vw, 28px); align-items: center;
  padding: clamp(20px, 2.8vw, 32px); border-radius: var(--r-lg); background: var(--paper); color: var(--navy);
  box-shadow: var(--shadow), var(--inset);
}
.group-card__logo { display: grid; place-items: center; aspect-ratio: 1; padding: 16px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); transition: transform .6s var(--spring); }
.group-card__logo img { width: auto; height: auto; max-width: 100%; max-height: 112px; object-fit: contain; }
.group-card:hover .group-card__logo { transform: rotate(-4deg) scale(1.05); }
.group-card__body { display: block; }
.group-card__role { display: inline-block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--copper-d); }
.group-card h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.group-card__text { display: block; margin-bottom: 14px; font-size: 15px; color: var(--muted); }
.group-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.group-card__chips i { padding: 5px 11px; border-radius: 999px; background: var(--cream); color: var(--navy-3); font-size: 12.5px; font-style: normal; }
.group-card__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--navy); }
.group-card__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring); }
.group-card:hover .group-card__link { color: var(--copper-d); }
.group-card:hover .group-card__link svg { transform: translate(3px, -3px); }
@media (max-width: 980px) { .group__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .group-card { grid-template-columns: 1fr; }
  .group-card__logo { width: 120px; }
}