/* ============================================================
   PRIME ACADEMY GROUP · primeacg.com — v4
   contact.css — contact page styles
   Lifted verbatim out of the single-file pages in www/website/.
   ============================================================ */
/* ============================================================
   CONTACT (v4) - page-scoped section styles, C1-C6.
   The shared v4 spine — tokens, primitives, nav, footer and the
   reveal scaffold — is base.css + components.css, both loaded
   ahead of this file. Nothing here adds to the spine or
   redefines a token - each rule is scoped to one .c-* section.

   Band rhythm, top to bottom:
     C1 deep photo . fact strip white . C2 mist . C3 white
     . C4 mist . C5 navy . C6 shell closer
   C4 holds the one dark object on a light page. C5 is the only
   full dark band and it carries no screenshot, so nothing
   light-on-light dissolves into it.
   ============================================================ */

/* Heading emphasis: <b> inside a section head is the accent half of
   the line, never a weight change alone. Deep blue on light bands,
   azure on dark ones - same rule the other v4 pages follow. */
/* Two-colour headings are global now - see base.css. */

/* the spine ships .h1/.h2/.lead with no margins - each section owns its rhythm */
.c-users h2, .c-paths h2, .c-enq h2, .c-next h2{ margin:0 0 clamp(14px,1.6vw,20px); }
.c-users .lead, .c-paths .lead, .c-enq .lead, .c-next .lead{ margin:0; max-width:60ch; }
.c-users .section-head, .c-paths .section-head,
.c-enq .section-head, .c-next .section-head{ margin-bottom:clamp(38px,4.6vw,64px); }

/* ---------- C1 . MASTHEAD - deep band over photography ----------
   Transposed from .s-mast in about.css so all four inner pages
   open on the same shape: same height, same scrim, same two buttons
   in the same order, title left / lead and actions right. */
.c-mast{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:74vh;
  padding-block:clamp(148px,17vw,210px) clamp(64px,8vw,98px);
}
.c-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.c-mast .parallax-inner > img{ object-position:center 44%; }
.c-mast h1{ color:#fff; max-width:14ch; text-wrap:balance; }
.c-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }
/* No .c-mast__rule here, unlike the other three inner pages. That 2px gradient
   edge marks the dark mast meeting a light section, which is what happens on
   about, online-training and subscription-plans. Contact is the exception: the
   band directly under the mast is .c-facts, which is background:var(--navy), so
   the line sat between two dark surfaces with nothing to divide and read as a
   stray blue stripe above the three cells. If .c-facts is ever lightened, put
   the rule back. */

/* ---------- C1b . FACT STRIP - navy, hero-bar treatment ----------
   Runs across rather than down the right-hand column on purpose. The
   vertical fact list belongs to Subscription Plans and About, and a
   third copy of it would make the three mastheads one template. Here
   it sits under the hero so someone who only wants to phone never has
   to travel as far as the form. */
/* Navy, so it continues the masthead above it and the 2px gradient rule reads
   as the seam — the same shape the homepage hero bar has inside the hero. */
.c-facts{ background:var(--navy); }
/* Full-bleed, so the three cells reach both screen edges the way the homepage
   hero bar does. Inside the container the cells stopped ~236px short of each
   edge at 2560: that slab of navy belonged to no cell, so it never highlighted
   on hover and the dividers died before the edge, which read as the strip being
   off-centre.
   The container is widened rather than the row escaping with 100vw — 100vw
   counts the scrollbar, which pushed the strip 7px off each edge and knocked
   the thirds out of true. The section already spans the viewport, so taking the
   cap and the gutter off the container inside it is exact at every width. */
.c-facts .container{ max-width:none; padding-inline:0; }
.c-facts__row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0;
}
/* Centred and symmetric, matching the hero glass bar on the homepage: the
   three columns read as one banner rather than a left-aligned list. First
   child keeps its padding — dropping it is what made column one sit wider
   than the other two. */
