/* =========================================================
   ANIMAZE GRAPHIC — CONTACT PAGE REDESIGN
   ========================================================= */

:root{
  --ink:#111216;
  --ink-2:#24262d;
  --muted:#6d7280;
  --soft:#f7f7f4;
  --cream:#fff5ef;
  --orange:#ff6752;
  --orange-dark:#e95643;
  --line:#e8e8e4;
  --white:#fff;
  --display:"Archivo",Arial,sans-serif;
  --body:"Inter Tight",Inter,system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --max:1240px;
  --gutter:24px;

  /* Unified type scale — matches index.css so headings, card titles,
     and paragraphs are the same size as the homepage. */
  --u-heading:    clamp(1.9rem, 1.4rem + 1.9vw, 2.6rem);
  --u-subheading: clamp(1.05rem, 1rem + .3vw, 1.15rem);
  --u-copy:       0.975rem;
  --u-copy-lh:    1.7;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.wrap{width:100%;max-width:var(--max);margin:auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:10px;z-index:99999;
  padding:10px 16px;background:var(--ink);color:#fff
}
.skip:focus{left:12px}

.hero-kicker,
.form-eyebrow,
.detail-label{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:500;
}

.section-heading h2,
.bottom-cta-message h2{
  font-family:var(--display);
  font-size:var(--u-heading);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0;
  font-weight:800;
  color:var(--ink);
}
.section-heading h2 em{font-style:normal;color:var(--orange)}
.section-heading p{
  color:var(--muted);
  max-width:600px;
  margin:14px auto 0;
  font-size:var(--u-copy);
  line-height:var(--u-copy-lh);
}

/* Shared button base */
.hero-btn{
  min-height:44px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:4px;
  font-family:var(--display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:.25s ease;
}

.hero-btn--primary{
  background:var(--orange);
  color:#fff;
  border:1px solid var(--orange);
}

.hero-btn--primary:hover{
  background:var(--orange-dark);
  border-color:var(--orange-dark);
  transform:translateY(-2px);
}

/* ENQUIRY */
.enquiry-section{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,6vw,84px) 0;
  background:#fff;
}

/* tinted ruled panel sitting behind the intro column */
.enquiry-section::before{
  content:"";
  position:absolute;
  top:clamp(50px,7vw,86px);
  bottom:clamp(20px,3vw,40px);
  left:-4%;
  width:48%;
  background-color:var(--cream);
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,103,82,.09) 0 1px,
    transparent 1px 32px
  );
  border-radius:0 220px 220px 0;
  z-index:0;
}

