/* =====================================================================
   BAS START DESIGNING PAGE styles
   Depends on: bas.css
   Nav is managed separately (Blocksy Content Blocks), so bas-nav-* rules removed.
   No JS file — page has no interactive components beyond form display.
   ===================================================================== */


/* =====================================================================
   NAV — Pixel-perfect Nike structure
   Top bar (black) → Main bar (white, logo left, links center, icons right) → Promo bar (light gray)
===================================================================== */


/* 1. Top utility bar */


/* 2. Main nav bar */

/* Logo — left */


/* Center links */


/* Right icons */


/* Search box — Nike style inline */


/* 3. Promo bar — Nike style light gray */
.bas-promo-bar {
  background:var(--bas-gray-bg);
  text-align:center;
  padding:10px 24px;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-promo-bar p {
  font-size:13px;font-weight:500;color:var(--bas-black);
  line-height:1.4;
}
.bas-promo-bar a{text-decoration:underline;text-underline-offset:2px;}


@media(max-width:600px){
  /* topbar display:none removed */
}

/* =====================================================================
   HERO — Nike style: full-bleed dark photo, text bottom-center, two CTA pills
===================================================================== */
.bas-hero {
  position:relative;
  width:100%;
  height:70vh;
  min-height:500px;
  max-height:780px;
  background:var(--bas-black);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-bottom:60px;
}
/* Background image layer */
.bas-hero-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 30%, rgba(30,35,45,0.3) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%),
    #111;
}
/* Atmospheric diagonal light beam — Nike energy */
.bas-hero-light {
  position:absolute;
  top:-20%;right:-10%;
  width:70%;height:140%;
  background:linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events:none;
}
/* Grid texture */
.bas-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.bas-slide-active{opacity:1 !important;}
.bas-hero-grid {
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:100px 100px;
}
/* Jersey silhouettes floating in background */
.bas-hero-silhouette {
  position:absolute;
  pointer-events:none;
}
.bas-hero-silhouette-left {
  left:8%;top:50%;transform:translateY(-50%);
  opacity:0.07;
}
.bas-hero-silhouette-right {
  right:8%;top:50%;transform:translateY(-50%);
  opacity:0.05;
}
/* Hero text — bottom center, Nike placement */
.bas-hero-text {
  position:relative;z-index:2;
  text-align:left;
  padding:0 48px 0 68px;
  max-width:800px;
  margin-top:-80px;
  margin-right:auto;
  margin-left:0;
}
.bas-hero-h1 {
  font-family:var(--bas-font-display);
  font-size:clamp(56px,5.5vw,88px);
  font-weight:900;
  line-height:0.88;
  letter-spacing:-0.03em;
  color:var(--bas-white);
  text-transform:uppercase;
  margin-bottom:20px;
}
.bas-hero-sub {
  font-size:15px;font-weight:300;
  color:rgba(255,255,255,0.65);
  margin-bottom:32px;
  letter-spacing:0.01em;
}
/* CTA pills — Nike style pill buttons */
.bas-hero-btns {
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.bas-pill-white {
  background:var(--bas-white);color:var(--bas-black);
  font-size:14px;font-weight:600;letter-spacing:0.01em;
  padding:14px 28px;border-radius:40px;
  transition:background 0.15s;display:inline-block;
}
.bas-pill-white:hover{background:#e8e8e8;}
.bas-pill-outline {
  background:rgba(255,255,255,0.15);
  color:var(--bas-white);
  border:1px solid rgba(255,255,255,0.5);
  font-size:14px;font-weight:500;
  padding:13px 28px;border-radius:40px;
  transition:background 0.15s,border-color 0.15s;display:inline-block;
  backdrop-filter:blur(4px);
}
.bas-pill-outline:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.8);}

@media(max-width:768px){
  .bas-hero{height:75vw !important;min-height:420px !important;max-height:560px !important;padding-bottom:32px !important;}
  
}

/* =====================================================================
   SHARED
===================================================================== */
.bas-container{max-width:1280px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.bas-container{padding:0 20px;}}
@media(min-width:2560px){.bas-container{max-width:1800px;}}

.bas-section-tag{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--bas-gray-text);margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.bas-section-tag::before{content:'';display:inline-block;width:24px;height:1px;background:var(--bas-gray-border);}
.bas-section-h2{font-family:var(--bas-font-display);font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1.0;letter-spacing:-0.01em;text-transform:uppercase;margin-bottom:32px;}

/* =====================================================================
   POSITIONING
===================================================================== */
.bas-positioning{background:var(--bas-white);padding:80px 0;}
.bas-positioning-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.bas-positioning-body{font-size:16px;font-weight:300;color:var(--bas-gray-text);line-height:1.8;margin-bottom:28px;}
.bas-positioning-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.bas-positioning-list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--bas-black);line-height:1.5;font-weight:300;}
.bas-list-dot{width:5px;height:5px;border-radius:50%;background:var(--bas-gray-meta);margin-top:9px;flex-shrink:0;}
.bas-positioning-visual{background:var(--bas-dark);border-radius:12px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;overflow:hidden;}
@media(max-width:768px){.bas-positioning-grid{grid-template-columns:1fr;gap:40px;}}