.c-facts__item{
  position:relative;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,36px);
  border-left:1px solid rgba(255,255,255,.22);
  text-align:center;
  transition:background-color var(--dur-state) var(--ease);
}
.c-facts__item:first-child{ border-left:0; }
/* All three cells react, so the strip behaves as one row. Response time has no
   link, so it darkens and lifts its value like the other two but keeps a normal
   cursor - nothing there to click. */
.c-facts__item:hover{ background-color:rgba(11,18,32,.45); }
.c-facts__item:hover dd{ color:var(--azure); }
.c-facts dt{
  margin:0 0 6px; font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.c-facts dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.45; color:#fff; transition:color var(--dur-state) var(--ease); }
.c-facts a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32);
  transition:color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
/* Stretches the link over its whole cell, so the cell that lights up is the cell
   you can click - the homepage hero bar has the anchor as the cell itself. */
.c-facts a::after{ content:""; position:absolute; inset:0; }
.c-facts__item:hover a,
.c-facts a:focus-visible{ color:var(--azure); border-bottom-color:var(--azure); }

/* ---------- C2 . ALREADY USING THE PLATFORM - mist band ----------
   A junction sign, not a section with something to sell: the two
   people most likely to land here already have an account. */
.c-routes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);
}
.c-route{
  display:flex; flex-direction:column;
  padding:clamp(24px,2.8vw,34px); border-radius:var(--radius);
  background:var(--white); border:1px solid var(--line);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.c-route:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(20,33,61,.45); }

.c-route{ position:relative; cursor:pointer; }
.c-route .link-arrow::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--radius); }
.c-route__tag{
  margin:0 0 12px; font-family:var(--font-display); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--deep);
}
.c-route h3{ margin:0 0 12px; font-size:clamp(19px,1.9vw,24px); line-height:1.16; letter-spacing:var(--track-md); }
.c-route p{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:var(--slate); }
.c-route .link-arrow{ margin-top:auto; }

/* ---------- C3 . ENQUIRY PATHS - white band ----------
   Three cards that answer "what is this about" before the form asks
   it. Each one is a real link to the form: with JavaScript it also
   sets the enquiry type and puts the caret in the field, without it
   the card still takes you there and the field is a normal select. */
.c-paths__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.9vw,24px);
}
.c-path{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,2.7vw,34px) clamp(24px,2.7vw,34px) clamp(20px,2.2vw,26px);
  border-radius:var(--radius); background:var(--white); border:1px solid var(--line);
  color:inherit; text-decoration:none;
  /* same hover as .c-route above: lift and shadow only, no coloured border */
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.c-path:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(20,33,61,.45); }
.c-path:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; }
/* align-self keeps the pill at its own width: .c-path is a flex column, so without
   it the marker stretches the full width of the card. The fixed width used to hold
   it in; a min-width does not. The other three markers are absolutely positioned,
   so they are out of flow and never had this problem. */
.c-path__n{
  display:inline-flex; align-items:center; justify-content:center; align-self:flex-start;
  min-width:42px; height:30px; padding:0 12px; margin:0 0 18px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:#fff; background:var(--deep);
}
.c-path h3{ margin:0 0 10px; font-size:clamp(18px,1.8vw,22px); line-height:1.18; letter-spacing:var(--track-md); }
.c-path p{ margin:0; font-size:14px; line-height:1.6; color:var(--slate); }
.c-path__go{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:clamp(18px,2vw,24px);
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--deep);
}
.c-path__go svg{ width:1.05em; height:1.05em; flex:none; transition:transform var(--dur-fast) var(--ease-alt); }
.c-path:hover .c-path__go{ color:var(--azure); }
.c-path:hover .c-path__go svg{ transform:translateX(.25em); }

/* ---------- C4 . FORM AND DETAILS - mist band ----------
   The form sits open on the band with no card around it; the details
   panel opposite is the one dark object on a light page. */
