/* Contact — page-specific layout and set pieces only. Every reusable component lives in base.css.
   Set pieces: the direct-channel bar in the hero, the guided message (3 prompts that feed the form),
   the luminous confirmation that replaces the form on success, and the footprint constellation. */

/* ---------------------------------------------------------------- Hero */
.contact-hero { padding-bottom: 0; }
.contact-hero .page-hero__inner { padding-bottom: var(--space-xl); }
.contact-hero .page-hero__title { max-width: 14ch; }

/* Closing band: the LIVE line "Discover why Pertimm expertise matters." reads best on two lines */
.contact-cta .cta-band__title { max-width: 20ch; }


/* Direct channels: a hairline bar closing the hero (echoes the home hero foot) */
.channels { position: relative; display: grid; border-top: 1px solid var(--line-2); }
.channel { position: relative; display: grid; gap: .55rem; align-content: start; padding-block: var(--space-l) var(--space-xl); }
.channel::before {                     /* light runs along the hairline on hover / focus */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--spectrum); box-shadow: 0 0 12px var(--glow);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-4) var(--ease-out);
}
.channel:hover::before, .channel:focus-within::before { transform: scaleX(1); }
.channel__label { display: flex; align-items: center; gap: .55rem; font-size: var(--step--1); font-weight: 540; color: var(--fg-3); line-height: 1.3; }
.channel__icon { width: 1rem; height: 1rem; flex: none; color: var(--accent-text); }
.channel__line { --cluster-gap: .5rem .9rem; gap: .5rem .9rem; }
.channel__value { font-size: clamp(1.25rem, 1.08rem + .62vw, 1.625rem); }
.channel__value--link { display: inline-flex; align-items: center; gap: .45rem; }
.channel__value--link svg { width: .72em; height: .72em; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.channel__value--link:hover svg { transform: translate(2px, -2px); }
.channel__note { font-size: var(--step--1); line-height: 1.5; color: var(--fg-2); max-width: 40ch; }

@media (min-width: 1080px) {
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channel { padding-inline: var(--space-l); }
  .channel:first-child { padding-left: 0; }
  .channel:last-child { padding-right: 0; }
  .channel + .channel { border-left: 1px solid var(--line); }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .channel { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); column-gap: var(--space-l); padding-block: var(--space-m); }
  .channel__label { grid-row: 1 / span 2; align-self: start; padding-top: .5rem; }
  .channel + .channel { border-top: 1px solid var(--line); }
  .channels .channel:last-child { padding-bottom: var(--space-xl); }
}
@media (max-width: 639px) {
  .channel { padding-block: var(--space-m); }
  .channel + .channel { border-top: 1px solid var(--line); }
  .channels .channel:last-child { padding-bottom: var(--space-xl); }
}

/* ------------------------------------------------ Start the conversation */
.contact-write__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1080px) {
  .contact-write__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); }
  .guide { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Guided message: three prompts; with JS each one can be added to the message */
.guide { display: grid; gap: .75rem; }
@media (min-width: 720px) and (max-width: 1079px) {
  .guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guide__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(.9rem, .6rem + 1vw, 1.5rem);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  transition: border-color var(--dur-2), background-color var(--dur-2);
}
.guide__item::after {                  /* spectral rail once the prompt is in the message */
  content: ""; position: absolute; left: -1px; top: 1rem; bottom: 1rem; width: 2px;
  background: linear-gradient(180deg, var(--orchid), var(--iris) 50%, var(--glacier)); box-shadow: 0 0 12px var(--glow);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-3) var(--ease-out);
}
.guide__num {
  display: block; min-width: 2.2ch; padding-top: .1rem;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); font-weight: 250; font-stretch: 118%; line-height: .85; letter-spacing: -.05em;
  background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide__body { display: grid; gap: .4rem; justify-items: start; }