/* =====================================================================
   FEATURES
===================================================================== */
.bas-features{padding:120px 0;background:var(--bas-gray-bg);}
.bas-features-header{text-align:center;margin-bottom:72px;}
.bas-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--bas-gray-border);border:1px solid var(--bas-gray-border);}
.bas-feature-card{background:var(--bas-gray-bg);padding:48px 36px;}
.bas-feature-icon-wrap{width:48px;height:48px;margin-bottom:28px;}
.bas-feature-title{font-family:var(--bas-font-display);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:14px;line-height:1.1;}
.bas-feature-body{font-size:14px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
@media(max-width:1024px){.bas-features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.bas-features-grid{grid-template-columns:1fr;}}

/* =====================================================================
   WHO
===================================================================== */
.bas-who{padding:120px 0;background:var(--bas-black);}
.bas-who .bas-section-tag{color:rgba(255,255,255,0.4);}
.bas-who .bas-section-tag::before{background:rgba(255,255,255,0.15);}
.bas-who .bas-section-h2{color:var(--bas-white);}
.bas-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.08);margin-top:64px;}
.bas-who-card{background:var(--bas-black);padding:40px 32px;transition:background 0.2s;}
.bas-who-card:hover{background:#1a1a1a;}
.bas-who-icon-wrap{width:52px;height:52px;border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.bas-who-title{font-family:var(--bas-font-display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--bas-white);margin-bottom:14px;}
.bas-who-body{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.75;font-weight:300;}
@media(max-width:1024px){.bas-who-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.bas-who-grid{grid-template-columns:1fr;}}

/* =====================================================================
   STATS
===================================================================== */
.bas-stats{padding:80px 0;background:var(--bas-gray-bg);border-top:1px solid var(--bas-gray-border);border-bottom:1px solid var(--bas-gray-border);}
.bas-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bas-gray-border);}
.bas-stat-item{padding:40px 32px;border-right:1px solid var(--bas-gray-border);text-align:center;}
.bas-stat-item:last-child{border-right:none;}
.bas-stat-num{font-family:var(--bas-font-display);font-size:clamp(40px,4vw,64px);font-weight:900;letter-spacing:-0.02em;line-height:1;margin-bottom:8px;color:var(--bas-black);}
.bas-stat-label{font-size:12px;color:var(--bas-gray-text);letter-spacing:0.06em;text-transform:uppercase;}
@media(max-width:768px){.bas-stats-grid{grid-template-columns:repeat(2,1fr);}.bas-stat-item{border-right:none;border-bottom:1px solid var(--bas-gray-border);}}

/* =====================================================================
   PROCESS
===================================================================== */
.bas-process{padding:120px 0;background:var(--bas-white);}
.bas-process-header{margin-bottom:72px;}
.bas-process-steps{display:grid;grid-template-columns:repeat(6,1fr);position:relative;}
.bas-process-steps::before{content:'';position:absolute;top:27px;left:28px;right:28px;height:1px;background:var(--bas-gray-border);z-index:0;}
.bas-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;}
.bas-step-num{width:54px;height:54px;border-radius:50%;background:var(--bas-white);border:1px solid var(--bas-gray-border);display:flex;align-items:center;justify-content:center;font-family:var(--bas-font-display);font-size:16px;font-weight:700;margin-bottom:20px;}
.bas-step-title{font-family:var(--bas-font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.bas-step-body{font-size:13px;color:var(--bas-gray-text);line-height:1.65;font-weight:300;}
@media(max-width:1024px){.bas-process-steps{grid-template-columns:repeat(3,1fr);gap:40px;}.bas-process-steps::before{display:none;}}
@media(max-width:640px){.bas-process-steps{grid-template-columns:1fr;}}

/* =====================================================================
   CUSTOMIZE
===================================================================== */
.bas-customize{padding:120px 0;background:var(--bas-gray-bg);}
.bas-customize .bas-section-tag{color:var(--bas-gray-text);}
.bas-customize .bas-section-tag::before{background:var(--bas-gray-border);}
.bas-customize .bas-section-h2{color:var(--bas-black);}
.bas-customize-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:64px;}
.bas-customize-desc{font-size:16px;font-weight:300;color:var(--bas-gray-text);line-height:1.8;margin-bottom:36px;}
.bas-customize-items{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--bas-gray-border);}
.bas-customize-item{background:var(--bas-white);padding:24px;border-top:2px solid transparent;transition:border-color 0.2s;}
.bas-customize-item:hover{border-top-color:var(--bas-black);}
.bas-customize-item-title{font-size:13px;font-weight:500;color:var(--bas-black);margin-bottom:4px;}
.bas-customize-item-sub{font-size:12px;color:rgba(255,255,255,0.4);font-weight:300;}
.bas-customize-visual{aspect-ratio:3/4;background:var(--bas-gray-border);display:flex;align-items:center;justify-content:center;position:relative;}
@media(max-width:768px){.bas-customize-grid{grid-template-columns:1fr;gap:40px;}.bas-customize-items{grid-template-columns:1fr;}}

