/* ================================================================
   GLOBAL DESKTOP ZOOM
   The Figma file is designed at 1728px width. On typical laptop viewports
   (1280–1600px), rendering at 100% feels too "zoomed in" because elements
   built for 1728 don't have room to breathe. Scaling the body to 80%
   makes proportions feel right at common laptop sizes.

   Only fires at tablet+ widths — mobile stays at 100% so phone screens
   aren't unreadable. */
@media (min-width: 768px) {
  body {
    zoom: 0.8;
  }
}

/* Prevent the wider-than-body Projects image from triggering horizontal scroll */
html,
body {
  overflow-x: hidden;
}


/* ================================================================
   SECTIONS — All values pulled from Figma file Sensor Studio.
   Pixel values are converted to vw against --fig-width (1728) so the
   design scales proportionally with viewport width while staying
   pixel-accurate at the design resolution.

   Section y-positions in the Figma canvas (Home Design 220:465):
     Header (220:548)               y=30      52 tall
     Tagline (220:543)              y=279     82 tall
     About (220:487)                y=518     87 tall
     Wordmark (220:527)             y=725    136 tall
     Services (289:20)              y=1041   203 tall
     Projects (306:32)              y=1364   942 tall (full-bleed)
     Process (245:661)              y=2426   314 tall
     Get-an-estimate button         y=2940    64 tall
     Testimonials (242:659)         y=3204   177 tall
     Footer mini logo (248:763)     y=3621    52 tall
     Footer (289:42)                y=3833   150 tall
   ================================================================ */

/* ================================
   HERO — Figma 248:702 "Gradient Background Header" + content overlay
   Hero hosts: gradient background, blur layer, tagline, about, wordmark.
   Heights are content-driven; gradient/blur position relative to hero top.
   ================================ */

.hero {
  position: relative;
  /* Figma: header sits at canvas y=30 with height 52 → header ends at y=82.
     Hero content begins below the nav, so reserve 82px (canvas margin + nav height). */
  padding-top: 82px;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--color-white);
}

/* Mask box for Gradient Background Header — 1730×1484 at canvas (0,0).
   The 1906×1906 circle gradient image sits inside, positioned at (-89, -1293)
   inside the mask so only the bottom half of the radial circle is visible. */
.hero-mask {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * 1730 / 1728);          /* 100.12vw */
  height: calc(100vw * 1484 / 1728);         /* 85.88vw */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-circle {
  position: absolute;
  left: calc(100vw * -89 / 1728);            /* -5.15vw */
  top: calc(100vw * -1293 / 1728);           /* -74.83vw */
  width: calc(100vw * 1906 / 1728);          /* 110.30vw */
  height: calc(100vw * 1906 / 1728);         /* square */
  display: block;
  max-width: none;
}

/* Background Blur layer — 1728×942 from canvas top.
   Figma: rgba(255,255,255,0.02) + backdrop-filter: blur(100px) */
.hero-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vw * 942 / 1728);          /* 54.51vw */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  z-index: 1;
  pointer-events: none;
}

/* Tagline (220:543) — Title Small / Clash Display Semibold 28px, 0.02em, UPPERCASE,
   3-line block, max-width 509. Positioned at canvas x=60 y=279 — i.e. 30px (header padding)
   + 52px (header height) + 197px (gap) below page top. From hero padding-top we need 197px. */
.hero-tagline-wrap {
  position: relative;
  z-index: 2;
  padding-top: 197px;                        /* Figma gap from header bottom to tagline top */
}

.hero-tagline {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  max-width: 509px;
  margin: 0;
}

/* About (220:487) — at canvas y=518. Gap from tagline bottom (y=361) = 157px.
   Layout: justify-between row with left half (490 wide) and right half (1059 wide).
   Left: two 216×45 paragraphs gap 58px.
   Right: two 510×87 paragraphs gap 40px. */
