/* ================= ABOUT ================= */
#about{scroll-margin-top:100px;position:relative;overflow:hidden;background:#fff}
  #about::before{content:"";position:absolute;right:-10%;top:0;bottom:0;width:52%;background:#eef3fb;transform:skewX(-14deg)}
  #about>div{position:relative;z-index:1}

  /* seam: slanted brochure stripes that hand over to the Services section */
  .a-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}

  /* shipping-container stack */
  .a-stack{display:grid;gap:10px;max-width:590px;margin-inline:auto 0}
  .a-row{display:flex;gap:10px}
  .a-row:first-child{margin-left:34px}
  .a-c{--cc:var(--navy);position:relative;flex:1;min-height:168px;padding:1.5rem 1.3rem 1.1rem 1.6rem;color:#fff;background-color:var(--cc);
    background-image:
      linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
      linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
      repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 3px,transparent 3px 13px);
    background-position:left top,right top,left bottom,right bottom,0 0;
    background-size:15px 15px,15px 15px,15px 15px,15px 15px,auto;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
    box-shadow:0 16px 24px -14px rgba(8,35,79,.55);transition:transform .25s}
  .a-c:hover{transform:translateY(-5px)}
  .a-c.or{--cc:var(--or)}
  .a-c .id{position:absolute;top:.45rem;right:1.2rem;font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.7}
  .a-c .ic{width:1.7rem;height:1.7rem;margin-bottom:.6rem}
  .a-c h3{font-size:1.2rem;font-weight:700;line-height:1.2}
  .a-c p{margin-top:.35rem;font-size:14.5px;line-height:1.45;opacity:.92}
  .a-ground{margin-top:2px;height:6px;background:repeating-linear-gradient(90deg,var(--navy-d) 0 26px,transparent 26px 36px)}

  /* the containers are loaded one by one, once, when the section comes into view */
  .a-c{opacity:0;transform:translateY(-50px)}
  .a-in .a-c{animation:a-drop .75s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:calc(var(--i)*.22s)}
  @keyframes a-drop{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.a-c{opacity:1;transform:none;animation:none!important}}
  @media (max-width:640px){.a-row{flex-direction:column}.a-row:first-child{margin-left:0}.a-c{min-height:0}}