.guide__title { font-size: var(--step-1); letter-spacing: -.015em; line-height: 1.2; }
.guide__text { color: var(--fg-2); font-size: var(--step-0); line-height: 1.55; max-width: 44ch; }
.guide__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .45rem; }
.guide__add {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .35rem .85rem;
  font-size: var(--step--1); font-weight: 540; color: var(--fg); line-height: 1.2;
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.guide__add:hover { border-color: var(--line-3); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.guide__add svg { width: .9rem; height: .9rem; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.guide__add:hover .guide__icon-add { transform: rotate(90deg); }
.guide__add:hover .guide__icon-edit { transform: translateX(2px); }
.guide__icon-edit { display: none; }
.guide__item.is-included .guide__icon-add { display: none; }
.guide__item.is-included .guide__icon-edit { display: block; }
.guide__state { display: none; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--fg-2); }
.guide__state svg { width: .9rem; height: .9rem; color: var(--ok); }
.guide__item.is-included { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.guide__item.is-included::after { transform: scaleY(1); }
.guide__item.is-included .guide__state { display: inline-flex; }
@media (max-width: 1079px) {
  /* numeral beside the title, text and action at full width */
  .guide__item { align-items: center; align-content: start; row-gap: .5rem; }
  .guide__body { display: contents; }
  .guide__num { font-size: 2.1rem; padding-top: 0; }
  .guide__text, .guide__foot { grid-column: 1 / -1; }
  .guide__foot { margin-top: .15rem; }
}

/* The form panel: bevelled surface with a hairline frame that lights up on success */
.contact-panel {
  --cut: 24px;
  position: relative; isolation: isolate;
  padding: clamp(1.25rem, .6rem + 2.4vw, 2.75rem);
  background: var(--line-2); clip-path: var(--bevel);
  transition: background-color var(--dur-3) var(--ease-out);
}
.contact-panel::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--bevel);
  background: radial-gradient(90% 55% at 100% 0%, rgb(18 30 78 / .5), transparent 70%), var(--surface);
}
.contact-panel::after {                /* a short beam on the top edge */
  content: ""; position: absolute; left: 0; top: 0; width: min(46%, 22rem); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgb(228 156 242 / .9), rgb(166 140 255 / .7) 45%, transparent);
}
.contact-panel:focus-within { background: var(--line-3); }
.contact-panel.is-sent { background: var(--spectrum); }
.contact-panel.is-sent::before {
  background:
    radial-gradient(60% 45% at 50% 22%, rgb(166 140 255 / .16), transparent 70%),
    radial-gradient(90% 55% at 100% 0%, rgb(18 30 78 / .5), transparent 70%), var(--surface);
}

.contact-form { gap: var(--space-m); }
.contact-form .form__fields { gap: 1.25rem; }
.contact-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.contact-form__title { font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.15; }
.contact-form__message { min-height: 11rem; }
.contact-form .form__foot { padding-top: .35rem; }
.contact-form__alt { font-size: var(--step--1); color: var(--fg-3); }
.contact-form__alt .text-link { color: var(--fg-2); }
.contact-form__alt .text-link:hover { color: var(--fg); }
@media (max-width: 479px) {
  .contact-form__submit { width: 100%; }
}

/* Luminous confirmation (replaces the fields once the API answers ok) */
.contact-success, .contact-success__actions { display: none; }
.contact-form.is-success { justify-items: center; text-align: center; padding-block: clamp(1rem, .5rem + 3vw, 3rem); gap: var(--space-m); }
.contact-form.is-success .contact-success { display: grid; justify-items: center; gap: var(--space-l); }
.contact-form.is-success .contact-success__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.contact-form.is-success .form-status[data-state] {
  padding: 0; border: 0; background: none; max-width: 34ch;
  font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); text-align: center;
}
.contact-form.is-success .form-status[data-state]::before { display: none; }
.contact-form.is-success .form-status:focus { outline: none; }
.contact-form.is-success .form-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.contact-success__light { position: relative; isolation: isolate; width: clamp(7.5rem, 6rem + 5vw, 10.5rem); aspect-ratio: 1; display: grid; place-items: center; }
.contact-success__light::before {       /* bloom + rotating spectral glow, like the prism light */
  content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(240 237 247 / .2), transparent 20%),
    conic-gradient(from 200deg, rgb(138 212 255 / 0), rgb(138 212 255 / .32), rgb(166 140 255 / .42), rgb(228 156 242 / .32), rgb(228 156 242 / 0) 46%, rgb(138 212 255 / 0) 70%, rgb(138 212 255 / .2) 88%, rgb(138 212 255 / 0)),
    radial-gradient(closest-side, rgb(12 24 64 / .9), transparent 90%);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, rgb(0 0 0 / .45) 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, rgb(0 0 0 / .45) 50%, transparent 100%);
  animation: lite-turn 48s linear infinite;
}
.contact-success__light::after {        /* the three diffraction lines */
  content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgb(230 225 255 / .5) 50%, transparent calc(50% + .5px)),
    linear-gradient(30deg, transparent calc(50% - .5px), rgb(200 190 255 / .36) 50%, transparent calc(50% + .5px)),
    linear-gradient(150deg, transparent calc(50% - .5px), rgb(190 220 255 / .36) 50%, transparent calc(50% + .5px));
  -webkit-mask-image: radial-gradient(closest-side, transparent 18%, #000 26%, rgb(0 0 0 / .3) 55%, transparent 95%);
  mask-image: radial-gradient(closest-side, transparent 18%, #000 26%, rgb(0 0 0 / .3) 55%, transparent 95%);
}
.contact-success__ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgb(200 190 255 / .28); }
.contact-success__mark {
  position: relative; width: 44%; height: auto;
  filter: drop-shadow(0 0 1px rgb(200 190 255 / .6)) drop-shadow(0 0 20px rgb(166 140 255 / .45)) drop-shadow(0 0 60px rgb(228 156 242 / .2));
}
.contact-success__title { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); line-height: 1; letter-spacing: var(--track-h2); font-weight: 540; }
.contact-success__title em { font-weight: 330; }