/* =====================================================================
   FIT
===================================================================== */
.bas-fit{padding:120px 0;background:var(--bas-gray-bg);overflow:hidden;}
.bas-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:64px;}
.bas-fit-panels{display:flex;flex-direction:column;gap:2px;}
.bas-fit-panel{border:1px solid var(--bas-gray-border);padding:36px;position:relative;overflow:hidden;}
.bas-fit-panel-num{font-family:var(--bas-font-display);font-size:64px;font-weight:900;color:var(--bas-gray-bg);line-height:1;position:absolute;top:20px;right:24px;pointer-events:none;}
.bas-fit-panel-title{font-family:var(--bas-font-display);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:16px;}
.bas-fit-panel-body{font-size:15px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
.bas-fit-img{overflow:hidden;aspect-ratio:3/4;background:#f0f0f0;}
.bas-fit-img img{width:100%;height:100%;object-fit:cover;object-position:top center;}
@media(max-width:768px){.bas-fit-grid{grid-template-columns:1fr;gap:40px;}}

/* =====================================================================
   TESTIMONIALS
===================================================================== */
.bas-testimonials{padding:120px 0;background:var(--bas-white);}
.bas-testimonials-header{text-align:center;margin-bottom:64px;}
.bas-testimonials-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.bas-testimonial-card{background:var(--bas-gray-bg);padding:44px;border-left:3px solid var(--bas-black);}
.bas-testimonial-stars{font-size:13px;color:var(--bas-black);letter-spacing:4px;margin-bottom:20px;}
.bas-testimonial-text{font-size:17px;font-weight:300;line-height:1.75;color:var(--bas-dark);margin-bottom:28px;font-style:italic;}
.bas-testimonial-source{font-size:12px;font-weight:500;color:var(--bas-gray-text);text-transform:uppercase;letter-spacing:0.08em;}
@media(max-width:768px){.bas-testimonials-grid{grid-template-columns:1fr;}}

/* =====================================================================
   GALLERY — WHITE background (Nike product list style)
   Clean white, 4-col grid, borderless cards, filter tabs
===================================================================== */
.bas-gallery {
  padding:80px 0 100px;
  background:var(--bas-white);
}
.bas-gallery-header {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:40px;
  gap:24px;
}
.bas-gallery-h2 {
  font-family:var(--bas-font-display);
  font-size:clamp(32px,3.5vw,48px);
  font-weight:800;line-height:1.0;
  letter-spacing:-0.01em;text-transform:uppercase;
  margin-bottom:10px;
}
.bas-gallery-subtitle {
  font-size:15px;font-weight:300;color:var(--bas-gray-text);
  max-width:520px;line-height:1.7;
}
.bas-gallery-view-all {
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
  color:var(--bas-black);
  white-space:nowrap;flex-shrink:0;
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity 0.2s;
}
.bas-gallery-view-all:hover{opacity:0.5;}

/* Filter tabs — Nike style, underline active */
.bas-gallery-filters {
  display:flex;gap:0;
  border-bottom:1px solid var(--bas-gray-border);
  margin-bottom:40px;
  overflow-x:auto;
  scrollbar-width:none;
}
.bas-gallery-filters::-webkit-scrollbar{display:none;}
.bas-gallery-filter {
  font-size:14px;font-weight:400;
  color:var(--bas-gray-text);
  padding:14px 18px;
  border:none;border-bottom:2px solid transparent;
  background:none;
  cursor:pointer;
  transition:color 0.15s,border-color 0.15s;
  white-space:nowrap;
  font-family:var(--bas-font-body);
}
.bas-gallery-filter.active{color:var(--bas-black);font-weight:600;border-bottom-color:var(--bas-black);}
.bas-gallery-filter:hover:not(.active){color:var(--bas-black);}

/* Product grid — 4 cols, white bg, generous spacing */
.bas-product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:56px;
}

/* Product card — Nike style */
.bas-product-card {
  cursor:pointer;
}
.bas-product-img {
  background:var(--bas-gray-bg);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin-bottom:16px;
  position:relative;
}
.bas-product-img img {
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.4s ease;
}
.bas-product-card:hover .bas-product-img img{transform:scale(1.04);}
.bas-product-img-svg {
  width:68%;height:68%;
  transition:transform 0.4s ease;
}
.bas-product-card:hover .bas-product-img-svg{transform:scale(1.06);}

/* Color swatches */
.bas-swatch-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bas-swatch {
  width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(0,0,0,0.1);flex-shrink:0;
}
.bas-color-count{font-size:12px;color:var(--bas-gray-text);margin-left:4px;}

.bas-product-name {
  font-size:15px;font-weight:600;color:var(--bas-black);
  margin-bottom:3px;line-height:1.3;
}
.bas-product-type {
  font-size:14px;font-weight:300;color:var(--bas-gray-text);
  margin-bottom:8px;
}
/* "Customize" — appears on hover like Nike "Quick Add" */
.bas-product-customize {
  display:inline-block;
  font-size:13px;font-weight:500;color:var(--bas-black);
  text-decoration:underline;text-underline-offset:2px;
  opacity:0;transform:translateY(4px);
  transition:opacity 0.2s,transform 0.2s;
}
.bas-product-card:hover .bas-product-customize{opacity:1;transform:translateY(0);}

/* Gallery CTA */
.bas-gallery-footer{text-align:center;}
.bas-btn-dark-pill {
  display:inline-block;
  background:var(--bas-black);color:var(--bas-white);
  font-size:14px;font-weight:600;
  padding:15px 40px;border-radius:40px;
  transition:background 0.15s;
}
.bas-btn-dark-pill:hover{background:#333;}

@media(max-width:1024px){.bas-product-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
@media(max-width:768px){
  .bas-gallery-header{flex-direction:column;align-items:flex-start;}
  .bas-product-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:400px){.bas-product-grid{grid-template-columns:1fr;}}

/* =====================================================================
   PRICING
===================================================================== */
.bas-pricing{padding:100px 0;background:var(--bas-black);}
.bas-pricing .bas-section-tag{color:rgba(255,255,255,0.4);}
.bas-pricing .bas-section-tag::before{background:rgba(255,255,255,0.15);}
.bas-pricing .bas-section-h2{color:var(--bas-white);}
.bas-pricing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);margin-top:64px;margin-bottom:40px;}
.bas-price-item{background:var(--bas-black);padding:36px 32px;display:flex;align-items:flex-start;gap:20px;}
.bas-price-bullet{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.4);margin-top:10px;flex-shrink:0;}
.bas-price-text{font-size:15px;color:rgba(255,255,255,0.5);line-height:1.65;font-weight:300;}
.bas-price-text strong{color:var(--bas-white);font-weight:500;display:block;margin-bottom:4px;font-size:16px;}
.bas-pricing-cta{text-align:center;}
.bas-btn-white-pill{display:inline-block;background:var(--bas-white);color:var(--bas-black);font-size:14px;font-weight:600;padding:14px 40px;border-radius:40px;transition:background 0.15s;}
.bas-btn-white-pill:hover{background:#e8e8e8;}
@media(max-width:768px){.bas-pricing-grid{grid-template-columns:1fr;}}

/* =====================================================================
   FAQ
===================================================================== */
.bas-faq{padding:120px 0;background:var(--bas-white);}
.bas-faq-header{margin-bottom:64px;}
.bas-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 2px;}
.bas-faq-item{border-top:1px solid var(--bas-gray-border);overflow:hidden;}
.bas-faq-item:nth-last-child(-n+2){border-bottom:1px solid var(--bas-gray-border);}
.bas-faq-btn{width:100%;background:none;border:none;cursor:pointer;padding:24px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left;font-family:var(--bas-font-body);color:var(--bas-black);-webkit-appearance:none;appearance:none;}
.bas-faq-q{font-family:var(--bas-font-display);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em;color:var(--bas-black);line-height:1.2;}
.bas-faq-ico{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform 0.25s;color:var(--bas-black);}
.bas-faq-ico svg{width:14px;height:14px;stroke:var(--bas-black) !important;}
.bas-faq-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.bas-faq-body-inner{padding-bottom:20px;font-size:14px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
.bas-faq-item.open .bas-faq-ico{transform:rotate(180deg);}
.bas-faq-item.open .bas-faq-body{max-height:400px;}
@media(max-width:768px){.bas-faq-grid{grid-template-columns:1fr;}}

/* =====================================================================
   BOTTOM CTA
===================================================================== */
.bas-cta{padding:140px 24px;background:var(--bas-black);text-align:center;position:relative;overflow:hidden;}
.bas-cta-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:64px 64px;}
.bas-cta-h2{font-family:var(--bas-font-display);font-size:clamp(40px,6vw,88px);font-weight:900;text-transform:uppercase;color:var(--bas-white);line-height:0.95;letter-spacing:-0.01em;margin-bottom:24px;position:relative;z-index:1;}
.bas-cta-h2 em{display:block;font-style:normal;color:rgba(255,255,255,0.4);}
.bas-cta-body{font-size:16px;font-weight:300;color:rgba(255,255,255,0.45);max-width:480px;margin:0 auto 44px;line-height:1.75;position:relative;z-index:1;}
.bas-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.bas-cta-btn-white{background:var(--bas-white);color:var(--bas-black);font-size:14px;font-weight:600;padding:14px 28px;border-radius:40px;transition:background 0.15s;display:inline-block;}
.bas-cta-btn-white:hover{background:#e8e8e8;}
.bas-cta-btn-ghost{background:transparent;color:rgba(255,255,255,0.6);font-size:14px;font-weight:500;padding:13px 28px;border-radius:40px;border:1px solid rgba(255,255,255,0.2);transition:all 0.15s;display:inline-block;}
.bas-cta-btn-ghost:hover{border-color:rgba(255,255,255,0.5);color:var(--bas-white);}

/* =====================================================================
   FOOTER — Nike style: WHITE background, multi-column links,
   thin dividers, bottom 3-col utility links
===================================================================== */
.bas-footer {
  background:var(--bas-white);
  color:var(--bas-black);
  border-top:1px solid var(--bas-gray-border);
}

/* Main columns section */
.bas-footer-main {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  padding:56px 48px 48px;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-footer-col-title {
  font-size:14px;font-weight:700;
  color:var(--bas-black);
  margin-bottom:20px;
  letter-spacing:0.01em;
}
.bas-footer-links{list-style:none;display:flex;flex-direction:column;gap:12px;}
.bas-footer-links a {
  font-size:14px;font-weight:300;
  color:var(--bas-gray-text);
  transition:color 0.15s;
}
.bas-footer-links a:hover{color:var(--bas-black);text-decoration:underline;text-underline-offset:2px;}

/* Social icons */
.bas-footer-social{display:flex;gap:12px;margin-top:24px;}
.bas-footer-social a {
  width:36px;height:36px;
  border:1px solid var(--bas-gray-border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.15s;color:var(--bas-black);
}
.bas-footer-social a:hover{border-color:var(--bas-black);}
.bas-footer-social a svg{width:15px;height:15px;}

/* Divider + bottom utility bar */
.bas-footer-utility {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:40px 48px;
  border-bottom:1px solid var(--bas-gray-border);
  gap:40px;
}
.bas-footer-utility-col-title {
  font-size:14px;font-weight:700;
  color:var(--bas-black);margin-bottom:16px;
}
.bas-footer-utility-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.bas-footer-utility-links a{font-size:13px;color:var(--bas-gray-text);transition:color 0.15s;}
.bas-footer-utility-links a:hover{color:var(--bas-black);text-decoration:underline;text-underline-offset:2px;}

/* Bottom legal bar */
.bas-footer-legal-bar {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  flex-wrap:wrap;gap:12px;
}
.bas-footer-logo-wrap {
  display:flex;align-items:center;gap:16px;
}
.bas-footer-logo-wrap img{height:20px;width:auto;filter:brightness(0);}
.bas-footer-logo-text{font-family:var(--bas-font-display);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:0.08em;}
.bas-footer-legal-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.bas-footer-legal-links a{font-size:12px;color:var(--bas-gray-text);transition:color 0.15s;}
.bas-footer-legal-links a:hover{color:var(--bas-black);}
.bas-footer-region {
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--bas-gray-text);
}
.bas-footer-region svg{width:14px;height:14px;}

@media(max-width:1024px){.bas-footer-main{grid-template-columns:repeat(3,1fr);}.bas-footer-utility{grid-template-columns:1fr;gap:24px;}}
@media(max-width:768px){
  .bas-footer-main{grid-template-columns:repeat(2,1fr);gap:28px;padding:40px 20px;}
  .bas-footer-utility{padding:32px 20px;}
  .bas-footer-legal-bar{padding:16px 20px;flex-direction:column;align-items:flex-start;}
}

/* ── MOBILE HAMBURGER ── */


/* ── MOBILE DRAWER ── */


/* ── GLOBAL MOBILE FIXES ── */

@media(max-width:768px){

  /* Features: sticky 2-col → single col */
  .bas-features #features > .bas-container > div,
  .bas-start-designing-page section#features .bas-container > div {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  .bas-start-designing-page section#features .bas-container > div > div:first-child {
    position:static !important;
  }

  /* Hero */
  .bas-hero {
    min-height:60vw;
    padding-bottom:40px;
  }

  /* Fit images 2-col → 1-col */
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:48px"] {
    grid-template-columns:1fr !important;
  }
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:2px"] {
    grid-template-columns:1fr !important;
  }

  /* WHO 2×2 → 1-col */
  section[style*="Built for Every"] .bas-container > div[style*="grid-template-columns:1fr 1fr"],
  .bas-container div[style*="grid-template-columns:1fr 1fr;gap:2px;background:var(--bas-gray-border)"] {
    grid-template-columns:1fr !important;
  }

  /* Stats split → stack */
  .bas-start-designing-page section[style*="background:var(--bas-black)"] > div[style*="grid-template-columns:1fr 1fr;min-height"] {
    grid-template-columns:1fr !important;
  }
  .bas-start-designing-page section[style*="background:var(--bas-black)"] div[style*="grid-template-columns:1fr 1fr;border-left"] {
    grid-template-columns:1fr 1fr !important;
  }

  /* Testimonials 2×2 → 1-col */
  .bas-testimonials .bas-container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }

  /* Customize left/right → stack */
  .bas-customize .bas-container > div[style*="grid-template-columns:1fr 1fr;gap:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Features list left/right → stack */
  .bas-features .bas-container > div[style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* Positioning grid */
  .bas-positioning-grid{grid-template-columns:1fr !important;}

  /* Section headers 1fr 2fr → 1fr */
  .bas-container > div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* WHO section header */
  .bas-start-designing-page section[style*="background:var(--bas-gray-bg)"] .bas-container > div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* WHO cards 2×2 → 1-col */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  .bas-start-designing-page div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns:1fr 1fr !important;
  }

  /* Pricing 3-col → 1-col */
  .bas-pricing-grid{grid-template-columns:1fr !important;} .bas-pricing .bas-container > div[style*="grid-template-columns:1fr 2fr"]{grid-template-columns:1fr !important;gap:40px !important;}

  /* Footer utility */
  .bas-footer-utility{grid-template-columns:1fr !important;}

  /* Footer legal bar */
  .bas-footer-legal-bar {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .bas-footer-logo-wrap{flex-direction:column !important;align-items:flex-start !important;gap:12px !important;}

  /* CTA section padding */
  .bas-bottom-cta,.bas-cta{padding:80px 20px !important;}

  /* Section padding reduction */
  .bas-features,.bas-process,.bas-positioning,.bas-testimonials,
  .bas-customize, .bas-fit, .bas-pricing, .bas-faq {
    padding-top:72px !important;
    padding-bottom:72px !important;
  }
  section[style*="padding:100px 0"]{padding:72px 0 !important;}

  /* WHO cards bottom tag */
  .bas-start-designing-page div[style*="padding-top:24px;border-top:1px solid var(--bas-gray-border)"] span[style*="font-size:12px"] {
    font-size:11px !important;
  }

  /* Stats 2×2 numbers — smaller on mobile */
  .bas-start-designing-page div[style*="font-size:72px;font-weight:900"] {
    font-size:52px !important;
  }

  /* Topbar — hide on very small */
  .bas-promo-bar p{font-size:11px;}
}

@media(max-width:480px){
  /* Product gallery → 2-col still ok, just tighter */
  .bas-product-grid{grid-template-columns:1fr 1fr !important;gap:12px !important;}

  /* WHO 2×2 → 1-col on very small */
  .bas-start-designing-page section[style*="background:var(--bas-gray-bg)"] div[style*="grid-template-columns:1fr 1fr;gap:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Features 4-row stays 1-col */
  .bas-features .bas-container div[style*="grid-template-columns:56px 1fr"] {
    gap:20px !important;
  }

  /* Fit text cards */
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Testimonials padding smaller */
  .bas-start-designing-page div[style*="padding:48px 44px"] {
    padding:32px 24px !important;
  }

  /* Hero H1 smaller */
  .bas-hero-h1{font-size:28px !important;line-height:1.0 !important;}
  .bas-section-h2{font-size:32px !important;}
}

@media(max-width:360px){
  .bas-product-grid{grid-template-columns:1fr !important;}
  .bas-footer-main{grid-template-columns:1fr !important;}
}

@media(max-width:768px){
  .bas-hero {
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding-bottom:0 !important;
  }
  /* Image area - fixed height on mobile, no text overlap */
  /* Hero image area on mobile */
  .bas-start-designing-page #bas-hero-slides {
    position:relative !important;
    height:62vw !important;
    min-height:240px !important;
    max-height:340px !important;
    width:100% !important;
    inset:auto !important;
    display:block !important;
    overflow:hidden;
  }
  .bas-start-designing-page #bas-hero-slides .bas-slide {
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
  }
  .bas-start-designing-page #bas-hero-slides .bas-slide img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 20% !important;
  }
  /* Hide overlay on mobile - not needed when text is separate */
  .bas-hero > div[style*="linear-gradient"] {
    display:none !important;
  }
  /* Text block sits below image on solid black */
  .bas-hero-text {
    position:relative !important;
    z-index:2 !important;
    margin-top:0 !important;
    background:var(--bas-black) !important;
    width:100% !important;
    max-width:100% !important;
    padding:32px 24px 40px !important;
    text-align:center !important;
  }
  .bas-hero-eyebrow{justify-content:center !important;}
  .bas-hero-btns{justify-content:center !important;}
  .bas-hero-h1 {
    font-size:clamp(32px,8vw,48px) !important;
    margin-bottom:16px !important;
  }
  .bas-hero-h1 em{color:rgba(255,255,255,0.5) !important;}
  .bas-hero-sub{font-size:14px !important;margin-bottom:28px !important;}
  .bas-hero-eyebrow{justify-content:center !important;}
  .bas-hero-btns{justify-content:center !important;}
  /* Hide grid and light effects on mobile */
  .bas-hero-grid, .bas-hero-light{display:none !important;}
}
@media(max-width:480px){
  .bas-hero > img{height:62vw !important;min-height:220px !important;}
  .bas-hero-h1{font-size:32px !important;}
}