/* dot-grid accent bleeding in from the bottom-right margin */
.enquiry-section::after{
  content:"";
  position:absolute;
  right:0;
  bottom:clamp(28px,4vw,56px);
  width:170px;
  height:112px;
  background-image:radial-gradient(circle, rgba(17,18,22,.16) 1.4px, transparent 1.5px);
  background-size:17px 17px;
  -webkit-mask-image:linear-gradient(-70deg, #000, transparent 76%);
          mask-image:linear-gradient(-70deg, #000, transparent 76%);
  z-index:0;
}

.enquiry-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
  gap:clamp(45px,8vw,110px);
  align-items:start;
}
.enquiry-intro{
  padding-top:16px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.enquiry-intro h2{
  font-family:var(--display);
  font-size:var(--u-heading);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 20px;
  font-weight:800;
  color:var(--ink);
}
.enquiry-intro h2 span{color:var(--orange)}
.enquiry-intro>p{max-width:440px;color:var(--muted);font-size:var(--u-copy);line-height:var(--u-copy-lh)}
.service-list{margin-top:40px;border-top:1px solid var(--line)}
.service-item{
  display:flex;align-items:center;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--line)
}
.service-icon{
  width:39px;height:39px;border-radius:50%;background:#fff1ec;
  color:var(--orange);display:grid;place-items:center;font-size:14px;flex:none
}
.service-item strong{display:block;font-family:var(--display);font-size:14px}
.service-item small{display:block;color:#8a8e98;font-size:12px;margin-top:1px}
.intro-note{
  display:flex;gap:12px;
  margin-top:auto;
  padding:16px 0;border-top:1px solid var(--line)
}
.intro-note__dot{
  width:8px;height:8px;background:var(--orange);border-radius:50%;margin-top:7px;flex:none
}
.intro-note strong{font-family:var(--display);font-size:13px}
.intro-note p{font-size:12px;color:var(--muted);margin:3px 0 0;line-height:1.5}

.form-card{
  background:#f8f8f6;
  border:1px solid #e9e9e4;
  border-radius:22px;
  padding:clamp(20px,3vw,32px);
  box-shadow:0 25px 70px rgba(17,18,22,.06);
}
.form-card__top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid #e2e2de
}
.form-eyebrow{color:var(--orange);display:block;margin-bottom:7px}
.form-card__top h3{
  font-family:var(--display);font-size:var(--u-subheading);font-weight:700;
  margin:0;letter-spacing:-.01em
}
.required-note{font-size:11px;color:#888b93;white-space:nowrap}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:12px}
.field label{
  display:block;font-family:var(--display);font-size:12px;font-weight:600;
  margin:0 0 7px;color:#30323a
}
.field label span{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;border:1px solid #dcdcd7;background:#fff;
  color:var(--ink);border-radius:7px;
  padding:10px 14px;
  outline:none;font-size:14px;transition:.2s ease
}
.field textarea{min-height:80px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#aaaeb6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,103,82,.1)
}

/* intl-tel-input plugin styling fix */
.iti { width: 100%; display: block; }
.iti__tel-input {
  width: 100% !important;
  border: 1px solid #dcdcd7 !important;
  border-radius: 7px !important;
  padding: 10px 14px 10px 85px !important;
  font-family: var(--body);
  font-size: 14px;
}
.iti__tel-input:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,103,82,.1) !important;
  outline: none;
}

.check-row{
  display:flex;align-items:flex-start;gap:9px;color:#70747d;
  font-size:12px;line-height:1.5;margin:9px 0
}
.check-row input{
  width:16px;height:16px;margin:1px 0 0;accent-color:var(--orange);flex:none
}
.check-row a{text-decoration:underline;color:#31333a;font-weight:600}
.check-row b{color:var(--orange)}
.submit-btn{
  width:100%;margin-top:21px;border:0;border-radius:6px;
  background:var(--ink);color:#fff;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;transition:.25s ease
}
.submit-btn:hover{background:var(--orange);transform:translateY(-2px)}
.submit-btn i{font-size:13px}
.hp-field{
  position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important
}
.enquiry-msg{margin-top:14px;padding:12px;border-radius:7px;font-size:13px}
.enquiry-msg.is-ok{background:#eaf7ef;color:#1e7a3c}
.enquiry-msg.is-error{background:#fdebea;color:#b3261e}

/* PROCESS */
.process-section{
  padding:clamp(48px,6vw,80px) 0;
  background:#fff;
  border-top:1px solid var(--line);
}
.process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  margin-top:38px;
}
.process-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;
  position:relative;transition:.25s ease;
}
.process-card:hover{
  transform:translateY(-4px);
  border-color:#ffd2c7;
  box-shadow:0 16px 34px rgba(17,18,22,.06);
}
/* connecting arrow between steps (desktop only) */
.process-card:not(:last-child)::after{
  content:"\f061";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:-37px;
  top:33px;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--orange);
  font-size:10px;
  z-index:2;
}
.process-no{position:absolute;top:24px;right:22px;color:#d5d7db;font:12px var(--mono);font-weight:500}
.process-card__icon{
  width:46px;height:46px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--orange);color:#fff;font-size:17px;
  box-shadow:0 6px 16px rgba(255,103,82,.25);
}
.process-card h3{font-family:var(--display);font-size:var(--u-subheading);font-weight:700;margin:0 0 8px;color:var(--ink)}
.process-card p{color:var(--muted);font-size:var(--u-copy);line-height:var(--u-copy-lh);max-width:280px;margin:0}