.hero-about {
  position: relative;
  z-index: 2;
  padding-top: 157px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hero-about-left {
  display: flex;
  gap: 58px;
}

.hero-about-left p {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  width: 216px;
  margin: 0;
}

.hero-about-left p + p {
  /* second column — same styling, just separated by 58px gap */
}

.hero-about-left p:not(:last-child)::after {
  /* spacing between the two lines within each block */
}

/* Right half: two 510-wide paragraphs side-by-side with 40px gap */
.hero-about-right {
  display: flex;
  gap: 40px;
  flex-shrink: 0;
}

.hero-about-right p {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  width: 510px;
  margin: 0;
}

.hero-about-right p:last-child { width: 509px; }

/* In Figma the two stacked items in left ("New York" / "based") fit a 216×45 box —
   the 45px height comes from two 20px lines with a small natural gap (no explicit gap).
   The <br /> in the markup gives us that. */

/* Wordmark (220:527) — Sensor Studio Logotype SVG, 1608×136. Gap from About bottom
   (y=605) = 120px. */
.hero-wordmark-wrap {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 0;
}

.hero-wordmark {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================
   SERVICES — Figma 289:20 (at canvas y=1041, 1608×203)
   Gap from wordmark bottom (y=861) = 180px.
   3 columns gap 40px, each ~509 wide. Each card:
     - "01" — Body 20px Neue Montreal 400, h=24
     - gap 4px
     - Title — Clash Display Semibold 40px, 0.02em uppercase, h=80 (2 lines)
     - gap 30px
     - Description — Body 20px Neue Montreal 400, h=65
   ================================ */
.services {
  position: relative;
  padding: 180px 0 0;                        /* top gap from wordmark; bottom handled by next section */
  background: var(--color-white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

/* Figma 289:21/26/31 — Service column: gap-30 between Title group and Description. */
.service {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Figma 289:22/27/32 — Title group: gap-4 between number and title. */
.service-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-num {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

.service-title {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.service-desc {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

/* ================================
   PROJECTS — Figma 306:32 (at canvas y=1364, 1728×942 full-bleed)
   Gap from Services bottom (y=1244) = 120px.
   Full-bleed image with border-radius 120 and prev/next buttons centered vertically.
   ================================ */
.projects {
  position: relative;
  padding: 120px 0 0;
}

.projects-frame {
  position: relative;
  margin: 0 auto;
  max-width: 1728px;
  aspect-ratio: 1728 / 942;
  border-radius: 120px;
  overflow: hidden;
  background: var(--color-black);
}

/* At tablet+ the body has zoom: 0.8, so a child at 100vw renders visually at 80vw.
   To make the Projects image span the actual viewport edge-to-edge as Figma shows,
   override to 125vw (= 100vw / 0.8), and drop the centering / max-width caps. */
@media (min-width: 768px) {
  .projects-frame {
    width: 125vw;
    margin: 0;
    max-width: none;
  }
}

/* Carousel track + slides (replaces single-image setup).
   Each slide fills the 1728×942 frame with object-fit: cover so mixed-aspect
   mockups (caps, hoodies) all crop cleanly to the frame. */
.projects-track {
  position: absolute;
  inset: 0;
}

.projects-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.projects-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.projects-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.projects-frame:hover .projects-slide.is-active img {
  transform: scale(1.02);
}

.projects-caption {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 2;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  line-height: 1;
}

/* Pagination dots — bottom right inside the frame */
.projects-dots {
  position: absolute;
  bottom: 28px;
  right: 40px;
  display: flex;
  gap: 8px;
  z-index: 2;
  pointer-events: auto;
}

.projects-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}

.projects-dot.is-active {
  background: #ffffff;
  transform: scale(1.3);
}

.projects-dot:hover {
  background: #ffffff;
}

/* Prev/Next buttons (Figma 306:31 Buttons row at frame y=439, 1608 wide).
   Each button: 64×64 rounded 32, padding 18, backdrop-blur 30, bg rgba(255,255,255,0.2). */
.projects-nav-row {
  position: absolute;
  top: 50%;
  left: var(--pad);
  right: var(--pad);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.projects-nav {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-button-sq);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--t-fast);
}

.projects-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.projects-nav img {
  width: 14px;
  height: 22px;
  display: block;
}

/* Figma uses the same arrow asset for both buttons and mirrors the right one via
   scaleX(-1) on the parent. Both exported SVGs are identical, so we mirror in CSS. */
.projects-nav.next img {
  transform: scaleX(-1);
}

/* ================================
   PROCESS — Figma 245:661 (at canvas y=2426, 1611×314)
   Gap from Projects bottom (y=2306) = 120px.
   Intro: 2 paragraphs gap 40, each 509 wide × 51 tall (2 lines Body).
   Spacing intro → steps: 140 (the Figma frame has gap 140).
   Steps: 6 in a row, gap 40. Each step 235×123: dot 37×37, gap 30, title (Clash Display
   Semibold 28px, 0.02em uppercase) 2-line height 56.
   ================================ */
.process {
  position: relative;
  padding: 120px 0 0;
  background: var(--color-white);
}

.process-intro {
  display: flex;
  gap: 40px;
  margin-bottom: 140px;
}

.process-intro p {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  width: 509px;
  max-width: 100%;
  margin: 0;
}

.process-intro p + p {
  /* gap handled by parent */
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 123px;
}

.process-dot {
  width: 37px;
  height: 37px;
  display: block;
}

.process-title {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

/* ================================
   FOOTER-AREA — Figma 232:631 "Gradient Background Footer"
   Frame: 1730×1105 at canvas y=2940.
   Top gap from Process bottom (y=2740) = 200px.
   Contains: button at top → testimonials → mini-logo → footer.
   ================================ */
.footer-area {
  position: relative;
  margin-top: 200px;                         /* gap from process bottom */
  overflow: hidden;
  padding-bottom: 62px;                      /* Figma: bottom edge of footer to canvas bottom */
}

/* Designer-provided pre-rendered composite (gradient + blur baked in).
   PNG 3456×2210 = 2× of 1728×1105, matching the full Gradient Background Footer frame.
   Positioned to fill the footer-area starting at its top. No separate blur overlay needed. */
.footer-gradient {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  aspect-ratio: 3456 / 2210;                 /* same as 1728/1105 frame */
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* "Get an estimate" button — at canvas y=2940 (top of footer-area, 0px from top) */
.footer-cta-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 0;
}

/* Testimonials — at canvas y=3204 = frame y=264.
   Gap from button bottom (y=3004) to testimonials top = 200px. */
.footer-area .testimonials {
  position: relative;
  z-index: 2;
  margin-top: 200px;
  display: flex;
  gap: 40px;                                 /* Figma: 3 columns gap 40 */
  align-items: flex-start;
}

.testimonial {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.testimonial > div:first-child,
.testimonial-body {
  /* nothing — fall through */
}

/* Figma 242:647/650/655 — Title+Quote group: gap-20 between title and body */
.testimonial-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Title: Clash Display Semibold 40px, 0.02em uppercase (Figma Title Medium) */
.testimonial h3 {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

/* Quote — Body 20px Neue Montreal 400 */
.testimonial p {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

/* Author "— Marcus Bennett" — Body Bold 20px Neue Montreal 700 */
.testimonial .who {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
}

/* Footer mini logo — Figma 248:763, 234×52 centered at canvas y=3621.
   Gap from testimonials bottom (y=3381) = 240px. */
.footer-logo-wrap {
  position: relative;
  z-index: 2;
  margin-top: 240px;
  display: flex;
  justify-content: center;
}

.footer-logo {
  display: block;
  width: 234px;
  height: 52px;
}

/* Footer (Figma 289:42, at canvas y=3833, 1608×150).
   Gap from mini-logo bottom (y=3673) = 160px. */
.footer {
  position: relative;
  z-index: 2;
  margin-top: 160px;
}

/* Layout: Newsletter (372 wide, left) | Contact info (510 wide, center, x=549) |
   Social (372 wide, right, x=1236). All aligned with the footer 1608 box. */
.footer-row {
  display: grid;
  grid-template-columns: 372px 1fr 372px;
  gap: 177px;
  align-items: end;
}

/* Newsletter column — Figma 268:707 (372×150)
   Structure: Email Input group [label + input row] (gap-10), then subtitle (gap-40). */
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 40px;                                 /* Figma: gap from input block to subtitle */
  align-items: flex-start;
  width: 372px;
}

.newsletter-email-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.newsletter-label {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

/* Figma Frame 53 — input row + line, gap-8 between them */
.newsletter-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;                                 /* Figma Frame 52: gap-10 between text and icon */
  width: 100%;
  padding-bottom: 8px;                       /* Figma: gap-8 between input row and line */
  border-bottom: 2px solid var(--color-black);
}

.newsletter-input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-black);
  outline: none;
  padding: 0;
}

.newsletter-input-wrap input::placeholder {
  color: rgba(0, 0, 0, 0.15);                /* Figma Black 15% (257:34) */
  font-weight: 700;
}

.newsletter-input-wrap button {
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-input-wrap button svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform var(--t-fast);
}

.newsletter-input-wrap button:hover svg {
  transform: translate(2px, -2px);
}

.newsletter-sub {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

/* Contact info (289:40) — 510 wide, flex-col gap-8, text centered, Body Large 24/700. */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-black);
}

.footer-contact a {
  color: inherit;
  transition: opacity var(--t-fast);
}

.footer-contact a:hover {
  opacity: 0.6;
}

.footer-address {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Social — row of icon links (Instagram, Facebook, TikTok, LinkedIn, X).
   Sized to fit alongside Newsletter + Contact in the footer 1608 grid. */
.footer-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: var(--color-black);
  width: 372px;
  flex-wrap: wrap;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-black);
  color: var(--color-black);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}

.footer-social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-social-icon:hover {
  background: var(--color-black);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ================================================================
   REQUEST A QUOTE MODAL — Figma 505:289 "Request a Quote"
   Modal: 1466×748, rounded-80.
   Title "project brief" centered, then 3-column inputs grid, then
   action row (icon button + primary CTA) centered.
   ================================================================ */
.estimate-card {
  background: transparent;
}

.estimate-title {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black);
  margin: 0 0 60px;
}

/* 3-column grid — Figma 505:283 "Inputs": gap-40 between 372/510/372 columns */
.brief-grid {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

.brief-col {
  display: flex;
  flex-direction: column;
}

.brief-col-left {
  width: 372px;
  flex-shrink: 0;
  gap: 44px;                                /* Figma 505:282: gap-44 between headline and fields */
}

/* Columns have NO uniform gap — every block's spacing is set individually below
   so each gap can be tuned on its own. See "PER-GROUP SPACING" further down. */
.brief-col-middle {
  width: 510px;
  flex-shrink: 0;
}

.brief-col-right {
  width: 372px;
  flex-shrink: 0;
}

/* ================================================================
   PER-GROUP SPACING — one knob per gap. Change any single number to
   move just that gap; nothing else shifts. The number is the space
   BELOW that block (i.e. before the next one).
   ================================================================ */

/* Middle column */
.chip-group[data-field="service"]  { margin-bottom: 30px; }  /* Multiple choice → Timeline */
.chip-group[data-field="timeline"] { margin-bottom: 30px; }  /* Timeline → Shipping */
/* shipping is the last block in the middle column (its ZIP / pickup field
   sits inside it, spaced by .chip-group .brief-input below) */

/* Right column */
.chip-group[data-field="garments"] { margin-bottom: 30px; }  /* Garments → Design */
.chip-group[data-field="design"]   { margin-bottom: 30px; }  /* Design → Upload */
.brief-col-right .brief-upload     { margin-bottom: 30px; }  /* Upload → Quantity */

/* Gap between a group's chips and a field that lives inside it (ZIP code,
   pickup address) — same 30px so the whole form keeps one even rhythm. */
.chip-group .brief-input,
.chip-group .shipping-pickup-address { margin-top: 30px; }

/* The shipping group swaps between the ZIP field and the pickup address. Both
   carry display:flex from their base rules, which beats the UA [hidden] rule —
   so without this the hidden block stays visible. This makes `hidden` work. */
.brief-input[hidden],
.shipping-pickup-address[hidden] { display: none; }

/* LABEL → CHIPS gap, one knob per group. This is the EXTRA space below each
   group's small label before its chips, on top of the 10px base row gap on
   .chip-group. The role-model design keeps the chip labels tight (≈10px total),
   so these are 0. Bump any single line if you want that one label to breathe. */
.chip-group[data-field="service"]  .chip-label { margin-bottom: 0; }  /* Multiple choice */
.chip-group[data-field="timeline"] .chip-label { margin-bottom: 0; }  /* Timeline */
.chip-group[data-field="shipping"] .chip-label { margin-bottom: 0; }  /* Shipping */
.chip-group[data-field="garments"] .chip-label { margin-bottom: 0; }  /* Garments */
.chip-group[data-field="design"]   .chip-label { margin-bottom: 0; }  /* Design */

/* Headline (Hi, + main greeting) — Figma 505:277 */
.brief-headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brief-hi {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 14px;                           /* Figma Body Small */
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

.brief-greeting {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 26px;                           /* Figma Body Large */
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

/* Contact info fields — Figma 505:278: gap-30 */
.brief-fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Input block (label on top, input below) — Figma 459:58/62/65/68.
   Figma: 40px tall, label at top 0 (14px), placeholder at top 20px (20px).
   With line-height: 1, that's a 6px gap between label baseline and placeholder. */
.brief-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.brief-input label {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--color-black);
}

.brief-input input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.brief-input input::placeholder {
  color: rgba(0, 0, 0, 0.15);                /* Figma Black 15% */
  font-weight: 700;
}

/* Chip group — Figma 497:160/176/475 etc.
   gap separates the small label ("Multiple choice", "Garments"...) from its chip row.
   Body zoom: 0.8 at desktop, so 20px renders at 16px visual. */
.chip-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.chip-label {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--color-black);
  padding: 0;
  margin: 0;
}

.chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Chip option — Figma 489:182/184/186/188 etc.
   Default: 1px border with rgba(0,0,0,0.08), black text.
   Selected: bg rgba(0,0,0,0.15), no border.
   Disabled: 1px border with rgba(0,0,0,0.08), text rgba(0,0,0,0.08). */
.chip {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.chip:hover:not(.is-selected):not(.is-disabled) {
  border-color: rgba(0, 0, 0, 0.3);
}

.chip.is-selected {
  background: rgba(0, 0, 0, 0.15);
  border-color: transparent;
}

.chip.is-disabled,
.chip:disabled {
  color: rgba(0, 0, 0, 0.08);
  cursor: not-allowed;
}

/* Studio pick-up address — Figma 505:713 variant
   "Studio pick-up address" label (14px) + 2-line address (20px Bold) */
.shipping-pickup-address {
  display: flex;
  flex-direction: column;
  gap: 6px;                                 /* matches .brief-input rhythm */
}

.shipping-pickup-address .brief-input-label {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

.shipping-address {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
}

/* List of uploaded file chips (stacks vertically below "Add file" button) */
.upload-files {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.upload-files:empty {
  display: none;
}

/* Uploading state — thin gradient progress bar shown while a file is being read.
   Fill width is driven by real FileReader progress (js/main.js), then the row
   is swapped for the dashed .upload-chip below once the read completes. */
.upload-progress {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2b6fff 0%, #000000 50%, #ff7a18 100%);
  transition: width 0.15s linear;
}

/* File chip — Figma 505:2453 variant: dashed pill "filename / size" with X button to remove */
.upload-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;          /* don't overflow the parent column */
}

.upload-chip-name {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  padding: 10px 16px;
  border: 1px dashed var(--color-black);
  border-radius: 20px;
  min-width: 0;             /* allows flex item to shrink below content size */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-chip-remove {
  width: 24px;
  height: 24px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--t-fast);
}

.upload-chip-remove:hover {
  background: #1a1a1a;
}

.upload-chip-remove svg {
  width: 12px;
  height: 12px;
}

/* Upload block (Figma 505:265) — label + bubble button group, gap-30 between
   the "Upload" label and the Add-file bubble. */
.brief-upload {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.upload-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: max-content;
}

/* + icon button — 40×40 black rounded square */
.upload-plus {
  width: 40px;
  height: 40px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upload-plus svg {
  width: 20px;
  height: 20px;
}

/* "Add file" pill — in Figma (505:265) this is a Button Primary, so it matches
   the CTA type: Clash Display Medium 24px, 0.02em, white on black. */
.upload-text {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: 20px;
  font-family: var(--display-font);
  font-weight: 500;
  font-size: 20px;                          /* Figma's 24px is scaled to a 40px bubble; 20px keeps the pill level with the + circle here */
  line-height: 1;
  letter-spacing: 0.02em;
}

.upload-control:hover .upload-plus,
.upload-control:hover .upload-text {
  background: #1a1a1a;
}

/* Bottom action row — Figma 505:2828: gap-14 (icon button + primary CTA) */
.brief-submit {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

/* Small black icon button next to the main CTA — Figma 505:2376 */
.brief-icon-btn {
  width: 40px;
  height: 40px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}

.brief-icon-btn:hover {
  background: #1a1a1a;
  transform: translate(2px, -2px);
}

.brief-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Success message after submit */
.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.form-success.show { display: block; }

.form-success h3 {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  color: var(--color-black);
}

.form-success p {
  font-family: var(--body-font);
  font-size: 20px;
  line-height: 1.4;
  color: #444;
}