/* Prevent horizontal overflow */
@media(max-width:768px){
  .bas-container{overflow:hidden;}
  img{max-width:100%;}
  div[style*="grid-template-columns"]{max-width:100%;}
  .bas-hero > img{max-width:100%;width:100% !important;}
  /* Fix fit images overflow */
  .bas-start-designing-page section[style*="background:var(--bas-gray-bg)"] > .bas-container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
    overflow:hidden;
  }

  /* Nav actions on mobile */
  
  
}

/* ── Testimonials mobile: single card per view ── */
@media(max-width:768px){
  .bas-start-designing-page #test-track {
    display:flex !important;
  }
  .bas-start-designing-page .test-card {
    min-width:100% !important;
    padding:32px 24px !important;
  }
}

/* ── Trust Bar mobile: 1 col stack ── */
@media(max-width:768px){
  /* Trust bar grid → single column */
  .bas-start-designing-page div[style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;
  }
}
@media(max-width:480px){
  .bas-start-designing-page div[style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns:1fr !important;
  }
  /* Trust bar items padding */
  .bas-start-designing-page div[style*="grid-template-columns:repeat(5, 1fr)"] > div {
    border-right:none !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
    padding:20px 16px !important;
  }
}

/* ── Footer mobile ── */
@media(max-width:768px){
  .bas-start-designing-page footer > div:first-of-type {
    grid-template-columns:1fr !important;
    padding:40px 24px 32px !important;
  }
  .bas-start-designing-page footer > div:first-of-type > div:first-child {
    padding-right:0 !important;
    border-right:none !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
    padding-bottom:32px !important;
    margin-bottom:8px !important;
  }
  .bas-start-designing-page footer > div:first-of-type > div:not(:first-child) {
    padding-left:0 !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
  }
  .bas-start-designing-page footer > div:first-of-type > div:last-child {
    border-bottom:none !important;
  }
  .bas-start-designing-page footer > div:last-of-type {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:16px 24px !important;
  }
}