/* CLIENTS */
.clients-section{
  padding:clamp(48px,6vw,80px) 0;
  background:var(--soft);overflow:hidden
}
.section-heading--center{text-align:center}
.marquee-window{margin-top:38px;overflow:hidden;position:relative}
.marquee-window::before,.marquee-window::after{
  content:"";position:absolute;z-index:2;top:0;width:120px;height:100%;
  pointer-events:none
}
.marquee-window::before{left:0;background:linear-gradient(90deg,var(--soft),transparent)}
.marquee-window::after{right:0;background:linear-gradient(270deg,var(--soft),transparent)}
.client-marquee-track{
  display:flex;width:max-content;align-items:center;gap:22px;margin-bottom:22px;
  will-change:transform;cursor:pointer
}
.track-left{animation:marqueeLeft 38s linear infinite}
.track-right{animation:marqueeRight 38s linear infinite}
.client-marquee-track:hover,.paused-marquee{animation-play-state:paused}
.client-logo{
  width:190px;height:100px;display:grid;place-items:center;
  background:#fff;border:1px solid #e8e8e3;border-radius:12px;
  padding:22px;transition:.25s ease
}
.client-logo:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(17,18,22,.07)}
.client-logo img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes marqueeLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* TESTIMONIALS */
.testimonial-section{
  padding:clamp(48px,6vw,80px) 0;background:#fff
}
.quotes-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px
}
.quote-card{
  border:1px solid var(--line);border-radius:15px;padding:32px 28px;
  display:flex;flex-direction:column;min-height:360px;
  transition:.25s ease;background:#fff
}
.quote-card:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(17,18,22,.08)}
.quote-mark{
  font-family:Georgia,serif;font-size:58px;line-height:.65;color:var(--orange);
  margin-bottom:28px
}
.quote-card p{
  color:#535761;font-size:14px;line-height:1.75;font-style:italic;
  flex:1;margin:0 0 28px
}
.quote-card footer{border-top:1px solid var(--line);padding-top:19px}
.quote-card footer strong{display:block;font-family:var(--display);font-weight:700;font-size:var(--u-subheading)}
.quote-card footer span{display:block;color:#898d96;font-size:11px;margin-top:4px}

/* COMBINED BOTTOM CTA & CONTACT INFO (LIGHT VERSION) */
.bottom-contact-cta {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.bottom-contact-cta__layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 8vw, 80px);
  align-items: center;
}

.bottom-cta-message h2 {
  font-family: var(--display);
  font-size: var(--u-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

.bottom-cta-message h2 em {
  font-style: normal;
  color: var(--orange);
}

.bottom-cta-message p {
  color: var(--muted);
  font-size: var(--u-copy);
  line-height: var(--u-copy-lh);
  max-width: 420px;
  margin: 0 0 32px;
}

.bottom-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}

.clean-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform .2s ease;
}

a.clean-contact-item:hover {
  transform: translateY(-3px);
}

.clean-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #fff0eb;
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.clean-contact-item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clean-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  font-weight: 600;
  color: #989ba2;
}

.clean-contact-item strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap; /* Forces text to stay on one line */
}

/* RESPONSIVE */
@media(max-width:1050px){
  .enquiry-layout{grid-template-columns:1fr;gap:50px}
  .enquiry-intro{max-width:760px}
  .service-list{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}
  .intro-note{max-width:700px}

  .bottom-contact-cta__layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .bottom-cta-message p {
    max-width: 520px;
  }

  .enquiry-section::before{
    top:0;
    bottom:auto;
    left:-8%;
    width:116%;
    height:clamp(320px,52vw,460px);
    border-radius:0 0 160px 160px;
  }
  .enquiry-section::after{display:none}
}
@media(max-width:800px){
  .form-row,.quotes-grid,.process-grid{grid-template-columns:1fr}
  .process-grid{gap:16px}
  .process-card:not(:last-child)::after{display:none}
  .quotes-grid{gap:14px}
  .quote-card{min-height:320px}
  .client-logo{width:155px;height:86px}
}
@media(max-width:600px){
  :root{--gutter:18px}
  .service-list{grid-template-columns:1fr}
  .form-card{border-radius:15px;padding:22px 17px}
  .form-card__top{align-items:flex-start}
  .required-note{font-size:9px}
  
  .bottom-contact-grid {
    grid-template-columns: 1fr;
  }
  
  .marquee-window{margin-top:40px}
  .client-marquee-track{gap:12px;margin-bottom:12px}
  .client-logo{width:135px;height:76px;padding:15px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .client-marquee-track{animation:none}
}