/* ============================================================
   DERRICK INDUSTRIES — CONTACT PAGE UPGRADE
   Loaded only by contact.html. Requires site-motion.css for the
   page chrome ([data-reveal], header, scroll progress, --ease).
   ============================================================ */

/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */
.page-header{
  padding:88px 0 64px;
  overflow:hidden;
  isolation:isolate;
}
.ph-layers{ position:absolute; inset:0; z-index:0; }
.ph-layers > *{ position:absolute; inset:0; }

.ph-grid{
  background-image:
    linear-gradient(rgba(120,158,196,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,158,196,.13) 1px, transparent 1px),
    linear-gradient(rgba(120,158,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,158,196,.05) 1px, transparent 1px);
  background-size:110px 110px, 110px 110px, 22px 22px, 22px 22px;
  -webkit-mask-image:radial-gradient(110% 100% at 15% 20%, #000 15%, transparent 75%);
  mask-image:radial-gradient(110% 100% at 15% 20%, #000 15%, transparent 75%);
  animation:phDrift 32s linear infinite;
}
@keyframes phDrift{ to{ background-position:110px 110px, 110px 110px, 22px 22px, 22px 22px; } }

.ph-glow{
  background:
    radial-gradient(52% 70% at 8% 10%, rgba(44,79,114,.55) 0%, transparent 62%),
    radial-gradient(44% 60% at 92% 100%, rgba(92,130,168,.16) 0%, transparent 62%);
  animation:phBloom 15s ease-in-out infinite alternate;
}
@keyframes phBloom{
  from{ transform:scale(1); opacity:.9; }
  to{ transform:scale(1.09) translate3d(-2%,1%,0); opacity:1; }
}

.ph-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.ph-copy{ max-width:640px; }

.page-header .ph-title{
  font-size:clamp(34px,4.8vw,56px);
  line-height:1.05;
  margin:0;
}
.page-header .ph-title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.page-header .ph-title .line > span{ display:block; transform:translateY(112%); opacity:0; }
body.ready .page-header .ph-title .line > span{
  animation:lineUp 1s var(--ease) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes lineUp{ to{ transform:none; opacity:1; } }
.page-header .ph-title em{ font-style:normal; color:var(--amber); }

/* response-time badge */
.ph-badge{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 20px;
  border:1px solid var(--line-dk);
  background:rgba(20,27,37,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin-bottom:6px;
}
.ph-badge strong{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  font-weight:500;
}
.ph-badge span:not(.pip){ font-size:14.5px; color:var(--paper); }
.ph-badge .pip{
  width:8px; height:8px;
  margin-top:5px;
  flex:none;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 0 rgba(92,130,168,.7);
  animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{
  70%{ box-shadow:0 0 0 9px rgba(92,130,168,0); }
  100%{ box-shadow:0 0 0 0 rgba(92,130,168,0); }
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.contact-section{ padding:72px 0 88px; }
.contact-grid{ grid-template-columns:0.82fr 1.18fr; gap:56px; }

.col-label{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}

/* ------------------------------------------------------------
   INFO BLOCKS
   ------------------------------------------------------------ */
.info-col .info-block{
  position:relative;
  padding:22px 20px 22px 22px;
  border-top:none;
  border-left:2px solid var(--line);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.info-col .info-block:first-of-type{ padding-top:22px; }
.info-col .info-block:hover{
  border-left-color:var(--amber);
  background:var(--paper-2);
  transform:translateX(4px);
}
.info-col .info-block .ib-num{
  position:absolute;
  top:22px; right:16px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--line);
  transition:color .35s ease;
}
.info-col .info-block:hover .ib-num{ color:var(--steel-lt); }
.info-col .info-block .lab{ color:var(--steel); }
.info-col .info-block .val{ font-size:16.5px; line-height:1.5; }
.info-col .info-block .ph{ color:var(--slate); opacity:.75; }

.enquiry-types{
  margin-top:26px;
  padding:22px;
  background:var(--ink);
  color:var(--paper);
}
.enquiry-types .lab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}
.enquiry-types ul{ display:grid; gap:10px; }
.enquiry-types li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  color:#B7BEC8;
}
.enquiry-types li::before{
  content:"";
  position:absolute; left:0; top:9px;
  width:8px; height:2px;
  background:var(--amber);
  transition:width .3s var(--ease);
}
.enquiry-types li:hover{ color:var(--paper); }
.enquiry-types li:hover::before{ width:14px; }

/* ------------------------------------------------------------
   FORM SHELL
   ------------------------------------------------------------ */
.form-shell{
  background:var(--white);
  border:1px solid var(--line);
  padding:32px;
}
.form-shell.bracket-frame::before,
.form-shell.bracket-frame::after,
.form-shell .bf-tr,
.form-shell .bf-bl{ border-color:var(--amber); width:14px; height:14px; }

.form-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:20px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.fh-label{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.fh-ref{ font-family:var(--mono); font-size:11px; color:var(--amber-dp); margin-top:4px; }

.fh-meter{ min-width:150px; }
.fh-count{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--slate);
  text-align:right;
  margin-bottom:6px;
}
.fh-count b{ color:var(--steel); font-weight:600; }
.fh-bar{
  display:block;
  height:4px;
  background:var(--paper-2);
  overflow:hidden;
}
.fh-bar i{
  display:block;
  height:100%;
  width:var(--p, 0%);
  background:linear-gradient(90deg, var(--steel-lt), var(--amber));
  transition:width .5s var(--ease);
}

/* ------------------------------------------------------------
   FIELDS
   ------------------------------------------------------------ */
.form-field{ position:relative; }
.form-field label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  transition:color .25s ease;
}
.form-field input,
.form-field select,
.form-field textarea{
  background:var(--paper);
  border-color:var(--line);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:#A8AEB7; }

/* focus: amber rule sweeps across the base of the field */
.form-field::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .4s var(--ease);
  pointer-events:none;
}
.form-field.focused::after{ transform:scaleX(1); }
/* with an error open the rule would sit under the message, not the control */
.form-field.invalid::after{ display:none; }
.form-field.focused label{ color:var(--steel); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  background:var(--white);
  border-color:var(--steel-lt);
  box-shadow:0 6px 20px -14px rgba(27,36,48,.8);
}

/* completed field gets a quiet tick in the label row */
.form-field.filled label::after{
  content:"✓";
  font-family:var(--mono);
  font-size:12px;
  color:var(--amber-dp);
  animation:tickIn .35s var(--ease) both;
}
@keyframes tickIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.char-count{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--slate);
  text-transform:none;
}
.char-count.near{ color:var(--amber-dp); }

/* validation */
.field-err{
  display:block;
  max-height:0;
  overflow:hidden;
  font-family:var(--mono);
  font-size:11.5px;
  color:#B3401F;
  transition:max-height .3s var(--ease), margin-top .3s var(--ease);
}
.form-field.invalid .field-err{ max-height:40px; margin-top:8px; }
.form-field.invalid input,
.form-field.invalid textarea{ border-color:#B3401F; background:#FCF3F0; }
.form-field.invalid{ animation:nudge .4s var(--ease); }
@keyframes nudge{
  20%{ transform:translateX(-5px); }
  50%{ transform:translateX(4px); }
  75%{ transform:translateX(-2px); }
  100%{ transform:none; }
}

/* ------------------------------------------------------------
   SUBMIT
   ------------------------------------------------------------ */
.submit-btn{
  width:100%;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
}
.submit-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform:translateX(-120%);
}
.submit-btn:hover::before{ animation:sheen .8s var(--ease); }
.submit-btn.is-sending{ pointer-events:none; background:var(--steel); color:var(--white); }
.submit-btn.is-sending .arw{
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  width:14px; height:14px;
  font-size:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.submit-btn.is-sent{ pointer-events:none; background:var(--ink); color:var(--amber); }

.form-note{ line-height:1.6; }
.form-note.ok{ color:var(--steel); }
.form-note.warn{ color:#B3401F; }

/* ------------------------------------------------------------
   WHAT HAPPENS NEXT
   ------------------------------------------------------------ */
.next-steps{ position:relative; overflow:hidden; }
.next-steps::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,158,196,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,158,196,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(75% 70% at 50% 0%, #000, transparent 75%);
  animation:phDrift 40s linear infinite reverse;
  pointer-events:none;
}
.next-steps .wrap{ position:relative; z-index:1; }

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.steps li{
  position:relative;
  padding:28px 24px 26px;
  background:var(--ink-2);
  border:1px solid var(--line-dk);
  transition:border-color .35s ease, transform .45s var(--ease);
}
.steps li::before{
  content:"";
  position:absolute; left:0; top:0;
  height:2px; width:100%;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.steps li.in::before{ transform:scaleX(1); }
.steps li:hover{ border-color:rgba(92,130,168,.45); transform:translateY(-5px); }
.steps .s-num{
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  color:var(--amber);
  margin-bottom:14px;
}
.steps h4{ color:var(--paper); font-size:18px; margin-bottom:8px; }
.steps p{ color:#B7BEC8; font-size:14.5px; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   LOCATION CARD
   ------------------------------------------------------------ */
.map-card{
  position:relative;
  overflow:hidden;
  min-height:260px;
  border:1px solid var(--line);
  background:var(--white);
  display:flex;
  align-items:flex-end;
  padding:28px;
}
.map-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(44,79,114,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,79,114,.10) 1px, transparent 1px),
    linear-gradient(rgba(44,79,114,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,79,114,.05) 1px, transparent 1px);
  background-size:88px 88px, 88px 88px, 22px 22px, 22px 22px;
}
.map-pin{
  position:absolute;
  left:50%; top:42%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
}
.map-pin span{
  position:absolute; inset:0;
  background:var(--amber);
  border:2px solid var(--ink);
  border-radius:50%;
}
.map-pin::before,
.map-pin::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--amber);
  border-radius:50%;
  animation:ping 3s var(--ease) infinite;
}
.map-pin::after{ animation-delay:1.5s; }
@keyframes ping{
  from{ transform:scale(1); opacity:.9; }
  to{ transform:scale(6); opacity:0; }
}
.map-note{ position:relative; z-index:1; max-width:46ch; }
.map-note .lab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); margin-bottom:8px;
}
.map-note p{ font-size:14.5px; color:var(--slate); }
.map-coords{
  position:absolute;
  right:20px; bottom:20px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--slate);
  opacity:.6;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .ph-badge{ margin-bottom:0; }
}
@media (max-width:560px){
  .form-shell{ padding:24px 20px; }
  .map-coords{ display:none; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .page-header .ph-title .line > span{ opacity:1 !important; transform:none !important; }
  .ph-grid, .ph-glow, .next-steps::before, .map-pin::before, .map-pin::after{ animation:none !important; }
  .steps li::before{ transform:scaleX(1) !important; }
  .map-pin::before, .map-pin::after{ display:none; }
}