/* ── FIT section mobile ── */
@media(max-width:768px){
  /* Each fit card: stack image on top, text below */
  div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:48px"],
  .bas-start-designing-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] {
    grid-template-columns:1fr !important;
  }
  /* Big & Tall: on mobile, swap order so image comes first */
  .bas-start-designing-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] > div:first-child {
    order:2 !important;
  }
  .bas-start-designing-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] > div:last-child {
    order:1 !important;
  }
  /* Image aspect ratio on mobile - less tall */
  .bas-start-designing-page div[style*="aspect-ratio:4/3"] {
    aspect-ratio:3/2 !important;
  }
  /* Text padding smaller on mobile */
  .bas-start-designing-page div[style*="padding:48px 44px;display:flex;flex-direction:column;justify-content:center"] {
    padding:28px 24px !important;
  }
}

/* ── Stats section mobile ── */
@media(max-width:768px){
  .bas-start-designing-page #bas-stats-section > div:first-child {
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .bas-start-designing-page #bas-stats-section > div:first-child > div:first-child {
    min-height:260px !important;
    height:56vw !important;
    position:relative !important;
  }
  .bas-start-designing-page #bas-stats-section > div:first-child > div:first-child img {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .bas-start-designing-page #bas-stats-section > div:first-child > div:last-child {
    border-left:none !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
  }
}