.c-enq__grid{
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(30px,4vw,64px); align-items:start;
}
.c-form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
}
.c-field{ display:flex; flex-direction:column; gap:8px; }
.c-field--wide{ grid-column:1 / -1; }
.c-field > label{
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.c-field > label i{
  font-style:normal; font-weight:400; letter-spacing:.04em;
  text-transform:none; color:#5B6270;
}
.c-field input,
.c-field select,
.c-field textarea{
  width:100%; font:inherit; font-size:15px; line-height:1.5; color:var(--navy);
  background:var(--white); border:1px solid #838C9C; /* 3.08:1 on the mist band - the fields have no card behind them */
  border-radius:var(--radius-sm); /* controls take --radius-sm, per the two-shape rule in base.css. This was --radius, which also put it out of step with .s-footer__form input. */
  padding:13px 14px;
  transition:border-color var(--dur-fast) var(--ease-alt), box-shadow var(--dur-fast) var(--ease-alt);
}
.c-field textarea{ min-height:154px; resize:vertical; }
.c-field__hint{ margin:-2px 0 0; font-size:12.5px; line-height:1.55; color:#5B6270; }
/* Validation message. A form primitive, so it lives with the other .c-field rules
   rather than on the one page that currently uses it. Written by register.js when
   a field fails, removed when it passes. */
.c-field__err{ margin:-2px 0 0; font-size:12.5px; line-height:1.55; color:var(--red); }
.c-field input[aria-invalid="true"],
.c-field select[aria-invalid="true"],
.c-field textarea[aria-invalid="true"]{ border-color:var(--red); }
.c-field select{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px;
}
@media (forced-colors: active){
  /* the drawn chevron is a fixed-colour data URI and would not be repainted,
     so hand the indicator back to the OS */
  .c-field select{ background-image:none; appearance:auto; -webkit-appearance:auto; }
}
.c-field input::placeholder,
.c-field textarea::placeholder{ color:#6B7280; }
.c-field input:focus,
.c-field select:focus,
.c-field textarea:focus{
  /* No outline reset here - the spine's :focus-visible ring is the only
     indicator that survives forced-colors mode, so it has to render. The
     border and glow are decoration on top of it. */
  border-color:var(--azure); box-shadow:0 0 0 3px rgba(33,150,243,.16);
}
.c-consent{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:12px; padding-top:4px;
}
.c-consent input{ flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--deep); }
.c-consent label{ font-size:13.5px; line-height:1.55; color:#5B6270; }
.c-consent a{ color:var(--deep); text-decoration:none; border-bottom:1px solid rgba(13,71,161,.32); }
.c-consent a:hover{ color:var(--azure); border-bottom-color:var(--azure); }
.c-form__actions{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end;
  gap:16px 22px; margin-top:clamp(4px,.8vw,8px);
}

.c-details{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radius); background:var(--navy);
  padding:clamp(28px,3.2vw,42px);
}
.c-details__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
/* Same overlay as the footer CTA blocks (.s-footcta__scrim in base.css), so the
   two dark photo cards on the site read as one thing. One hue at three
   opacities, not a navy-to-blue blend: this card used to shift colour down its
   height, which was the only place on the site that did that. */
.c-details__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,33,61,.15) 0%,rgba(20,33,61,.60) 52%,rgba(20,33,61,.88) 100%);
}
.c-details__in{ position:relative; z-index:2; }
.c-details .eyebrow{ color:var(--azure); }
.c-details h3{ margin:14px 0 0; color:#fff; font-size:clamp(20px,2vw,25px); line-height:1.16; letter-spacing:var(--track-md); }
.c-details > .c-details__in > p{ margin:12px 0 0; max-width:36ch; font-size:14.5px; line-height:1.6; color:var(--mist); }
.c-dl{ margin:clamp(22px,2.6vw,30px) 0 0; }
/* No rules between the entries. The label above each one already separates them,
   so the lines were doing the same job twice. Padding carries the spacing now,
   and it goes up a little to replace what the rules were adding. */
.c-dl > div{ padding:19px 0 0; }
.c-dl dt{
  margin:0 0 5px; font-family:var(--font-display); font-weight:700;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.c-dl dd{ margin:0; font-size:15px; line-height:1.5; color:#fff; }
.c-dl dd small{ display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.62); }
.c-dl a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--line-on-dark); }
.c-dl a:hover{ color:var(--azure); border-bottom-color:var(--azure); }