/* ================= SERVICES ================= */
#services{scroll-margin-top:100px;position:relative;overflow:hidden;background:#f4f7fb}
  /* mirrors the slanted panel in About, so the two sections read as one page */
  #services::before{content:"";position:absolute;left:-12%;top:0;bottom:0;width:36%;background:#eaf1fb;transform:skewX(-14deg)}
  #services>.mx-auto{z-index:1}
  .s-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}

  .s-tabs{display:grid;gap:8px}
  .s-tab{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.65rem 1.6rem .65rem .9rem;background:#fff;color:var(--navy-d);
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .2s,color .2s}
  .s-tab:hover{background:#eaf1fb}
  .s-tab .bx{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;background:#e6eefb;color:var(--navy);
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:.2s}
  .s-tab b{display:block;font-size:1.05rem;line-height:1.2}
  .s-tab small{color:var(--mute);font-size:13.5px}
  .s-tab[aria-selected="true"]{background:var(--navy);color:#fff}
  .s-tab[aria-selected="true"] .bx{background:var(--or);color:#fff}
  .s-tab[aria-selected="true"] small{color:#c9d8f2}

  .s-panel{position:relative;overflow:hidden;min-height:440px;padding:2.6rem 5rem 2.6rem 2.8rem;color:#fff;
    background:linear-gradient(150deg,var(--navy) 0,var(--navy-d) 100%);
    clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%)}
  .s-body{position:relative;animation:s-wipe .65s cubic-bezier(.65,0,.25,1) both}
  @keyframes s-wipe{from{clip-path:polygon(0 0,0 0,-10% 100%,0 100%)}to{clip-path:polygon(-2% -10%,112% -10%,104% 110%,-2% 110%)}}
  .s-mark{position:absolute;right:-1rem;bottom:-5.5rem;width:16rem;height:16rem;opacity:.08;stroke-width:1}
  .s-ico{display:grid;place-items:center;width:4.2rem;height:4.2rem;background:var(--or);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
  .s-ico .ic{width:2rem;height:2rem}
  .s-li{position:relative;padding-left:1.5rem;font-weight:600}
  .s-li::before{content:"";position:absolute;left:0;top:.4em;width:.65rem;height:.75rem;background:var(--or);clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%)}

  @media (max-width:1023px){
    .s-tabs{display:flex;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
    .s-tab{flex:none;width:auto;min-width:0}
    .s-tab small{display:none}
    .s-panel{clip-path:none;padding:1.8rem 1.4rem;min-height:0}
  }
  @media (prefers-reduced-motion:reduce){.s-body{animation:none}}

/* ================= INDUSTRIES ================= */
#industries{scroll-margin-top:100px;position:relative;overflow:hidden;background:var(--navy-d);color:#fff}
  #industries::before{content:"";position:absolute;right:-12%;top:0;bottom:0;width:38%;background:rgba(255,255,255,.04);transform:skewX(-14deg)}
  #industries>.mx-auto{position:relative;z-index:1}
  .n-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}

  .n-tile{position:relative;overflow:hidden;padding:1.5rem 1.5rem 1.6rem;background:rgba(255,255,255,.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);transition:background .25s}
  .n-tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--or);transition:width .35s}
  .n-tile:hover{background:rgba(255,255,255,.12)}
  .n-tile:hover::after{width:100%}
  .n-tile.hero{background:linear-gradient(135deg,#1b5cb0 0,var(--navy) 100%)}
  .n-ico{display:grid;place-items:center;width:2.7rem;height:2.7rem;background:var(--or);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
  .n-tile h3{margin-top:1.1rem;font-size:1.15rem;font-weight:700}
  .n-tile p{margin-top:.35rem;font-size:.95rem;line-height:1.55;color:#c9d8f2}
  .n-mark{position:absolute;right:-.6rem;bottom:-1.2rem;width:6.5rem;height:6.5rem;opacity:.07;stroke-width:1}
  .n-tag{position:absolute;top:1.5rem;right:2.6rem;padding:.2rem .7rem .2rem .9rem;font-size:.8rem;font-weight:700;background:#fff;color:var(--navy);
    clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}

/* ================= WHY FRETONIX ================= */
#why{scroll-margin-top:100px;position:relative;overflow:hidden;background:#fff}
  #why::before{content:"";position:absolute;left:-12%;top:0;bottom:0;width:34%;background:#eef3fb;transform:skewX(-14deg)}
  #why>.mx-auto{position:relative;z-index:1}
  .y-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}

  .y-card{position:relative;overflow:hidden;min-height:205px;padding:1.5rem;background:#fff;color:var(--navy-d);
    box-shadow:inset 0 0 0 1px rgba(15,58,125,.14);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);transition:transform .25s}
  .y-card:hover{transform:translateY(-4px)}
  .y-card.dk{background:linear-gradient(150deg,var(--navy) 0,var(--navy-d) 100%);color:#fff;box-shadow:none}
  .y-card.tn{background:#fff1e3;box-shadow:inset 0 0 0 1px rgba(240,125,24,.3)}
  .y-ico{display:grid;place-items:center;width:2.7rem;height:2.7rem;background:#e6eefb;color:var(--navy);
    clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:transform .25s}
  .y-card:hover .y-ico{transform:rotate(-6deg)}
  .y-card.dk .y-ico,.y-card.tn .y-ico{background:var(--or);color:#fff}
  .y-card h3{margin-top:1.1rem;font-size:1.15rem;font-weight:700}
  .y-card p{margin-top:.35rem;font-size:.95rem;line-height:1.55;color:var(--mute)}
  .y-card.dk p{color:#c9d8f2}
  .y-mark{position:absolute;right:-.6rem;bottom:-1.2rem;width:7rem;height:7rem;opacity:.06;stroke-width:1}
  @media (prefers-reduced-motion:reduce){.y-card,.y-ico{transition:none}}

/* ================= CONTACT ================= */
#contact{scroll-margin-top:100px;position:relative;overflow:hidden;background:#f4f7fb}
  #contact::before{content:"";position:absolute;right:-12%;top:0;bottom:0;width:36%;background:#eaf1fb;transform:skewX(-14deg)}
  #contact>.mx-auto{position:relative;z-index:1}
  .k-seam{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:52px;overflow:visible;pointer-events:none}

  .k-info{color:#fff;padding:1.8rem 2rem;background:linear-gradient(150deg,var(--navy) 0,var(--navy-d) 100%)}
  .k-row{display:flex;gap:.9rem;align-items:flex-start}
  .k-row+.k-row{margin-top:1.15rem}
  .k-row .bx{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;background:var(--or);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  .k-row b{display:block;font-size:1rem}
  .k-row span,.k-row a{font-size:.95rem;line-height:1.5;color:#d6e2f6}
  .k-row a:hover{color:#fff}
  .k-map{display:block;width:100%;height:210px;border:0;background:#dbe5f3}

  .k-form{padding:1.8rem;background:#fff;border-top:4px solid var(--or);box-shadow:0 24px 44px -30px rgba(8,35,79,.55)}
  .k-form label{display:block;margin-bottom:.35rem;font-size:.9rem;font-weight:600;color:var(--navy-d)}
  .k-in{width:100%;padding:.7rem .9rem;font:inherit;font-size:1rem;color:var(--ink);background:#f4f7fb;border:1px solid #cfdbee;border-radius:0;transition:border-color .2s,background .2s}
  .k-in:focus{outline:none;border-color:var(--or);background:#fff}
  textarea.k-in{min-height:120px;resize:vertical}
  .k-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  #k-status{min-height:1.5rem;font-weight:600}
  #k-status.ok{color:#15803d}
  #k-status.err{color:#b91c1c}
  .h-cta:disabled{opacity:.6;cursor:wait}
  @media (min-width:1024px){.k-info{padding-right:3rem;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)}}