/* ═══ START DESIGNING PAGE ═══ */


@media(max-width:900px){
  .bas-sd-main{grid-template-columns:1fr !important;}
  .bas-sd-three{grid-template-columns:1fr !important;}
  .bas-sd-two{grid-template-columns:1fr !important;gap:40px !important;}
  .bas-sd-five{grid-template-columns:1fr 1fr !important;}
  .bas-sd-four{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:480px){
  .bas-sd-five{grid-template-columns:1fr !important;}
  .bas-sd-four{grid-template-columns:1fr 1fr !important;}
}

/* --- Section containers (original inline style on <section>) --- */

.bas-sd-hero {
  background:var(--bas-black);
  position:relative;
  overflow:hidden;
  min-height:380px;
  display:flex;
  align-items:flex-end;
}
.bas-sd-brief {
  background:var(--bas-white);
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-form {
  background:var(--bas-gray-bg);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-who {
  background:var(--bas-white);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-process {
  background:var(--bas-gray-bg);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-pricing {
  background:var(--bas-white);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}


/* =====================================================================
   INLINE-EXTRACTED STYLES FROM start-designing.html
   Grouped by section, each class corresponds to one inline style value.
   ===================================================================== */


/* --- bas-sd-hero (10 classes) --- */
.bas-sd-hero-x1 {
  background:var(--bas-black);
  position:relative;
  overflow:hidden;
  min-height:380px;
  display:flex;
  align-items:flex-end;
}
.bas-sd-hero-x2 {
  position:absolute;
  inset:0;
}
.bas-sd-hero-x3 {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  opacity:0.3;
}
.bas-sd-hero-x4 {
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.5) 60%,rgba(0,0,0,0.1) 100%);
}
.bas-sd-hero-x5 {
  position:relative;
  z-index:1;
  padding-bottom:64px;
  padding-top:80px;
}
.bas-sd-hero-x6 {
  max-width:620px;
}
.bas-sd-hero-x7 {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin-bottom:16px;
}
.bas-sd-hero-x8 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(44px,6vw,80px);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:-0.02em;
  color:var(--bas-white);
  margin-bottom:20px;
}
.bas-sd-hero-x9 {
  font-size:15px;
  font-weight:300;
  color:rgba(255,255,255,0.6);
  line-height:1.8;
  margin-bottom:8px;
}
.bas-sd-hero-x10 {
  font-size:14px;
  font-weight:300;
  color:rgba(255,255,255,0.4);
  line-height:1.75;
}

/* --- bas-sd-brief (9 classes) --- */
.bas-sd-brief-x1 {
  background:var(--bas-white);
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-brief-x2 {
  padding:64px 0 0;
}
.bas-sd-brief-x3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,4vw,56px);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.95;
  color:var(--bas-black);
  margin-bottom:8px;
}
.bas-sd-brief-x4 {
  font-size:15px;
  font-weight:300;
  color:var(--bas-gray-text);
  margin-bottom:48px;
}
.bas-sd-brief-x5 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2px;
  background:var(--bas-gray-border);
  margin-bottom:0;
}
.bas-sd-brief-x6 {
  background:var(--bas-white);
  padding:40px 36px;
  border-top:3px solid var(--bas-black);
}
.bas-sd-brief-x7 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:64px;
  font-weight:900;
  color:#EBEBEB;
  line-height:1;
  margin-bottom:16px;
}
.bas-sd-brief-x8 {
  font-size:18px;
  font-weight:700;
  color:var(--bas-black);
  margin-bottom:8px;
}
.bas-sd-brief-x9 {
  font-size:14px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.7;
}