/* ---------- C5 . WHAT HAPPENS NEXT - navy band ----------
   Four stations on one hairline, the same rail the other pages use
   for a sequence. Below it the manual purchase path, stated plainly
   once for packages and subscriptions both - this is the only place
   on the site that says it outright. */
.c-run{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.c-run li{ position:relative; padding-top:clamp(26px,2.6vw,32px); border-top:2px solid var(--line-on-dark);
  transition:border-color var(--dur-fast) var(--ease); }
/* Pill, not a disc: same shape family as the capability rail's markers on Home.
   It sits on the rule with the copy below it, so the extra width just covers a
   little more of the rule and nothing shifts. */
.c-run__n{
  position:absolute; left:0; top:0; transform:translateY(-50%);
  min-width:42px; height:30px; padding:0 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:var(--navy); background:var(--azure);
  transition:box-shadow var(--dur-fast) var(--ease);
}
.c-run h3{ margin:0 0 8px; color:#fff; font-size:clamp(16px,1.5vw,18.5px); line-height:1.22; letter-spacing:var(--track-sm);
  transition:color var(--dur-fast) var(--ease); }

/* Hover: rule, marker and title move together to the same accent, at the same
   speed, so a step reads as one thing lighting up rather than three effects.
   Same 180ms and same azure the homepage pipeline and the capability rail
   already use. No cursor change and no movement: these are steps, not links,
   and a pointer on text that does not click is worse than no hover at all.
   Colour only, so the site's reduced-motion rule flattens it for free. */
.c-run li:hover{ border-top-color:var(--azure); }
.c-run li:hover .c-run__n{ box-shadow:0 8px 24px rgba(33,150,243,.34); }
.c-run li:hover h3{ color:var(--azure); }
.c-run p{ margin:0; font-size:13.5px; line-height:1.56; color:rgba(255,255,255,.72); }
.c-manual{ margin-top:clamp(40px,5vw,68px); }  /* look comes from .callout */
/* this one sits under the four-step row and lines up with it, so it drops the
   callout box cap and runs the full container width */
.c-manual{ max-width:none; }

.c-manual p{ margin:0 0 12px; max-width:76ch; font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.74); }
.c-manual p:last-child{ margin-bottom:0; }

/* ---------- PLACEHOLDER MARKER — now silent ----------
   .ph used to draw a dotted underline and a help cursor, paired with a title
   tooltip, on every run of copy the client still had to confirm. Client asked
   for it gone on 04 Aug, so it renders nothing now. The class stays in the
   markup as the only way to find this content again:
       grep -rn 'class="ph"' www/v4.2/*.html
   Everything it marks is listed in www/PLACEHOLDER-CONTENT.md, including two
   invented contact details. Do not launch without walking that file. */

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .c-run{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(30px,4vw,40px); }
}
@media (max-width:1080px){
  .c-enq__grid{ grid-template-columns:1fr; }
  .c-details{ order:-1; }
}
@media (max-width:1024px){
  .c-paths__grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .c-mast{ min-height:auto; }
  .c-mast h1{ max-width:none; }
  .c-facts__row{ grid-template-columns:1fr; }
  .c-facts__item{ border-left:0; border-top:1px solid rgba(255,255,255,.22); }
  .c-facts__item:first-child{ border-top:0; }
  .c-routes{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .c-form{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .c-run{ grid-template-columns:1fr; }
}