@media (prefers-reduced-motion: no-preference) {
  .contact-form.is-success .contact-success__light::before { animation: ct-bloom 1.8s var(--ease-out) both, lite-turn 48s linear infinite; }
  .contact-form.is-success .contact-success__mark { animation: ct-ignite 1.3s var(--ease-out) .1s both; }
  .contact-form.is-success .contact-success__ring { animation: ct-ring 2.2s var(--ease-out) .25s both; }
  .contact-form.is-success .contact-success__title,
  .contact-form.is-success .form-status,
  .contact-form.is-success .contact-success__actions { animation: ct-rise 1s var(--ease-out) both; }
  .contact-form.is-success .contact-success__title { animation-delay: .35s; }
  .contact-form.is-success .form-status { animation-delay: .5s; }
  .contact-form.is-success .contact-success__actions { animation-delay: .65s; }
}
@keyframes ct-bloom { from { opacity: 0; transform: scale(.35); } }
@keyframes ct-ignite { from { opacity: 0; transform: scale(.72) translateY(6px); } }
@keyframes ct-ring { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; } 100% { opacity: .9; transform: scale(1); } }
@keyframes ct-rise { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------ Headquarters + footprint */
.places { display: grid; gap: var(--space-l); }
@media (min-width: 1080px) {
  .places { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
}

.hq { display: grid; gap: var(--space-m); align-content: start; }
.hq__media img { object-position: 50% 36%; }
.hq__body { display: grid; gap: .5rem; justify-items: start; }
.hq__eyebrow { font-size: var(--step--1); font-weight: 540; color: var(--fg-3); }
.hq__title { font-size: var(--step-3); letter-spacing: var(--track-h3); line-height: 1.06; }
.hq__address { font-size: var(--step-1); line-height: 1.45; color: var(--fg); }
.hq__time { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); color: var(--fg-2); }
.hq__time svg { width: .95rem; height: .95rem; flex: none; color: var(--accent-text); }
.hq__time time { color: var(--fg); font-weight: 540; }
.hq__actions { margin-top: .5rem; --cluster-gap: .75rem 1.5rem; }
@media (min-width: 640px) and (max-width: 1079px) {
  .hq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-l); }
}