/* --- bas-sd-form (26 classes) --- */
.bas-sd-form-x1 {
  background:var(--bas-gray-bg);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-form-x2 {
  display:grid;
  grid-template-columns:1fr 400px;
  gap:48px;
  align-items:start;
}
.bas-sd-form-x3 {
  background:var(--bas-white);
  padding:48px 44px;
  border:1px solid var(--bas-gray-border);
}
.bas-sd-form-x4 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--bas-black);
  margin-bottom:6px;
}
.bas-sd-form-x5 {
  font-size:13px;
  font-weight:300;
  color:var(--bas-gray-text);
  margin-bottom:36px;
  line-height:1.7;
}
.bas-sd-form-x6 {
  margin-bottom:32px;
}
.bas-sd-form-x7 {
  font-weight:300;
  text-transform:none;
  letter-spacing:0;
}
.bas-sd-form-x8 {
  padding:10px 14px;
  color:var(--bas-gray-text);
}
.bas-sd-form-x9 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:32px;
}
.bas-sd-form-x10 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.bas-sd-form-x11 {
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:13px;
  border:1px solid var(--bas-gray-border);
  color:var(--bas-black);
  text-decoration:none;
  transition:all 0.15s;
}
.bas-sd-form-x12 {
  position:sticky;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.bas-sd-form-x13 {
  background:var(--bas-black);
  padding:32px 28px;
}
.bas-sd-form-x14 {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin-bottom:20px;
}
.bas-sd-form-x15 {
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid rgba(255,255,255,0.1);
}
.bas-sd-form-x16 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.bas-sd-form-x17 {
  font-size:13px;
  font-weight:300;
  color:rgba(255,255,255,0.6);
}
.bas-sd-form-x18 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--bas-white);
}
.bas-sd-form-x19 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.bas-sd-form-x20 {
  background:var(--bas-white);
  border:1px solid var(--bas-gray-border);
  overflow:hidden;
}
.bas-sd-form-x21 {
  height:160px;
  overflow:hidden;
}
.bas-sd-form-x22 {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.bas-sd-form-x23 {
  padding:24px 28px;
}
.bas-sd-form-x24 {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--bas-gray-text);
  margin-bottom:16px;
}
.bas-sd-form-x25 {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:300;
  color:var(--bas-black);
  text-decoration:none;
  margin-bottom:12px;
}
.bas-sd-form-x26 {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:300;
  color:var(--bas-black);
  text-decoration:none;
}

/* --- bas-sd-who (9 classes) --- */
.bas-sd-who-x1 {
  background:var(--bas-white);
  padding:80px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-who-x2 {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:80px;
  align-items:start;
}
.bas-sd-who-x3 {
  margin-bottom:12px;
}
.bas-sd-who-x4 {
  font-size:14px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.8;
}
.bas-sd-who-x5 {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  background:var(--bas-gray-border);
}
.bas-sd-who-x6 {
  background:var(--bas-white);
  padding:28px 20px;
}
.bas-sd-who-x7 {
  margin-bottom:14px;
  display:block;
}
.bas-sd-who-x8 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--bas-black);
  margin-bottom:6px;
  line-height:1.2;
}
.bas-sd-who-x9 {
  font-size:12px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.5;
}

/* --- bas-sd-process (15 classes) --- */
.bas-sd-process-x1 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.bas-sd-process-x2 {
  margin-bottom:40px;
}
.bas-sd-process-x3 {
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--bas-gray-border);
}
.bas-sd-process-x4 {
  display:flex;
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-process-x5 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:36px;
  font-weight:900;
  color:var(--bas-gray-border);
  line-height:1;
  flex-shrink:0;
  width:44px;
}
.bas-sd-process-x6 {
  font-size:15px;
  font-weight:600;
  color:var(--bas-black);
  margin-bottom:4px;
}
.bas-sd-process-x7 {
  font-size:13px;
  font-weight:300;
  color:var(--bas-gray-text);
}
.bas-sd-process-x8 {
  display:flex;
  gap:24px;
  padding:28px 0;
}
.bas-sd-process-x9 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--bas-gray-border);
}
.bas-sd-process-x10 {
  background:var(--bas-white);
  padding:28px 24px;
}
.bas-sd-process-x11 {
  font-size:18px;
  margin-bottom:10px;
}
.bas-sd-process-x12 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:40px;
  font-weight:900;
  line-height:1;
  color:var(--bas-black);
}
.bas-sd-process-x13 {
  font-size:0.4em;
  color:var(--bas-gray-text);
}
.bas-sd-process-x14 {
  font-size:13px;
  font-weight:600;
  color:var(--bas-black);
  margin-top:6px;
}
.bas-sd-process-x15 {
  font-size:11px;
  font-weight:300;
  color:var(--bas-gray-text);
  margin-top:3px;
}

/* --- bas-sd-pricing (12 classes) --- */
.bas-sd-pricing-x1 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.bas-sd-pricing-x2 {
  margin-bottom:20px;
}
.bas-sd-pricing-x3 {
  font-size:15px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.8;
  margin-bottom:24px;
}
.bas-sd-pricing-x4 {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--bas-gray-border);
  font-size:14px;
  font-weight:300;
  color:var(--bas-black);
  line-height:1.6;
}
.bas-sd-pricing-x5 {
  color:var(--bas-gray-text);
  flex-shrink:0;
}
.bas-sd-pricing-x6 {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 0;
  font-size:14px;
  font-weight:300;
  color:var(--bas-black);
  line-height:1.6;
}
.bas-sd-pricing-x7 {
  font-size:13px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.75;
  margin-top:20px;
}
.bas-sd-pricing-x8 {
  background:var(--bas-black);
  padding:48px 44px;
}
.bas-sd-pricing-x9 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:32px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--bas-white);
  line-height:1;
  margin-bottom:14px;
}
.bas-sd-pricing-x10 {
  font-size:14px;
  font-weight:300;
  color:rgba(255,255,255,0.5);
  line-height:1.75;
  margin-bottom:32px;
}
.bas-sd-pricing-x11 {
  display:block;
  background:var(--bas-white);
  color:var(--bas-black);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:16px 24px;
  text-align:center;
  text-decoration:none;
  margin-bottom:10px;
  transition:opacity 0.15s;
}
.bas-sd-pricing-x12 {
  display:block;
  background:transparent;
  color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.2);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:15px 24px;
  text-align:center;
  text-decoration:none;
  transition:all 0.15s;
}

