/* CSS Document */

body{
    font-size: 18px;
    font-family: sans-serif;
}
.logo{
    width: 130px;
    margin: auto;
}
.h1, .h2, .h3, .h4, .h5{
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
    font-family: "DM Serif Text", serif;
}
hr{    border: solid 1px #000;}
.bg-\[\#f0991d\]{
    background-color: #f0991d;
    
}
.brand_sec{
    
}
.content{
    width: 100%;
    position: absolute;
}
.brand_logo{
   
    display: inline;
    padding: 5px;
    filter: grayscale(100%);
  
}
.bx-wrapper{
    margin-bottom: 0px;
}
.brand_logo:hover {
    filter: grayscale(0);
}
.load_more{
    text-align: right;
}
.lg-right{
    text-align: right;
}

.reverse-bg{
    padding: 5px;
    background-color: #000000;
    color: #ffffff;
}

.works .h2{padding-left: 30px;}
.group{overflow: hidden;}
.group img{border-radius: 25px;width: 100%;}

.pb-\[230px\] {
    padding-bottom: 230px;
}

.translate-y-\[225px\] {
    --tw-translate-y: 225px;

transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.teamcard{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
min-height: 430px;
    }

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
    background: transparent url(../assets/img/up-arrow.png) center center no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
}

@media (max-width: 768px) {
    .HeroImageTrailBrands{position: inherit;}
    
    footer{text-align: center;}
    .lg-right{text-align: inherit;}
    .ira_logo{width: 40%;}
}
@media (min-width: 1024px) {
    
    .lg\:translate-y-\[100px\]{
       --tw-translate-y:100px;
    }
    .lg\:translate-y-\[200px\]{
       --tw-translate-y:200px;
    }
    
    
    .lg\:translate-y-\[300px\]{
    --tw-translate-y:300px;
     
    }
    
.lg\:translate-y-\[400px\]{
    --tw-translate-y:400px;     
    }
    
       .lg\:pb-\[405px\] {
       padding-bottom: 405px;
    }
    
}

/* Skip-to-content: hidden until keyboard-focused */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:#1d1d1d;
  color:#f5f2ee;
  padding:12px 18px;
  border-radius:0 0 6px 0;
  text-decoration:none;
  font-size:14px;
}
.skip-link:focus{
  left:0;
}
#main:focus{ outline:none }

/* ---------- Footer social / profile links ---------- */
.ira-social{
  list-style:none;
  margin:0;
  padding:0;
}
.ira-social li{ margin:0 0 6px; }
.ira-social a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#1d1d1d;
  text-decoration:none;
  line-height:1.2;
}
.ira-social a:hover,
.ira-social a:focus-visible{ opacity:.65 }
/* width AND height pinned, plus max-* so a stale stylesheet can never blow it up */
.ira-social svg{
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
  flex:0 0 16px;
  display:block;
}

/* ==================================================================
   Contact form  (added 2026-10-14)
   Inherits Commuters Sans, the --dark / --offwhite / --navy palette
   and the existing border + radius language. No new design tokens.
   ================================================================== */

.ira-form{ margin:0 }

.ira-field{ margin:0 0 20px }

.ira-field label{
  display:block;
  font-size:12px; font-weight:700;
  letter-spacing:-.07em; line-height:1.2;
  text-transform:uppercase;
  margin:0 0 7px;
}

.ira-field input,
.ira-field select,
.ira-field textarea{
  width:100%;
  font-family:inherit; font-size:15px; line-height:1.4;
  letter-spacing:-.01em;
  color:var(--dark);
  background:transparent;
  border:1px solid var(--dark);
  border-radius:5px;
  padding:14px 15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* Native arrow is inconsistent across browsers - draw our own. */
.ira-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%231d1d1d' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:40px;
}

.ira-field textarea{ resize:vertical; min-height:150px }

.ira-field input:focus,
.ira-field select:focus,
.ira-field textarea:focus{
  outline:none;
  border-color:var(--dark);
  box-shadow:0 0 0 2px var(--dark);
}