.footprint {
  --fp-pad: clamp(1.1rem, .7rem + 1.8vw, 2.25rem);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-m);
  padding: var(--fp-pad);
  background: radial-gradient(70% 60% at 58% 42%, rgb(14 26 70 / .55), transparent 75%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
.footprint__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.footprint__title { font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.15; }
.footprint__stage { position: relative; aspect-ratio: 740 / 480; margin-block: auto; }
.footprint__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.footprint__note { margin-top: auto; }

/* SVG layers */
.fp-grid { opacity: .2; }
.fp-rings circle { stroke: rgb(200 210 255 / .16); stroke-width: 1; stroke-dasharray: 2 7; }
.fp-diffraction { opacity: .5; }
.fp-beam { stroke: url(#g-spectrum); stroke-width: 1.5; stroke-linecap: round; opacity: .72; transition: opacity var(--dur-2), stroke-width var(--dur-2); }
.fp-pulse { stroke: #f4f1ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .06 2; stroke-dashoffset: .06; opacity: 0; }
.fp-node__dot { fill: #f0edf7; transform-box: fill-box; transform-origin: center; }
.fp-node__halo {
  fill: rgb(166 140 255 / .1); stroke: rgb(200 190 255 / .42); stroke-width: 1;
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out), fill var(--dur-2), stroke var(--dur-2);
}
.fp-hq circle { transform-box: fill-box; transform-origin: center; }

.fp-beams .fp-beam:nth-child(2), .fp-pulses .fp-pulse:nth-child(2) { --d: 1; }
.fp-beams .fp-beam:nth-child(3), .fp-pulses .fp-pulse:nth-child(3) { --d: 2; }
.fp-beams .fp-beam:nth-child(4), .fp-pulses .fp-pulse:nth-child(4) { --d: 3; }
.fp-beams .fp-beam:nth-child(5), .fp-pulses .fp-pulse:nth-child(5) { --d: 4; }
.fp-beams .fp-beam:nth-child(6), .fp-pulses .fp-pulse:nth-child(6) { --d: 5; }

/* Beams draw out of Paris the first time the card is seen (decorative; the list carries the content) */
.js .fp-beam { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out), opacity var(--dur-2), stroke-width var(--dur-2); transition-delay: calc(var(--d, 0) * 110ms + 150ms), 0s, 0s; }
.js .footprint.was-inview .fp-beam, .no-reveal .fp-beam { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .footprint.was-inview .fp-pulse { animation: fp-pulse 5.6s var(--ease-in-out) infinite; animation-delay: calc(1.6s + var(--d, 0) * .8s); }
  .js .footprint:not(.is-inview) .fp-pulse { animation-play-state: paused; }
  .fp-hq circle { animation: fp-breathe 5s ease-in-out infinite alternate; }
  .js .footprint:not(.is-inview) .fp-hq circle { animation-play-state: paused; }
}
@keyframes fp-pulse {
  0% { stroke-dashoffset: .06; opacity: 0; }
  8% { opacity: 1; }
  46% { opacity: 1; }
  52% { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes fp-breathe { from { transform: scale(.9); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }

/* Labels: the accessible list of countries, placed on the constellation */
.footprint__list { margin: 0; }
.footprint__place, .footprint__hq {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  translate: -50% -50%;
  padding: .18rem .5rem; border-radius: var(--radius-xs);
  font-size: var(--step--1); font-weight: 540; line-height: 1.25; color: var(--fg); white-space: nowrap;
  background: rgb(5 6 11 / .62); box-shadow: inset 0 0 0 1px rgb(240 237 247 / .08);
  transition: background-color var(--dur-2), box-shadow var(--dur-2), color var(--dur-2);
}
.footprint__place[data-side="bottom"] { translate: -50% .9rem; }
.footprint__place[data-side="top"] { translate: -50% calc(-100% - .9rem); }
.footprint__place[data-side="left"] { translate: calc(-100% - .95rem) -50%; }
.footprint__place[data-side="right"] { translate: .95rem -50%; }
.footprint__place[data-side="bottom-start"] { translate: -1rem .9rem; }
.footprint__hq { translate: 1.9rem -50%; background: none; box-shadow: none; padding-inline: 0; font-weight: 600; }
.footprint__hq span { margin-left: .3rem; font-size: var(--step--2); font-weight: 560; color: var(--accent-text); }

/* Hover: light one route (pointer only; purely decorative) */
.fp-beam.is-lit { opacity: 1; stroke-width: 2.6; }
.footprint.has-lit .fp-beam:not(.is-lit) { opacity: .3; }
.fp-node.is-lit .fp-node__halo { transform: scale(1.4); fill: rgb(166 140 255 / .24); stroke: #c8b8ff; }
.footprint__place.is-lit { background: rgb(40 34 90 / .85); box-shadow: inset 0 0 0 1px rgb(200 190 255 / .5); }

@media (max-width: 639px) {
  .footprint__stage { margin-inline: calc(var(--fp-pad) * -1); }   /* let the map use the full card width */
  .footprint__place, .footprint__hq { font-size: var(--step--2); padding: .12rem .38rem; }
  .footprint__place[data-side="bottom"] { translate: -50% .6rem; }
  .footprint__place[data-side="top"] { translate: -50% calc(-100% - .6rem); }
  .footprint__place[data-side="left"] { translate: calc(-100% - .6rem) -50%; }
  .footprint__place[data-side="right"] { translate: .6rem -50%; }
  .footprint__place[data-side="bottom-start"] { translate: -.6rem .6rem; }
  .footprint__hq { translate: 1.2rem -50%; }
  .fp-node__dot { scale: 1.7; }
  .fp-node__halo { scale: 1.3; }
  .fp-beam { stroke-width: 2.2; }
  .fp-pulse { stroke-width: 3.6; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-pulse { display: none; }
}