/* ElevateX Global · Petrol & Brass
   Responsive system: fluid gutters + fluid type at every width,
   layout collapse at 900px (tablet) and 640px (phone).
   ------------------------------------------------------------------ */

/* 1. Base ---------------------------------------------------------- */
html{overflow-x:clip;-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;max-width:100%;background:#F5F1E8;color:#0C2F3A;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;}
body{min-width:0;overflow-x:hidden;}
*{box-sizing:border-box;}
a{color:#0E7C96;text-decoration:none;}
a:hover{color:#0C2F3A;}
img{display:block;}
img,video,canvas,iframe,svg{max-width:100%;}
button,input,select,textarea{font:inherit;max-width:100%;}
h1,h2,h3,p,li{overflow-wrap:break-word;text-wrap:pretty;}
.hovcard{transition:background .12s ease;}
.hovcard:hover{background:#FDFBF5;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#DFD5C0;outline:none;margin:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0C2F3A;cursor:pointer;border:3px solid #F5F1E8;box-shadow:0 0 0 1px #0C2F3A;}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0C2F3A;cursor:pointer;border:3px solid #F5F1E8;box-shadow:0 0 0 1px #0C2F3A;}
.opt{cursor:pointer;}

/* 2. Navigation ---------------------------------------------------- */
.nav{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:0 clamp(20px,4.6vw,56px);background:#F5F1E8;border-bottom:1px solid #DFD5C0;}
.nav-brand{display:flex;align-items:baseline;gap:14px;color:#0C2F3A;padding:14px 0;min-width:0;}
.nav-name{font-size:17px;font-weight:800;letter-spacing:-0.01em;white-space:nowrap;}
.nav-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:#A87E2F;white-space:nowrap;}
.nav-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.nav-burger{display:none;position:relative;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-12px;cursor:pointer;}
.nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:22px;height:2px;background:#0C2F3A;transition:transform .18s ease,background .18s ease;}
.nav-bars{position:relative;}
.nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0;top:0;}
.nav-bars::before{transform:translateY(-7px);}
.nav-bars::after{transform:translateY(7px);}
.nav-menu{display:flex;align-items:center;gap:clamp(15px,2.1vw,26px);font-size:14px;font-weight:500;}
.nav-menu a{display:inline-flex;align-items:center;color:#0C2F3A;}
.nav-menu a[aria-current=page]{font-weight:700;box-shadow:inset 0 -2px 0 #A87E2F;}
.nav-cta{height:40px;padding:0 18px;background:#0C2F3A;color:#F5F1E8 !important;font-weight:600;border-radius:2px;white-space:nowrap;}
.nav-cta[aria-current=page]{box-shadow:none !important;}

/* 3. Footer -------------------------------------------------------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:24px clamp(20px,4.6vw,56px);background:#F5F1E8;border-top:1px solid #DFD5C0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:#8C7B55;line-height:1.6;}
.foot a{color:#8C7B55;}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 18px;}

/* 4. Fluid gutters ------------------------------------------------- */
[style*="display:grid"] > *{min-width:0;}
[style*="px 56px"],[style*=":0 56px"]{padding-left:clamp(20px,4.6vw,56px) !important;padding-right:clamp(20px,4.6vw,56px) !important;}

/* 5. Fluid type — desktop values are preserved above ~1180px -------- */
[style*="font-size:88px"]{font-size:clamp(36px,7.6vw,88px) !important;}
[style*="font-size:76px"]{font-size:clamp(34px,6.6vw,76px) !important;}
[style*="font-size:72px"]{font-size:clamp(33px,6.2vw,72px) !important;}
[style*="font-size:68px"]{font-size:clamp(32px,5.9vw,68px) !important;}
[style*="font-size:64px"]{font-size:clamp(31px,5.5vw,64px) !important;}
[style*="font-size:60px"]{font-size:clamp(30px,5.2vw,60px) !important;}
[style*="font-size:56px"]{font-size:clamp(34px,4.8vw,56px) !important;}
[style*="font-size:48px"]{font-size:clamp(28px,4.2vw,48px) !important;}
[style*="font-size:46px"]{font-size:clamp(28px,4vw,46px) !important;}
[style*="font-size:44px"]{font-size:clamp(27px,3.8vw,44px) !important;}
[style*="font-size:42px"]{font-size:clamp(26px,3.7vw,42px) !important;}
[style*="font-size:40px"]{font-size:clamp(25px,3.5vw,40px) !important;}
[style*="font-size:38px"]{font-size:clamp(24px,3.3vw,38px) !important;}
[style*="font-size:36px"]{font-size:clamp(24px,3.1vw,36px) !important;}
[style*="font-size:34px"]{font-size:clamp(23px,2.95vw,34px) !important;}
[style*="font-size:32px"]{font-size:clamp(22px,2.8vw,32px) !important;}
[style*="font-size:30px"]{font-size:clamp(22px,2.6vw,30px) !important;}
[style*="font-size:28px"]{font-size:clamp(21px,2.45vw,28px) !important;}
[style*="font-size:26px"]{font-size:clamp(20px,2.3vw,26px) !important;}
[style*="font-size:24px"]{font-size:clamp(19px,2.1vw,24px) !important;}
[style*="font-size:22px"]{font-size:clamp(18px,1.95vw,22px) !important;}
[style*="font-size:21px"]{font-size:clamp(17px,1.9vw,21px) !important;}
[style*="font-size:19px"]{font-size:clamp(16.5px,1.7vw,19px) !important;}
[style*="font-size:18px"]{font-size:clamp(16px,1.6vw,18px) !important;}

/* 6. Tablet — 900px and below -------------------------------------- */
@media (max-width:1100px){
  .nav-tag{display:none;}
  .nav-menu a{min-height:44px;}
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:420px 1fr"]{grid-template-columns:minmax(0,1fr) !important;}
  [style*="grid-template-columns:1fr 420px"] > *,
  [style*="grid-template-columns:420px 1fr"] > *{border-right:0 !important;}
}
@media (max-width:900px){
  /* vertical rhythm compresses with the gutters */
  [style*="padding:80px 56px"],[style*="padding:76px 56px"],[style*="padding:72px 56px"],
  [style*="padding:70px 56px"],[style*="padding:68px 56px"],[style*="padding:66px 56px"],
  [style*="padding:64px 56px"],[style*="padding:60px 56px"],[style*="padding:56px 56px"],
  [style*="padding:52px 56px"],[style*="padding:48px 56px"],[style*="padding:44px 56px"]{
    padding-top:clamp(40px,6.4vw,64px) !important;padding-bottom:clamp(36px,5.8vw,56px) !important;
  }

  /* primary two-column splits become one column */
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:1.1fr .9fr"],
  [style*="grid-template-columns:1fr 250px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:420px 1fr"],
  [style*="grid-template-columns:400px 1fr"]{grid-template-columns:minmax(0,1fr) !important;gap:32px !important;}

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px !important;}

  /* pricing / spec rows: label above value */
  [style*="grid-template-columns:minmax("]{grid-template-columns:minmax(0,1fr) !important;gap:8px !important;}
  [style*="grid-template-columns:240px 1fr 200px"],
  [style*="grid-template-columns:52px 200px 1fr"]{grid-template-columns:minmax(0,1fr) !important;gap:6px !important;}

  [style*="display:grid"] > *{min-width:0;}
  [style*="text-align:right"]{text-align:left !important;}
  [style*="border-right:1px solid"]{border-right:0 !important;}
  [style*="display:flex"][style*="justify-content:space-between"]{flex-wrap:wrap !important;}
}

/* 6b. Touch targets — tablet and phone ----------------------------- */
@media (max-width:1024px){
  a[style*="color:#0E7C96"],
  a[style*="font-weight:600"]:not([style*="background"]){display:inline-flex;align-items:center;min-height:44px;}
  a[style*="text-align:center"]{justify-content:center;}
  .foot a{display:inline-flex;align-items:center;min-height:36px;}
  .opt,button[data-k]{min-height:44px;}
}
/* right-aligned row links keep their column edge until the grid collapses */
@media (min-width:901px) and (max-width:1024px){
  a[style*="text-align:right"]{justify-content:flex-end;}
}
@media (max-width:900px){
  a[style*="text-align:right"]{justify-content:flex-start;}
}

/* 7. Phone — 640px and below --------------------------------------- */
@media (max-width:700px){
  .nav{position:sticky;top:0;flex-wrap:wrap;}
  .nav-burger{display:flex;}
  .nav-check:checked ~ .nav-burger .nav-bars{background:transparent;}
  .nav-check:checked ~ .nav-burger .nav-bars::before{transform:rotate(45deg);}
  .nav-check:checked ~ .nav-burger .nav-bars::after{transform:rotate(-45deg);}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;background:#F5F1E8;font-size:16px;transition:max-height .24s ease;box-shadow:0 12px 24px -18px rgba(12,47,58,.5);}
  .nav-check:checked ~ .nav-menu{max-height:400px;border-bottom:1px solid #DFD5C0;}
  .nav-menu a{min-height:54px;padding:0 clamp(20px,4.6vw,56px);border-top:1px solid #DFD5C0;}
  .nav-menu a[aria-current=page]{box-shadow:inset 3px 0 0 #A87E2F;}
  .nav-cta{height:54px;margin:16px clamp(20px,4.6vw,56px) 20px;padding:0 !important;justify-content:center;border-top:0 !important;}
}
@media (max-width:640px){
  /* one column everywhere, except marker + text pairs */
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;gap:16px !important;}
  [style*="grid-template-columns:minmax("]{gap:8px !important;}
  [style*="grid-template-columns:16px 1fr"],[style*="grid-template-columns:20px 1fr"],
  [style*="grid-template-columns:24px 1fr"],[style*="grid-template-columns:26px 1fr"],
  [style*="grid-template-columns:28px 1fr"],[style*="grid-template-columns:32px 1fr"],
  [style*="grid-template-columns:36px 1fr"]{grid-template-columns:auto minmax(0,1fr) !important;gap:12px !important;}
  [style*="grid-template-columns:52px 200px 1fr"]{grid-template-columns:38px minmax(0,1fr) !important;gap:4px 10px !important;}
  [style*="grid-template-columns:52px 200px 1fr"] > :nth-child(3){grid-column:2;}

  /* stacked flex sections */
  [style*="display:flex"][style*="justify-content:space-between"]{flex-direction:column !important;align-items:flex-start !important;gap:20px !important;}
  [style*="align-items:baseline"]{flex-direction:row !important;flex-wrap:wrap !important;align-items:baseline !important;gap:12px !important;}

  /* legibility floors */
  [style*="font-size:10px"]{font-size:11px !important;}
  [style*="font-size:11px"]{font-size:11.5px !important;}
  [style*="font-size:13px"]{font-size:14px !important;}
  [style*="font-size:14px"]{font-size:15px !important;}
  [style*="font-size:15px"]{font-size:15.5px !important;}
  [style*="letter-spacing:.2em"]{letter-spacing:.14em !important;}

  /* full-width touch CTAs (page buttons, never nav) */
  a[style*="display:inline-flex"][style*="background:#0C2F3A"],
  a[style*="display:inline-flex"][style*="background:#F5F1E8"],
  a[style*="display:inline-flex"][style*="background:#A87E2F"],
  button[style*="height:5"],button[style*="height:4"]{
    display:flex !important;width:100%;min-height:52px;height:auto !important;
    padding-top:12px !important;padding-bottom:12px !important;
    justify-content:center;text-align:center;white-space:normal !important;
  }
  button[data-k],.opt{min-height:44px;}
  img[style*="height:"]{height:auto !important;width:100% !important;}
  [style*="white-space:nowrap"]{white-space:normal !important;}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  input[type=range]{height:4px;}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;}
  input[type=range]::-moz-range-thumb{width:26px;height:26px;}
}

@media print{a{color:#0C2F3A;}.nav,.nav-burger{position:static;}}