.ira-hint{
  font-size:12px; line-height:1.4;
  color:var(--navy);
  margin:7px 0 0;
}
.ira-hint--legal{ margin-top:18px }
.ira-hint a{ text-decoration:underline; text-underline-offset:2px }

.ira-submit{
  font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:-.05em; text-transform:uppercase;
  color:var(--offwhite);
  background:var(--dark);
  border:1px solid var(--dark);
  border-radius:60px;
  padding:19px 44px;
  margin-top:10px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.ira-submit:hover,
.ira-submit:focus-visible{ background:#000 }

/* Honeypot: kept in the layout flow but pushed off-screen, so a bot
   that reads the DOM still finds it while no human ever sees it.
   display:none would let smarter bots skip it. */
.ira-hp{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

.ira-note{
  border-radius:9px;
  padding:18px 20px;
  margin:0 0 30px;
  font-size:15px; line-height:1.5;
}
.ira-note p{ margin:0 0 4px }
.ira-note p:last-child{ margin:0 }
.ira-note--ok{  background:var(--dark); color:var(--offwhite) }
.ira-note--bad{ background:transparent; border:1px solid var(--dark); color:var(--dark) }

.ira-direct{ border-top:1px solid var(--dark) }

/* ---------- WhatsApp button ----------
   Sits above the floating nav pill (z-955) on mobile, clear of it on
   desktop where the pill is centre-bottom. */
.ira-wa{
  position:fixed; z-index:954;
  right:15px; bottom:80px;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background:var(--dark);
  color:var(--offwhite);
  text-decoration:none;
  transition:background .25s ease, transform .25s ease;
}
.ira-wa svg{ width:26px; height:26px; display:block }
.ira-wa:hover,
.ira-wa:focus-visible{ background:#000; transform:scale(1.05) }

@media (min-width:1024px){
  .ira-wa{ right:25px; bottom:25px; width:58px; height:58px }
  .ira-wa svg{ width:29px; height:29px }
}

/* ---------- Compact footer enquiry form (added 2026-10-14) ----------
   Lives in the row the footer grid already left empty, so the footer
   keeps its existing height and proportions. */
.ira-ff{ margin:0 }
.ira-ff__label{ margin:0 0 10px }

.ira-ff__grid{
  display:grid; grid-template-columns:1fr; gap:8px;
  margin:0 0 8px;
}
@media (min-width:1024px){
  .ira-ff__grid{ grid-template-columns:1fr 1fr }
}

.ira-ff input[type=text],
.ira-ff input[type=email],
.ira-ff textarea{
  width:100%;
  font-family:inherit; font-size:14px; line-height:1.4;
  letter-spacing:-.01em;
  color:var(--dark);
  background:transparent;
  border:1px solid var(--dark);
  border-radius:5px;
  padding:11px 13px;
}
.ira-ff textarea{ resize:vertical; min-height:62px; display:block }

.ira-ff input::placeholder,
.ira-ff textarea::placeholder{ color:var(--navy); opacity:1 }

.ira-ff input:focus,
.ira-ff textarea:focus{
  outline:none;
  box-shadow:0 0 0 2px var(--dark);
}

.ira-ff__foot{
  display:flex; align-items:center; gap:14px;
  margin-top:10px; flex-wrap:wrap;
}

.ira-ff__btn{
  font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:-.05em; text-transform:uppercase;
  color:var(--offwhite);
  background:var(--dark);
  border:1px solid var(--dark);
  border-radius:60px;
  padding:13px 30px;
  cursor:pointer;
  transition:background .25s ease, opacity .25s ease;
}
.ira-ff__btn:hover,
.ira-ff__btn:focus-visible{ background:#000 }
.ira-ff__btn:disabled{ opacity:.55; cursor:default }

.ira-ff__msg{ font-size:12px; line-height:1.4; flex:1 1 160px }
.ira-ff__msg.is-ok{  color:var(--dark) }
.ira-ff__msg.is-bad{ color:var(--dark); text-decoration:underline; text-underline-offset:2px }

/* The footer's inner grid is grid-cols-6, but this Tailwind build was
   purged and never compiled lg:col-span-6 - so span the full row here
   explicitly rather than relying on a class that does not exist. */
.ira-ff-wrap{ margin-top:22px }
@media (min-width:1024px){
  .ira-ff-wrap{
    grid-column:1 / -1;
    grid-row:2;
    align-self:end;
    margin-top:0;
  }
}
/* breathing room between the email/phone line and the form */
.ira-ff__label{ margin-top:4px }
@media (min-width:1024px){
  .ira-ff__label{ margin-top:0 }
  .ira-ff-wrap{ padding-top:14px }
}

/* ---------- Footer column: push the social list to the bottom ----------
   The list sits after the form in source order; on desktop the column is
   taller than its content, so margin-top:auto drops it to the baseline
   and lines it up with the bottom of the logo block beside it. */
@media (min-width:1024px){
  /* flex + margin-top:auto alone does nothing here: this column is the
     TALLER of the two cells in the footer row, so it sets the row height
     and has no spare space to push into. The explicit min gap separates
     the list from the Send button; margin-top:auto still takes over if a
     future change ever makes the neighbouring logo cell the taller one. */
  .ira-footer-col{ display:flex; flex-direction:column }
  .ira-footer-col > .row.left-0{ margin-top:auto; padding-top:30px }
}
.ira-footer-col > .row.left-0{ padding-top:22px }

/* ---------- Stack the two floating buttons ----------
   #myBtn (go to top) is fixed at bottom:20px right:30px, 50x50, and only
   appears once you scroll. The WhatsApp button was landing on top of it
   and hiding it completely. Sit WhatsApp directly above, centres aligned
   on the arrow: arrow centre is 30+25 = 55px in from the right edge.
   52px wide -> right:29px.  58px wide -> right:26px. */
.ira-wa{ right:29px; bottom:82px }
@media (min-width:1024px){
  .ira-wa{ right:26px; bottom:82px }
}

/* ---------- Footer social list: one row on desktop ----------
   Scoped to .ira-footer-col so the email/phone list on contact.php,
   which uses the same .ira-social markup, stays stacked. */
@media (min-width:1024px){
  .ira-footer-col .ira-social{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 26px;
  }
  .ira-footer-col .ira-social li{ margin:0 }
}

/* ==================================================================
   Privacy policy page  (rewritten 2026-10-14)
   Tailwind preflight strips list markers and heading margins, so the
   long-form text needs its own typography rules.
   ================================================================== */
.pp-meta{
  font-size:12px; font-weight:700; letter-spacing:-.05em;
  text-transform:uppercase; color:var(--navy);
  margin:14px 0 34px;
}

.pp h2{ margin:46px 0 14px }
.pp h3{ margin:30px 0 10px }
.pp p{ margin-bottom:18px }
.pp p.mb-5{ margin-bottom:26px }

.pp-list{
  list-style:disc;
  margin:0 0 26px;
  padding-left:22px;
}
.pp-list li{
  /* close to the 20px body copy (Bootstrap .fs-5) so the lists do not
     read as footnotes next to the paragraphs */
  font-size:18px; line-height:1.55;
  margin:0 0 8px;
  padding-left:3px;
}
.pp a{ text-decoration:underline; text-underline-offset:2px }
.pp a:hover{ opacity:.7 }

/* Cookie table - scrolls sideways on a phone instead of breaking out */
.pp-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.pp-table{
  width:100%; min-width:520px;
  border-collapse:collapse;
  font-size:14px; line-height:1.5;
}
.pp-table th,
.pp-table td{
  border:1px solid var(--dark);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.pp-table th{
  font-size:12px; font-weight:700;
  letter-spacing:-.05em; text-transform:uppercase;
}

.pp-close{
  border-top:1px solid var(--dark);
  padding-top:22px;
  margin-top:42px;
}