/* ==========================================================================
   Pine Creek International Sourcing — replica stylesheet
   Design tokens taken 1:1 from the original build; motion + polish added.
   ========================================================================== */

@font-face{font-family:"Lexend";font-display:swap;font-weight:400;
  src:url(../fonts/Lexend-Regular.woff2) format("woff2"),url(../fonts/Lexend-Regular.woff) format("woff")}
@font-face{font-family:"Lexend Medium";font-display:swap;
  src:url(../fonts/Lexend-Medium.woff2) format("woff2"),url(../fonts/Lexend-Medium.woff) format("woff")}
@font-face{font-family:"Lexend Light";font-display:swap;
  src:url(../fonts/Lexend-Light.woff2) format("woff2"),url(../fonts/Lexend-Light.woff) format("woff")}
@font-face{font-family:"Lexend Thin";font-display:swap;
  src:url(../fonts/Lexend-Thin.woff2) format("woff2"),url(../fonts/Lexend-Thin.woff) format("woff")}

:root{
  /* The brand identity is deliberately light-only; pin the UA colour scheme so
     native controls (date picker, select, scrollbars) stay light on a dark OS. */
  color-scheme:light;

  --green:#00640d;          /* primary brand green            */
  --green-deep:#007210;     /* footer / links                 */
  --green-dark:#00550c;     /* button hover                   */
  --green-ink:#003308;
  --navy:#133b87;           /* group bar                      */
  --ink:#131414;            /* headings                       */
  --body:#363737;           /* body copy                      */
  --muted:#535353;
  --muted-2:#666;
  --line:#dcdcdc;
  --page:#fdfdfd;
  --white:#fff;
  --field:#f1f1f1;
  --shadow-sm:0 4px 10px rgba(0,0,0,.1);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 18px 40px -18px rgba(0,50,8,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:130px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:"Lexend Light","Lexend",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid rgba(255,255,255,.35);margin:0}
ul{margin:0;padding:0}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:400}
h1{font-family:"Lexend Medium";font-size:60px;color:#000}
h2{font-family:"Lexend Medium";font-size:48px;color:#000}
h3{font-family:"Lexend";font-size:24px;color:var(--ink)}
h4{font-family:"Lexend Light";font-size:18px}
p{margin:0;font-family:"Lexend Light";font-size:16px}
label{font-size:14px;font-family:"Lexend Light"}

@media (max-width:1024px){
  h1{font-size:48px}
  h2{font-size:36px}
  p{font-size:16px}
}
@media (max-width:767px){
  h1{font-size:36px}
  h2{font-size:28px}
  h3{font-size:20px}
  p{font-size:16px}
}

.Lexend{font-family:"Lexend"}
.Lexend-Light{font-family:"Lexend Light"}
.Lexend-Medium,.Lexend-SemiBold{font-family:"Lexend Medium"}
.Lexend-Thin{font-family:"Lexend Thin"}
.t-white{color:#fff}.t-green,.t-blue{color:var(--green)}
.t-s-green{color:var(--green-deep)}
.t-black{color:var(--body)}.t-h-black{color:var(--ink)}.t-gray{color:var(--muted-2)}
.text-18{font-size:18px}.p-sm{font-size:14px}.p-lg{font-size:20px}
.leading-8{line-height:2}.leading-tight{line-height:1.25}.leading-none{line-height:1}
.text-center{text-align:center}.text-left{text-align:left}
.font-light{font-weight:300}.font-bold{font-weight:700}.font-semibold{font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;margin-left:auto;margin-right:auto;max-width:94%}
@media (min-width:900px){.container{max-width:90%}}
@media (min-width:1535px){.container{max-width:1400px}}

.page-bg-color{background:var(--page)}

/* ---------- focus ring (accessibility improvement) --------------------- */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50}
.main-header{background:var(--navy);height:50px;width:100%;display:flex;align-items:center}
.main-header .container{display:flex;align-items:center}
.main-header .logo{width:100px}
.main-header .brands-trigger{display:flex;align-items:center;gap:.6rem;color:#fff;
  padding:.25rem .5rem;border-radius:6px;transition:opacity .25s var(--ease)}
.main-header .brands-trigger:hover{opacity:.82}
.main-header .dropdownicon{width:25px;height:25px;transition:transform .35s var(--ease)}
.brands-open .main-header .dropdownicon{transform:rotate(180deg)}
.header-top-nav{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.header-top-nav a{color:#fff;padding:.25rem 1rem;position:relative}
.header-top-nav a::after,.main-header .brands-trigger::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:2px;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.header-top-nav a:hover::after{transform:scaleX(1)}

.header{background:#fff;height:80px;border-bottom:1px solid var(--line);width:100%;
  display:flex;align-items:center;transition:box-shadow .3s var(--ease),height .3s var(--ease)}
.header .container{display:flex;align-items:center}
.header .logo{width:70px;transition:transform .3s var(--ease)}
.header .logo:hover{transform:translateY(-2px)}
.header-nav{margin-left:auto;display:flex;align-items:center}
.nav-p{padding:0 2rem;font-family:"Lexend";position:relative;color:#000;
  transition:color .25s var(--ease)}
.nav-p::after{content:"";position:absolute;left:2rem;right:2rem;bottom:-6px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:center;
  transition:transform .32s var(--ease)}
.nav-p:hover{color:#0d6b1b}
.nav-p:hover::after{transform:scaleX(1)}
.nav-p.active{color:var(--green-ink);font-family:"Lexend Medium"}
.nav-p.active::after{transform:scaleX(1)}
/* subtle condense on scroll — improvement */
.is-scrolled .header{height:70px;box-shadow:0 6px 24px -14px rgba(0,0,0,.4)}
.desktop-header{display:block}

/* brands mega-dropdown */
.dropdownbg{position:absolute;top:50px;left:0;width:100%;z-index:20;
  background-image:url(../media/dropdownbg.webp);background-repeat:no-repeat;
  background-position:center;background-size:cover;background-color:#fff;
  padding-top:2.5rem;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-14px);pointer-events:none;
  /* visibility, not just opacity — otherwise the closed menu's links stay in
     the tab order and the accessibility tree */
  visibility:hidden;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s linear .3s}
.brands-open .dropdownbg{opacity:1;transform:none;pointer-events:auto;
  visibility:visible;transition-delay:0s,0s,0s}
.dropdownbg .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.dropdownbg .brand-col{padding:0 1rem}
@media (min-width:1280px){.dropdownbg .brand-col{padding:0 2rem}}
.dropdownbg .brand-col img.brand-logo{width:100px;height:auto;padding-bottom:1rem}
.dropdownbg .brand-col > p{line-height:2;height:6rem;margin-bottom:.75rem}
.dropdownbg .brand-col .sublink{color:#6b7280;font-family:"Lexend";font-weight:600;
  display:block;width:fit-content;transition:color .25s var(--ease),transform .25s var(--ease)}
.dropdownbg .brand-col .sublink+.sublink{padding:.75rem 0}
.dropdownbg .brand-col .sublink:hover{transform:translateX(3px)}
.dropdownbg .pdi:hover{color:#202179}
.dropdownbg .saneck:hover{color:#00a2a4}
.dropdownbg .safety:hover{color:#009976}
.dropdownbg .pine:hover{color:var(--green-deep)}
.dropdownbg .brand-cta{margin:.75rem 0 3rem}

/* ==========================================================================
   Mobile header
   ========================================================================== */
.mobile-manu{display:none}
.mobile-manu .mobile-shell{position:fixed;inset:0 0 auto 0;z-index:50;border-bottom:1px solid #4b5563}
.mobile-main-header{background:var(--navy);height:50px;display:flex;align-items:center}
.mobile-main-header img{width:100%;max-width:150px;padding:.5rem 1rem}
.mobile-bg{background:#fff;display:flex;padding:.75rem;position:relative;z-index:10}
.mobile-manu .logo{width:60px}
.drop-downmenu{background-image:url(../media/Dropdown.webp);background-repeat:no-repeat;
  background-position:center;background-size:cover;background-color:#fff;
  position:fixed;width:100%;padding:3rem 1.25rem 6rem;height:calc(100vh - 100px);
  overflow-y:auto;max-height:0;opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s}
.drop-downmenu.open{max-height:calc(100vh - 100px);opacity:1;visibility:visible;transform:none}
.drop-downmenu p{padding:1rem 0;font-family:"Lexend";font-size:18px}
.drop-downmenu p.active{color:var(--green-ink);font-family:"Lexend Medium"}
.drop-downmenu a{display:block;opacity:0;transform:translateY(10px)}
.drop-downmenu.open a{animation:menuIn .45s var(--ease) forwards}
.drop-downmenu.open a:nth-child(2){animation-delay:.06s}
.drop-downmenu.open a:nth-child(3){animation-delay:.12s}
.drop-downmenu.open .mt-6{animation:menuIn .45s var(--ease) .18s forwards;opacity:0}
@keyframes menuIn{to{opacity:1;transform:none}}

@media (max-width:899px){
  .desktop-header{display:none}
  .mobile-manu{display:block}
  :root{--header-h:100px}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.mainbtn{background:var(--green);width:fit-content;border-radius:.5rem;overflow:hidden;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.mainbtn:hover{background:var(--green-dark);transform:translateY(-2px);
  box-shadow:0 12px 24px -12px rgba(0,85,12,.75)}
.mainbtn:active{transform:translateY(0)}
.mainbtn button{font-size:18px;padding:.75rem 0 .75rem 1.75rem;color:#fff;display:flex;
  align-items:center;cursor:pointer;width:100%;white-space:nowrap;font-family:"Lexend Light"}
.mainbtn img{width:30px;margin-left:.5rem;transition:transform .3s var(--ease)}
.mainbtn:hover img{transform:translateX(6px)}

.mainbtncontact{background:var(--green);width:100%;border-radius:.5rem;
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.mainbtncontact:hover{background:var(--green-dark);box-shadow:0 12px 24px -14px rgba(0,85,12,.8)}
.mainbtncontact button{padding:.75rem 2.5rem .75rem 1.5rem;display:flex;justify-content:center;
  align-items:center;color:#fff;width:100%;position:relative}
.mainbtncontact img{width:30px;position:absolute;margin-left:5rem;transition:transform .3s var(--ease)}
.mainbtncontact:hover img{transform:translateX(8px)}
.mainbtncontact[disabled],.mainbtncontact.is-busy{opacity:.75;pointer-events:none}

.secondbutton{display:flex;width:fit-content}
.secondbutton .inner{display:flex;cursor:pointer;align-items:center}
.secondbutton .sb-label{font-family:"Lexend Light";font-size:18px;font-weight:600;line-height:1.5;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.secondbutton:hover .sb-label{border-bottom-color:currentColor}
.secondbutton img{width:20px;margin-left:.5rem;transition:transform .3s var(--ease)}
.secondbutton:hover img{transform:translateX(6px)}

.btn-gray{width:100%;display:flex;justify-content:center;align-items:center;color:#fff;
  background:#94a3b8;border-radius:.375rem;padding:.5rem;transition:background .25s var(--ease),transform .25s var(--ease)}
.btn-gray img{width:30px;margin-left:.5rem;transition:transform .3s var(--ease)}
.btn-gray:hover{background:#7d8ba3;transform:translateY(-1px)}
.btn-gray:hover img{transform:translateX(5px)}
.btn-gray.primary{background:var(--green)}
.btn-gray.primary:hover{background:var(--green-dark)}
.btn-ghost{border:1px solid var(--line);border-radius:.375rem;padding:.5rem 1.25rem;
  color:var(--body);transition:border-color .25s var(--ease),color .25s var(--ease)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.home-hero{background-image:url(../media/mainheronew.webp);background-repeat:no-repeat;
  background-position:center;background-size:contain;height:100vh;display:flex;
  padding:8rem 0 2.5rem;position:relative}
@media (min-width:768px){.home-hero{padding-top:0}.home-hero .hero-copy{margin-top:12rem}}
@media (min-width:1024px){.home-hero{align-items:center}.home-hero .hero-copy{margin-top:0}}
.home-hero .grid2{display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.home-hero .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home-hero h1 span{display:inline}
.scroll-down{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center}
.scroll-down img{animation:bob 2.2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:1}}

@media (max-width:899px){
  .home-hero{background-image:url(../media/mainherom.webp);height:100vh;
    align-items:flex-start}
}

/* products */
/* No insets and no positioned ancestor: the heading shrink-to-fits against the
   viewport, exactly as the original does, so it stays on one line. */
.products-head .stack .absolute-h2{position:absolute;z-index:10}
.products-head .pst{width:250px;position:relative;left:4rem;top:.5rem;z-index:5}
@media (min-width:1024px){.products-head .pst{left:7rem}}
.productimg{padding-bottom:1rem;width:100%;margin-top:3.5rem}
@media (min-width:1024px){.productimg{width:91.666667%}}

/* process */
.process{background-image:url(../media/hpstyle.webp);background-repeat:no-repeat;background-size:cover}
.process .container{margin-top:2.5rem}
@media (min-width:1024px){.process .container{margin-top:5rem}}
.process-grid{display:grid;grid-template-columns:1fr;margin-top:5rem}
@media (min-width:768px){.process-grid{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:5rem;row-gap:5rem}}
@media (min-width:1536px){.process-grid{column-gap:15rem}}
.process-card{height:54rem;display:flex}
.process-card:nth-child(even){align-items:flex-end}
.process-card .card-inner{transition:transform .45s var(--ease)}
.process-card:hover .card-inner{transform:translateY(-6px)}
.process-card img.process-photo{width:100%;border-radius:.5rem}
.mt-5-md-10{margin-top:1.25rem}
@media (min-width:768px){.mt-5-md-10{margin-top:2.5rem}}
.h-process{width:150px;position:absolute;margin-left:-2.25rem;margin-top:-.25rem}
.process-body{position:relative;top:2rem}
@media (max-width:767px){
  .process-card{height:auto;margin-bottom:70px}
  .h-process{width:90px;margin-left:-.75rem;margin-top:.5rem}
}
@media (min-width:900px) and (max-width:1024px){.process-card{height:45rem}}
@media (max-width:899px) and (min-width:768px){.process-card{height:43rem}}

/* about + stat cards */
.location{margin-top:.5rem}
@media (min-width:768px){.location{margin-top:5rem}}
@media (min-width:1024px){.location{margin-top:8rem}}
.stats-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:1.25rem;position:relative;z-index:10}
@media (min-width:1024px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.section-first,.section-two{background-repeat:no-repeat;background-size:cover;height:27rem;
  border-radius:.375rem;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.section-first:hover,.section-two:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.section-two{background-image:url(../media/ab1.webp);display:flex;align-items:flex-end;margin-bottom:1rem}
.section-first{background-image:url(../media/ab2.webp)}
@media (min-width:1024px){.section-first{grid-column:span 2}}
.circle2{position:absolute;top:-9rem;right:0;z-index:5;width:400px;display:none}
@media (min-width:1536px){.circle2{display:block}}
@media (max-width:767px){.section-two{height:11rem}.section-first{height:12rem}}
@media (max-width:899px) and (min-width:768px){
  .section-two{background-image:url(../media/ab1m.webp);height:18rem}
  .section-first{height:22rem}}
@media (max-width:899px){.section-two{background-image:url(../media/ab1m.webp)}}
@media (min-width:900px) and (max-width:1201px){.section-first,.section-two{height:18rem}}

/* FAQ */
.faq-wrap{margin-top:2.5rem;margin-bottom:5rem}
@media (min-width:1280px){.faq-wrap{margin-top:5rem}}
.faq-intro{width:100%}
@media (min-width:1024px){.faq-intro{width:83.333333%}}
.faq-list{margin-top:2rem}
.faq-item{border:1px solid var(--line);margin-bottom:1.25rem;border-radius:.5rem;background:#fff;
  padding:1.25rem 1rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
@media (min-width:1024px){.faq-item{padding:2.5rem 2rem}}
.faq-item:hover{border-color:#b9c6b9;box-shadow:var(--shadow-sm)}
.faq-item.open{border-color:rgba(0,100,13,.4);box-shadow:var(--shadow-sm)}
.faq-q{width:100%;display:flex;align-items:flex-start;text-align:left}
.faq-q h4{font-family:"Lexend Medium";width:91.666667%;color:var(--ink);
  transition:color .25s var(--ease)}
.faq-item.open .faq-q h4{color:var(--green)}
.faq-q .toggle-wrap{width:8.333333%;display:flex;justify-content:flex-end}
.faq-q .toggle{width:24px;height:24px;flex:none;transition:transform .4s var(--ease)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .42s}
.faq-item.open .faq-a > div{visibility:visible;transition-delay:0s}
.faq-a-inner{padding-top:.5rem;width:100%}
@media (min-width:1024px){.faq-a-inner{width:83.333333%}}
.faq-a p{line-height:1.75;color:var(--muted-2);
  opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease) .08s,transform .35s var(--ease) .08s}
.faq-item.open .faq-a p{opacity:1;transform:none}

/* CTA strip */
.lastsection{height:60vh;background-image:url(../media/ls.webp);background-repeat:no-repeat;
  background-size:cover;background-position:center;display:flex;align-items:center}
.lastsection .container{display:flex;justify-content:flex-start}
@media (min-width:1024px){.lastsection .container{justify-content:flex-end}}
.lastsection .cta-copy{width:75%}
@media (min-width:1024px){.lastsection .cta-copy{width:66.666667%}}
@media (min-width:1280px){.lastsection .cta-copy{width:50%}}
@media (max-width:899px){.lastsection{height:55vh;background-image:url(../media/ctabgm.webp)}}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--green-deep);color:#fff}
.footer .container{padding-top:3rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.footer-border{border-bottom:1px solid transparent;width:fit-content;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.footer a:hover .footer-border,a.footer-border:hover,.footer-border:hover{border-bottom-color:#fff}
.footer a:hover .footer-border{transform:translateX(2px)}
.footer .arrow{width:30px;margin-left:.5rem;height:auto;transition:transform .3s var(--ease)}
.footer a:hover .arrow{transform:translate(4px,-2px)}
.footer-bottom{display:block;padding:2rem 0}
@media (min-width:768px){.footer-bottom{display:flex}}
.footer .brandlinks a{display:flex;width:fit-content}

/* ==========================================================================
   Company page
   ========================================================================== */
/* Inner-page hero. One element, one <h1>; the artwork swaps by media query
   (the original ships two DOM copies and hides one). */
.page-hero-wrap{padding-top:0}
@media (min-width:1024px){.page-hero-wrap{padding-top:2rem}}
.page-hero{background-image:var(--bg-d);background-position:center;
  background-repeat:no-repeat;background-size:contain}
.page-hero-inner{height:100vh;display:flex;align-items:center}
.page-hero-copy{width:50%}
@media (min-width:1536px){.page-hero-copy{width:58.333333%}}
@media (max-width:899px){
  .page-hero{background-image:var(--bg-m)}
  .page-hero-inner{display:block;height:100vh;padding-top:10rem}
  .page-hero-copy{width:100%;text-align:center}
}
@media (max-width:899px) and (min-width:768px){.page-hero-inner{padding-top:16rem}}

.bg-impact{background-image:url(../media/impact.webp);background-repeat:no-repeat;
  background-position:bottom;background-size:contain}
.impact-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){.impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.com-s1,.com-s2{background-repeat:no-repeat;background-position:center;background-size:cover;
  height:27rem;border-radius:.375rem;display:flex;align-items:flex-end;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.com-s1:hover,.com-s2:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.com-s1{background-image:url(../media/sec2.webp)}
.com-s2{background-image:url(../media/sec1.webp)}
.com-s3{background-image:url(../media/sec3.webp);background-repeat:no-repeat;
  background-position:center;background-size:cover;height:9rem;border-radius:.375rem;
  box-shadow:var(--shadow-sm)}
@media (max-width:767px){.com-s1{height:15rem}.com-s3{height:auto}}
@media (max-width:899px){
  .com-s1{background-image:url(../media/sec2m.webp);height:18rem}
  .com-s2{height:18rem}}

.mission-grid{display:grid;grid-template-columns:1fr;margin-top:0}
@media (min-width:1024px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;margin-top:2rem}}
.about-point{width:80px;height:20px}
.mission-point{display:flex;gap:1rem}
.mission-point+.mission-point{margin-top:2rem}

.company-pdi{background-image:url(../media/card.webp);background-repeat:no-repeat;
  background-position:center;background-size:cover;margin-bottom:5rem}
.company-pdi .container{display:flex;justify-content:center;padding:7rem 0}

/* team carousel */
.team-desktop{display:none}
@media (min-width:768px){.team-desktop{display:block}}
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;margin:1rem auto}
@media (min-width:1024px){.team-grid{margin:2.5rem auto}}
.team-cell{display:flex;flex-direction:column;align-items:center;width:100%;padding:1rem}
@media (min-width:640px){.team-cell{width:50%}}
@media (min-width:768px){.team-cell{width:25%}}
.team-card{text-align:center;padding:1.75rem 1rem;border:1px solid transparent;border-radius:.75rem;
  width:100%;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.team-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.team-initials{width:64px;height:64px;border-radius:50%;margin:0 auto .9rem;display:grid;
  place-items:center;font-family:"Lexend Medium";font-size:20px;color:var(--green-deep);
  background:linear-gradient(140deg,#e7f2e6,#d3e8d4);letter-spacing:.5px;
  transition:transform .4s var(--ease)}
.team-card:hover .team-initials{transform:scale(1.06)}
.team-name{font-family:"Lexend Medium";color:#111827;font-size:18px}
.team-role{color:#4b5563;font-size:14px;margin-top:.15rem}

.team-mobile{display:block;margin-top:2.5rem}
@media (min-width:768px){.team-mobile{display:none}}
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .55s var(--ease)}
.carousel-slide{flex:0 0 100%;padding:0 .5rem}
.carousel-dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.25rem}
.carousel-dots button{width:8px;height:8px;border-radius:50%;background:#c7d3c7;
  transition:background .3s var(--ease),width .3s var(--ease)}
.carousel-dots button[aria-current="true"]{background:var(--green);width:22px;border-radius:99px}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;
  color:var(--green);z-index:2;transition:transform .25s var(--ease)}
.carousel-nav:hover{transform:translateY(-50%) scale(1.08)}
.carousel-nav.prev{left:2px}.carousel-nav.next{right:2px}

/* ==========================================================================
   Customize page
   ========================================================================== */
.cus-row{display:block;gap:5rem;padding:1.25rem 0}
@media (min-width:768px){.cus-row{display:flex}}
@media (min-width:1024px){.cus-row{padding:3.5rem 0}}
@media (min-width:1536px){.cus-row{gap:10rem}}
.cus-row:nth-child(even){flex-direction:row-reverse}
.cus-media{width:100%}
@media (min-width:768px){.cus-media{width:41.666667%}}
.cus-media img{width:100%;border-radius:0 .5rem .5rem 0;margin-bottom:1.25rem;
  transition:transform .6s var(--ease)}
@media (min-width:1024px){.cus-media img{margin-bottom:0}}
.cus-row:hover .cus-media img{transform:scale(1.02)}
.cus-copy{width:100%;display:flex;align-items:center}
@media (min-width:768px){.cus-copy{width:58.333333%}}
.c-process{width:150px;position:absolute;margin-left:-2.25rem;margin-top:-2.25rem}
@media (max-width:1023px){.c-process{width:90px;margin-left:-.5rem;margin-top:.75rem}}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contactbg .container{padding-top:8rem}
@media (min-width:1024px){.contactbg .container{padding-top:12rem}}
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:1024px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6rem}}
.contact-form input,.contact-form textarea,.contact-form select{
  background-color:var(--field);outline:none;border:0;
  padding:.5rem 1rem;width:100%;margin-top:.25rem;border-radius:.375rem;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  background:#fff;box-shadow:0 0 0 2px var(--green)}
.contact-form textarea{height:9rem;resize:vertical}
.contact-form label{font-family:"Lexend Medium";color:var(--body);display:inline}
.contact-form label + input,.contact-form label + select,.contact-form label + textarea{display:block}
.req{line-height:1}
.selectfield{background:var(--field);outline:none;border:none;padding-right:25px}
.field-error{border:1px solid red !important;background:#fff2f2 !important}
.field-error::placeholder{color:red}
.err-msg{color:#c00;font-size:13px;margin-top:.3rem;display:block}
.info-box{border:2px solid #d1d5db;border-radius:.375rem;padding:1rem .5rem;margin-top:2rem}
@media (min-width:768px){.info-box{padding:2.5rem 1.25rem}}
.contact-cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:3rem}
@media (min-width:768px){.contact-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
@media (min-width:1024px){.contact-cards{margin-top:8rem}}
.contact-card{box-shadow:var(--shadow-md);padding:1.25rem;border-radius:.375rem;background:#fff;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (min-width:1024px){.contact-card{padding:2.5rem}}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,0,0,.35)}
.form-note{padding:.75rem 1rem;margin-top:.75rem;border-radius:.375rem;text-align:center;
  font-size:14px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.form-note.show{opacity:1;transform:none}
.form-note.ok{background:#e8f5e9;color:#0b6b1a}
.form-note.err{background:#fdecea;color:#b3261e}

/* credit application */
.credit-steps{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}
.credit-steps .step{display:flex;gap:.5rem;align-items:center;font-family:"Lexend Medium";
  color:#c4c4c4;transition:color .35s var(--ease)}
.credit-steps .step.done,.credit-steps .step.current{color:var(--green-deep)}
.credit-steps .step img{width:25px;height:24px}
.credit-progress{height:3px;background:#e7e7e7;border-radius:99px;margin-top:1rem;overflow:hidden}
.credit-progress span{display:block;height:100%;background:var(--green);border-radius:99px;
  transition:width .5s var(--ease)}
.credit-application{background:#fff;border:2px solid var(--line);border-radius:.375rem;
  display:grid;row-gap:0;padding:1rem;margin-top:1rem}
@media (min-width:1024px){.credit-application{padding:2.5rem 3rem 6rem;margin-top:2.5rem}}
.credit-application.collapsed{padding:2.5rem 3rem}
.credit-application+.credit-application{margin-top:2.5rem}
.acc-head{display:flex;gap:.75rem;align-items:center;width:100%;text-align:left}
.acc-head img{width:25px;height:24px}
.acc-head h4{font-family:"Lexend Medium";color:var(--ink)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-body>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .45s}
.credit-application.open .acc-body{grid-template-rows:1fr}
.credit-application.open .acc-body>div{visibility:visible;transition-delay:0s}
.field-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){
  .field-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.req{color:red;font-size:17px}
.radio-stack{display:block}
.radio-opt{display:flex;align-items:center;line-height:21px}
.radio-opt input{accent-color:var(--green);width:13px;height:13px;margin:0;flex:none;
  transition:transform .2s var(--ease)}
.radio-opt input:checked{transform:scale(1.15)}
.radio-opt label{margin-left:.5rem;cursor:pointer;font-family:"Lexend Light";display:inline}
.sub-field{margin-top:.5rem;width:100%}
@media (min-width:768px){.sub-field{width:33.333333%;margin-left:1.5rem}}
.step-pane{animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.credit-actions{display:flex;gap:1rem;margin:1.25rem 0 2.5rem}
.credit-actions .grow{flex:1}
.desktop-applicationform{width:100%;max-width:829px}

/* policy pages */
.policy-wrap{padding-top:8rem;margin-bottom:3.5rem}
.policy-wrap.cookies{margin-bottom:2rem}
@media (min-width:1280px){.policy-wrap.cookies{margin-bottom:5rem}}
@media (min-width:768px){.policy-wrap{padding-top:10rem}}
@media (min-width:1536px){.policy-wrap{padding-top:14rem}}
@media (min-width:1280px){.policy-wrap{width:58.333333%}}
.policy-wrap h1{font-family:"Lexend Medium"}
.policy-h{font-family:"Lexend Medium";font-size:24px;color:var(--ink);margin-top:3rem}
.policy-p{font-family:"Lexend Light";font-size:16px;color:var(--body);line-height:2;margin-top:2.5rem}
.policy-p.tight{margin-top:0}
.policy-p.snug{line-height:1.5;margin-top:3rem}
.policy-p.snug-14{line-height:1.5;margin-top:3.5rem}
.policy-h.mt-14h{margin-top:3.5rem}
.policy-list.tight7 li p{line-height:1.75}
.policy-p.lead7{line-height:1.75}
.policy-list{margin-top:3rem;margin-left:2rem;list-style-type:disc}
.policy-list li p{font-family:"Lexend Light";margin:.5rem 0;color:var(--body);width:fit-content}
.policy-list.spaced li p{line-height:2}
.border-privacy{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.border-privacy:hover{border-bottom-color:var(--green-deep)}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.eyebrow{display:flex;justify-content:center}
@media (min-width:1024px){.eyebrow.start{justify-content:flex-start}}
.mx-auto{margin-left:auto;margin-right:auto}
.flex{display:flex}.grid{display:grid}
.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.w-full{width:100%}.w-fit{width:fit-content}
.relative{position:relative}.absolute{position:absolute}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}
@media (min-width:1024px){.lg-mt-32{margin-top:8rem}}.mt-20{margin-top:5rem}
.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mb-20{margin-bottom:5rem}
.my-12{margin:3rem 0}
.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.py-10{padding:2.5rem 0}
.gap-2{gap:.5rem}.gap-4{gap:1rem}
.lg-text-left{text-align:center}
@media (min-width:1024px){.lg-text-left{text-align:left}}
@media (min-width:1024px){.lg-justify-start{justify-content:flex-start}}
.section-copy{max-width:none}
@media (min-width:1024px){.section-copy{width:83.333333%}}

/* ==========================================================================
   Scroll reveal (progressive enhancement)
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.hero-in{opacity:0;transform:translateY(20px);animation:heroIn .85s var(--ease) forwards}
.hero-in[data-d="1"]{animation-delay:.12s}
.hero-in[data-d="2"]{animation-delay:.24s}
@keyframes heroIn{to{opacity:1;transform:none}}
/* page transition */
main{animation:pageIn .4s var(--ease)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero-in{opacity:1;transform:none}
}

/* back-to-top (improvement) */
.to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;z-index:40;
  box-shadow:0 10px 24px -12px rgba(0,85,12,.9);opacity:0;pointer-events:none;
  transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--green-dark)}


/* ---- card padding scales (matches original responsive padding) --------- */
.stat-pad{padding:1rem}
@media (min-width:768px){.stat-pad{padding:2rem 1.5rem}}
@media (min-width:1024px){.stat-pad{padding:2.5rem 1.5rem}}
@media (min-width:1280px){.stat-pad{padding:2.5rem}}
.stat-pad.wide{padding:1rem}
@media (min-width:1024px){.stat-pad.wide{padding:2.5rem}}
.com-s3{padding:1.25rem}
@media (min-width:1024px){.com-s3{padding:2.5rem}}
.company-pdi h2{width:100%}
@media (min-width:1024px){.company-pdi h2{width:83.333333%}}

/* about-us paragraph column width matches the original (w-10/12) ---------- */
.about-copy{width:100%}
@media (min-width:1024px){.about-copy{width:83.333333%}}

/* footer bottom row — mirrors the original flex-basis/shrink behaviour ----- */
.footer-bottom .fb-left{width:100%;margin-bottom:.75rem}
.footer-bottom .fb-cookie{width:50%;justify-content:center}
.footer-bottom .fb-privacy{width:50%;justify-content:center}
.footer-bottom .fb-right{width:100%}
@media (min-width:768px){
  .footer-bottom .fb-left{width:58.333333%}
  .footer-bottom .fb-cookie{width:25%;justify-content:flex-start}
  .footer-bottom .fb-privacy{width:100%;justify-content:flex-start}
  .footer-bottom .fb-privacy p{margin-left:1.5rem}
  .footer-bottom .fb-right{width:41.666667%;justify-content:flex-end}
}
@media (min-width:1280px){.footer-bottom .fb-cookie{width:16.666667%}}

/* company — impact block margins mirror the original responsive rhythm ---- */
.impact-wrap{margin-top:1.5rem}
@media (min-width:1024px){.impact-wrap{margin-top:0}}
@media (min-width:1536px){.impact-wrap{margin-top:4rem}}
.impact-inner{margin-top:2.5rem}
@media (min-width:1536px){.impact-inner{margin-top:0}}
.team-head{width:100%}
@media (min-width:1280px){.team-head{width:83.333333%}}

/* customize — copy rhythm ------------------------------------------------- */
.cus-h{margin-top:2.5rem}
.cus-p{margin-top:.75rem}
@media (min-width:1024px){.cus-h{margin-top:0}.cus-p{margin-top:1.5rem}}
.cus-quote{width:100%;padding:2.5rem 0}
@media (min-width:768px){.cus-quote{width:83.333333%}}
@media (min-width:1536px){.cus-quote{padding:5rem 0}}

/* contact hero heading — leading-none, leading-tight from xl -------------- */
.contact-h1{line-height:1;text-align:center}
@media (min-width:768px){.contact-h1{text-align:left}}
@media (min-width:1280px){.contact-h1{line-height:1.25}}

.field-row.mt-2{margin-top:.5rem}
.acc-body > div > .grid{row-gap:1.25rem}

.mb-10{margin-bottom:2.5rem}

/* CTA heading — an h2 carrying the h1 type scale, so each page keeps one h1 */
.cta-h{font-family:"Lexend Medium";font-size:60px;color:#000}
@media (max-width:1024px){.cta-h{font-size:48px}}
@media (max-width:767px){.cta-h{font-size:36px}}

/* skip link — first tab stop, visible only when focused.
   Clipped rather than offset off-canvas: a negative offset would overflow the
   body and force a scrollbar gutter, which shifts the whole layout. */
.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:0;left:0;z-index:100;
  width:auto;height:auto;margin:0;padding:.75rem 1.25rem;clip:auto;overflow:visible;
  background:var(--green);color:#fff;border-radius:0 0 .5rem 0;
  font-family:"Lexend Medium";font-size:14px}
main:focus{outline:none}