/* --- bas-sd-misc (13 classes) --- */
.bas-sd-misc-x1 {
  background:var(--bas-black);
  overflow:hidden;
  position:relative;
  height:180px;
}
.bas-sd-misc-x2 {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:0.3;
  position:absolute;
  top:0;
  left:0;
}
.bas-sd-misc-x3 {
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
  padding:0 40px;
}
.bas-sd-misc-x4 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,3.5vw,42px);
  font-weight:900;
  text-transform:uppercase;
  color:var(--bas-white);
  line-height:1.1;
  text-align:center;
}
.bas-sd-misc-x5 {
  display:inline-block;
  background:var(--bas-white);
  color:var(--bas-black);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 28px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:opacity 0.15s;
}
.bas-sd-misc-x6 {
  background:var(--bas-gray-bg);
  border-top:1px solid var(--bas-gray-border);
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-sd-misc-x7 {
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.bas-sd-misc-x8 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 24px 28px 0;
  border-right:1px solid var(--bas-gray-border);
}
.bas-sd-misc-x9 {
  width:40px;
  height:40px;
  background:var(--bas-black);
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.bas-sd-misc-x10 {
  font-size:13px;
  font-weight:600;
  color:var(--bas-black);
  margin-bottom:2px;
}
.bas-sd-misc-x11 {
  font-size:12px;
  font-weight:300;
  color:var(--bas-gray-text);
}
.bas-sd-misc-x12 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 24px;
  border-right:1px solid var(--bas-gray-border);
}
.bas-sd-misc-x13 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 0 28px 24px;
}


/* =====================================================================
   RESPONSIVE RULES restored from [style*=] patterns
   Original rules used attribute selectors to target inline styles.
   Since inline styles are extracted to classes, we map to class selectors.
   ===================================================================== */

@media(max-width:768px) {
  /* All grid containers shouldn't exceed viewport width */
  .bas-sd-brief-x5,
  .bas-sd-form-x10,
  .bas-sd-form-x2,
  .bas-sd-form-x9,
  .bas-sd-misc-x7,
  .bas-sd-pricing-x1,
  .bas-sd-process-x1,
  .bas-sd-process-x9,
  .bas-sd-who-x2,
  .bas-sd-who-x5 {
    max-width: 100%;
  }
}

@media(max-width:480px) {
  /* 5-column grids collapse to 1-column on very narrow screens */
  .bas-sd-misc-x7,
  .bas-sd-who-x5 {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================================
   MOBILE LAYOUT FIXES
   ===================================================================== */

/* 问题 1a: Who We Work With 容器 (1fr 2fr) 在移动端改单列
   (原版没响应式, 小屏下左栏会被挤成一条窄道) */
@media(max-width:900px) {
  .bas-sd-who-x2 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* 问题 1b: Who We Work With 5 卡片 在移动端改单列堆叠
   (覆盖前面 @900px 的 1fr 1fr 规则, 避免 2+2+1 留空格) */
@media(max-width:900px) {
  .bas-sd-five {
    grid-template-columns: 1fr !important;
  }
}




/* =====================================================================
   FAQ SECTION — 2 column grid of <details> accordions
   Uses native <details>/<summary>, no JavaScript needed.
   Visual break between Pricing (black) and BANNER STRIP (black).
   ===================================================================== */

.bas-sd-faq {
  background: var(--bas-white);
  padding: 80px 0;
  border-bottom: 1px solid var(--bas-gray-border);
}

.bas-sd-faq-head {
  margin-bottom: 48px;
  max-width: 640px;
}

.bas-sd-faq-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--bas-black);
  margin: 0 0 14px;
}

.bas-sd-faq-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--bas-gray-text);
  line-height: 1.7;
  margin: 0;
}

.bas-sd-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bas-gray-border);
  border: 1px solid var(--bas-gray-border);
}

.bas-sd-faq-item {
  background: var(--bas-white);
  padding: 0;
  border: none;
}

.bas-sd-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bas-black);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}

.bas-sd-faq-q:hover {
  background: var(--bas-gray-bg);
}

/* Remove default disclosure triangle */
.bas-sd-faq-q::-webkit-details-marker {
  display: none;
}
.bas-sd-faq-q::marker {
  display: none;
  content: '';
}

/* Custom + / − icon on the right */
.bas-sd-faq-q::after {
  content: '+';
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--bas-gray-meta);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s, color 0.15s;
}

.bas-sd-faq-item[open] .bas-sd-faq-q::after {
  content: '−';
  color: var(--bas-black);
}

.bas-sd-faq-a {
  padding: 0 24px 22px;
  font-size: 14px;
  font-weight: 300;
  color: var(--bas-gray-text);
  line-height: 1.75;
}

/* Mobile: single column */
@media(max-width:768px) {
  .bas-sd-faq {
    padding: 56px 0;
  }
  .bas-sd-faq-head {
    margin-bottom: 32px;
  }
  .bas-sd-faq-grid {
    grid-template-columns: 1fr;
  }
  .bas-sd-faq-q {
    padding: 20px 20px;
    font-size: 14px;
  }
  .bas-sd-faq-a {
    padding: 0 20px 20px;
    font-size: 13px;
  }
}

/* =====================================================================
   START-DESIGNING HERO — 移动端 Nike 风格两段式（图在上 / 文字在下）
   HTML 不动，仅靠 CSS 重新定位 .bas-sd-hero-x* 命名空间下的元素：
   - x2 (图层) 从 absolute 转 relative，上方独立可见图片块（62vw 高）
   - x3 (img) opacity 提到 1，object-position 对准人物
   - x4 (遮罩) 隐藏，因为图不再做底图
   - x5 (文字内容) 文档流内、纯黑底、居中、统一 padding
   - x1 (section) 改 flex column
   ===================================================================== */
@media(max-width:768px){
  .bas-sd-hero-x1{
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .bas-sd-hero-x2{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:62vw !important;
    min-height:240px;
    max-height:340px;
    flex-shrink:0;
  }
  .bas-sd-hero-x3{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 30% !important;
    opacity:1 !important;
  }
  .bas-sd-hero-x4{
    display:none !important;
  }
  .bas-sd-hero-x5{
    position:relative !important;
    z-index:2 !important;
    background:var(--bas-black) !important;
    width:100% !important;
    padding:32px 24px 40px !important;
    text-align:center !important;
  }
  .bas-sd-hero-x6{
    max-width:100% !important;
    margin:0 auto;
  }
  .bas-sd-hero-x8{
    font-size:clamp(32px,8vw,48px) !important;
    line-height:1.0 !important;
    margin-bottom:16px !important;
  }
  .bas-sd-hero-x9,
  .bas-sd-hero-x10{
    font-size:14px !important;
    line-height:1.6 !important;
  }
}
@media(max-width:480px){
  .bas-sd-hero-x2{min-height:220px;}
  .bas-sd-hero-x5{padding:28px 20px 36px !important;}
  .bas-sd-hero-x8{font-size:32px !important;}
}