/* The six storefronts are independent, static website concepts. */
.storefront { container-type: inline-size; }
.concept-site[hidden], .concept-mobile[hidden] { display: none !important; }
.concept-site { --concept-color: #972d24; color: #292720; background: #fcf4e6; font-family: "Source Sans 3", sans-serif; line-height: 1.4; }
.concept-site *, .concept-mobile * { min-width: 0; }
.concept-site h3, .concept-site h4, .concept-mobile h4 { margin: 0; font-weight: 500; text-transform: none; letter-spacing: -.035em; line-height: 1.05; }
.concept-site h3 { font-family: Georgia, serif; font-size: clamp(32px, 5.8cqw, 52px); }
.concept-site h4 { font-size: clamp(20px, 3.1cqw, 28px); }
.concept-site p { font-size: clamp(12px, 1.75cqw, 15px); }
.concept-site figure { margin: 0; position: relative; }
.concept-site img { display: block; width: 100%; height: 100%; object-fit: cover; }
.concept-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.concept-small { font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.concept-cta.preview-action { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.4rem; min-height: 37px; padding: 10px 15px; color: #fff; background: var(--concept-color); font-size: 11px; font-weight: 700; cursor: default; white-space: normal; }
.concept-cta:hover { filter: none; }
.preview-selection { margin-top: 1.25rem; font-size: .8rem; font-weight: 700; color: #3f4b65; }
.preview-selection + .concept-note { margin-top: .55rem; }
.preview-stage { display: grid; grid-template-columns: minmax(0, 1fr) 164px; align-items: end; gap: 22px; padding: 1.3rem 0 1rem; }
.preview-stage .browser-shell { transform: none; box-shadow: 8px 10px 0 var(--ink); }
.preview-stage .phone-shell { position: relative; right: auto; bottom: auto; width: 164px; border-width: 7px; border-radius: 1.7rem; }
.preview-stage .phone-top { height: 18px; }
.preview-stage .phone-screen { border-radius: 1rem; }

/* Joe's: a warm, traditional pizzeria with a real menu rhythm. */
.pizza-masthead { padding: 19px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: center; border-bottom: 1px solid #d2bc9f; color: #972d24; }
.pizza-masthead strong { font: italic bold clamp(19px, 3.1cqw, 29px)/1 Georgia, serif; }
.pizza-masthead .concept-small { max-width: 110px; }
.pizza-feature { display: grid; grid-template-columns: 46% 54%; }
.pizza-intro { padding: 30px 25px; }
.pizza-intro .concept-kicker { margin-bottom: 15px; color: #8c392a; }
.pizza-intro h3 { color: #78271e; }
.pizza-intro h3 em { font-weight: 400; }
.pizza-intro p { margin: 16px 0 20px; }
.pizza-feature figure { min-height: 295px; }
.pizza-feature img { position: absolute; inset: 0; object-position: 62% center; }
.pizza-feature figcaption { position: absolute; right: 14px; bottom: 14px; padding: 7px 11px; background: #fcf4e6; color: #78271e; font: italic 15px Georgia, serif; transform: rotate(-4deg); }
.pizza-menu { border-top: 5px solid #972d24; padding: 17px 24px 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 20px; }
.pizza-menu > .concept-kicker { grid-column: 1 / -1; color: #972d24; }
.pizza-menu > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.pizza-menu strong { font-size: 12px; }
.pizza-menu div span { grid-column: 1; font-size: 10px; color: #645a4d; }
.pizza-menu b { grid-column: 2; grid-row: 1; font-size: 12px; color: #972d24; }

/* Sam's: a bright street-food poster with a bold menu strip. */
.concept-tacos { --concept-color: #153e34; background: #ffd759; color: #153e34; }
.taco-masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 23px; background: #153e34; color: #fff4c3; }
.taco-masthead strong { font-family: var(--display); font-size: 27px; font-weight: 400; }
.taco-masthead span, .taco-masthead b { font-size: 9px; letter-spacing: .07em; }
.taco-masthead b { border-bottom: 1px solid #fff4c3; padding-bottom: 4px; }
.taco-feature { display: grid; grid-template-columns: 46% 54%; align-items: center; padding: 26px; gap: 0; }
.taco-photo { position: relative; aspect-ratio: 1; margin-right: 20px; }
.taco-photo img { border-radius: 50%; border: 5px solid #153e34; }
.taco-sticker { position: absolute; bottom: 0; right: -7px; display: grid; place-content: center; width: 70px; height: 70px; border-radius: 50%; border: 2px solid #153e34; background: #ee7041; font: 22px/.9 var(--display); text-align: center; transform: rotate(12deg); }
.taco-intro .concept-kicker { margin-bottom: 14px; }
.taco-intro h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(43px, 8.6cqw, 74px); line-height: .88; }
.taco-intro p { margin: 15px 0; }
.taco-menu { display: grid; grid-template-columns: repeat(3, 1fr); background: #ee7041; border-top: 2px solid #153e34; }
.taco-menu > div { padding: 15px 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.taco-menu > div + div { border-left: 2px solid #153e34; }
.taco-menu span { grid-column: 1/-1; font-size: 8px; letter-spacing: .09em; font-weight: 700; }
.taco-menu strong { font-size: 14px; }
.taco-menu b { font-size: 14px; }

/* Apex: a practical service desk, with a request panel beside the shop. */
.concept-auto { --concept-color: #205dc7; background: #151e2b; color: #f5f7fc; }
.auto-masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 5px solid #477fe3; }
.auto-masthead strong { font: italic 700 clamp(18px, 3.1cqw, 28px)/1 "Source Sans 3", sans-serif; text-transform: uppercase; letter-spacing: -.06em; }
.auto-masthead span { max-width: 170px; font-size: 9px; letter-spacing: .08em; text-align: right; }
.auto-feature { display: grid; grid-template-columns: 54% 46%; }
.auto-photo { position: relative; min-height: 342px; }
.auto-photo img { position: absolute; inset: 0; object-position: 50% center; }
.auto-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, #101823); }
.auto-photo > div { position: absolute; bottom: 25px; left: 24px; right: 18px; z-index: 1; }
.auto-photo h3 { margin-top: 10px; font-family: "Source Sans 3", sans-serif; font-size: clamp(30px, 5.2cqw, 46px); font-weight: 800; }
.auto-request { padding: 23px 25px; background: #f4f6fa; color: #172337; }
.auto-request .concept-kicker { color: #295fad; margin-bottom: 12px; }
.auto-request h4 { font-weight: 800; }
.auto-request p { margin: 10px 0 15px; color: #475469; }
.concept-field { margin-bottom: 10px; }
.concept-field small { display: block; font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.concept-field > span { display: flex; justify-content: space-between; padding: 9px; background: #fff; border: 1px solid #a6b4c9; font-size: 11px; color: #576578; }
.auto-request .concept-cta { width: 100%; margin-top: 4px; }
.auto-note { display: block; margin-top: 8px; font-size: 9px; color: #566173; }
.auto-services { display: grid; grid-template-columns: repeat(3, 1fr); padding: 17px 24px; gap: 12px; font-size: 11px; }
.auto-services b { margin-right: 7px; color: #8db8ff; font: 10px monospace; }

/* City Fades: intimate photography, warm brass and an appointment menu. */
.concept-barber { --concept-color: #dfc09a; background: #201c19; color: #f2dfc5; }
.barber-masthead { display: flex; align-items: center; gap: 12px; padding: 15px 25px; border-bottom: 1px solid #665342; }
.barber-monogram { border: 1px solid #bf9670; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font: 15px Georgia, serif; }
.barber-masthead strong { font: 17px Georgia, serif; }
.barber-masthead > span:last-child { margin-left: auto; font-size: 8px; letter-spacing: .13em; }
.barber-feature { display: grid; grid-template-columns: 49% 51%; }
.barber-photo { position: relative; min-height: 350px; }
.barber-photo img { position: absolute; inset: 0; object-position: 35% center; }
.barber-photo > span { position: absolute; left: 17px; right: 17px; bottom: 20px; font-size: 8px; letter-spacing: .13em; text-align: center; }
.barber-intro { padding: 27px; }
.barber-intro .concept-kicker { font-size: 9px; color: #d7b994; margin-bottom: 16px; }
.barber-intro h3 { font-size: clamp(30px, 4.8cqw, 43px); }
.barber-intro h3 em { color: #dfb68c; }
.barber-menu { margin: 18px 0; }
.barber-menu > div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid #695442; font-size: 12px; }
.barber-menu small { font-size: 9px; color: #c0a991; padding-left: 7px; }
.barber-intro .concept-cta { color: #201c19; width: 100%; }
.barber-footer { border-top: 1px solid #665342; display: flex; justify-content: space-between; gap: 14px; padding: 15px 24px; font-size: 8px; letter-spacing: .09em; }

/* Harbor & Pine: a calm editorial storefront with collection navigation. */
.concept-retail { --concept-color: #364e3d; background: #f5f3eb; color: #2e4135; }
.retail-masthead { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px; border-bottom: 1px solid #c4cabb; }
.retail-masthead strong { font: 24px/1 Georgia, serif; letter-spacing: -.05em; }
.retail-masthead > span { font-size: 8px; letter-spacing: .07em; max-width: 95px; }
.retail-title { text-align: center; padding: 21px 20px; }
.retail-title h3 { font-size: clamp(26px, 4.6cqw, 40px); margin-top: 7px; }
.retail-title .concept-kicker { font-size: 9px; }
.retail-collection { display: grid; grid-template-columns: 57% 43%; padding: 0 24px 24px; gap: 0; }
.retail-collection figure { min-height: 265px; }
.retail-collection img { position: absolute; inset: 0; }
.retail-collection figcaption { position: absolute; bottom: 0; inset-inline: 0; background: #1a3026e8; padding: 15px; color: #fff7e9; }
.retail-collection figcaption span { display: block; font-size: 8px; letter-spacing: .1em; }
.retail-collection figcaption strong { font: 19px Georgia, serif; display: block; margin-top: 5px; }
.retail-categories { padding: 0 0 0 24px; display: flex; flex-direction: column; justify-content: space-between; }
.retail-categories > div { position: relative; padding: 0 0 14px; }
.retail-categories > div > span { font: 10px monospace; color: #596d55; }
.retail-categories h4 { font: 23px/1.1 Georgia, serif; margin: 6px 0; }
.retail-categories p { font-size: 11px; margin-bottom: 9px; }
.retail-categories b { font-size: 8px; letter-spacing: .07em; border-bottom: 1px solid #788672; padding-bottom: 3px; }
.retail-categories .concept-cta { font-size: 10px; gap: 10px; }
.retail-footer { display: flex; justify-content: space-between; gap: 10px; padding: 13px 24px; border-top: 1px solid #c4cabb; font-size: 8px; letter-spacing: .08em; }

/* Northline: architectural project storytelling with a service index. */
.concept-contractor { --concept-color: #bb4b25; background: #fff; color: #233747; }
.contractor-masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 23px; border-bottom: 1px solid #b8c3ca; }
.contractor-masthead strong { font: 700 18px/1 "Source Sans 3", sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.contractor-masthead > span { font-size: 8px; letter-spacing: .04em; }
.contractor-feature { display: grid; grid-template-columns: 43% 57%; }
.contractor-index { padding: 30px 23px; background: #213747; color: #fff7eb; }
.contractor-index .concept-kicker { color: #e5b799; font-size: 9px; margin-bottom: 18px; }
.contractor-index h3 { font: 600 clamp(30px, 4.8cqw, 42px)/1.02 "Source Sans 3", sans-serif; }
.contractor-index p { color: #ced7db; margin-top: 14px; }
.contractor-index > div { margin: 20px 0; }
.contractor-index > div span { display: block; padding: 7px 0; border-bottom: 1px solid #576c78; font-size: 10px; }
.contractor-index .concept-cta { font-size: 10px; gap: 9px; }
.contractor-project figure { height: 239px; }
.contractor-project img { object-position: center; }
.contractor-project figcaption { position: absolute; bottom: 0; left: 0; padding: 8px 12px; background: #fff; color: #233747; font-size: 8px; letter-spacing: .05em; }
.contractor-project-copy { padding: 20px 24px; }
.contractor-project-copy .concept-kicker { color: #a84222; font-size: 9px; }
.contractor-project-copy h4 { margin: 8px 0; font: 30px Georgia, serif; }
.contractor-project-copy p { font-size: 12px; }
.contractor-tags { display: block; margin-top: 15px; font-size: 8px; letter-spacing: .03em; font-weight: 700; }

/* Each small device carries the same brand and a relevant customer flow. */
.concept-mobile { --mobile-accent: #972d24; font-family: "Source Sans 3", sans-serif; line-height: 1.3; color: #362d25; background: #fcf4e6; }
.mobile-brand { display: block; padding: 12px 8px; font: bold 15px/1.1 Georgia, serif; text-align: center; }
.concept-mobile > img { display: block; width: 100%; height: 112px; object-fit: cover; }
.mobile-content { padding: 12px; }
.concept-mobile h4 { font: 23px/1 Georgia, serif; margin-bottom: 11px; }
.mobile-content p { display: flex; justify-content: space-between; gap: 5px; padding: 7px 0; border-bottom: 1px solid #c8b8a6; font-size: 9px; }
.mobile-cta { display: block; padding: 10px 5px; margin-top: 10px; background: var(--mobile-accent); color: #fff; font-size: 9px; font-weight: 700; text-align: center; }
.mobile-tacos { --mobile-accent: #153e34; color: #153e34; background: #ffd759; }
.mobile-tacos .mobile-brand { font: 22px var(--display); background: #153e34; color: #ffd759; }
.mobile-tacos h4 { font: 36px/.87 var(--display); text-align: center; margin: 13px 8px; }
.mobile-tacos > img { margin: 0 auto; width: 126px; height: 126px; border-radius: 50%; border: 3px solid #153e34; }
.mobile-auto { --mobile-accent: #205dc7; background: #f4f6fa; color: #172337; }
.mobile-auto .mobile-brand { background: #151e2b; color: #fff; font: italic 800 17px "Source Sans 3", sans-serif; }
.mobile-auto h4 { font: 800 22px/.95 "Source Sans 3", sans-serif; }
.mobile-auto p.mobile-field { padding: 8px; margin-top: 6px; border: 1px solid #a6b4c9; background: #fff; }
.mobile-barber { --mobile-accent: #dfc09a; background: #201c19; color: #f2dfc5; }
.mobile-barber .mobile-brand { font-weight: 400; letter-spacing: .08em; border-bottom: 1px solid #695442; }
.mobile-barber p { border-color: #695442; }
.mobile-barber h4 em { color: #dfb68c; }
.mobile-barber .mobile-cta { color: #201c19; }
.mobile-retail { --mobile-accent: #364e3d; background: #f5f3eb; color: #2e4135; }
.mobile-retail .mobile-brand { font-weight: 400; border-bottom: 1px solid #c4cabb; }
.mobile-retail h4 { margin-bottom: 0; font-size: 19px; }
.mobile-retail .mobile-content p { border-color: #c4cabb; }
.mobile-contractor { --mobile-accent: #bb4b25; background: #213747; color: #fff7eb; }
.mobile-contractor .mobile-brand { font: 700 12px "Source Sans 3", sans-serif; background: #fff; color: #213747; }
.mobile-contractor small { display: block; color: #e5b799; font-size: 7px; letter-spacing: .07em; margin-bottom: 8px; }
.mobile-contractor h4 { font: 600 24px/1 "Source Sans 3", sans-serif; margin: 0; }
.mobile-contractor p { border-color: #576c78; }

@container (max-width: 540px) {
  .pizza-masthead { padding: 15px; }
  .pizza-masthead .concept-small { display: none; }
  .pizza-masthead strong { font-size: 25px; margin: auto; }
  .pizza-feature { grid-template-columns: 1fr; }
  .pizza-feature figure { min-height: 195px; grid-row: 1; }
  .pizza-intro { padding: 23px; }
  .pizza-intro h3 { font-size: 41px; }
  .pizza-menu { grid-template-columns: 1fr; gap: 12px; }
  .pizza-menu > div { border-bottom: 1px solid #d2bc9f; padding-bottom: 9px; }
  .pizza-menu strong { font-size: 13px; }
  .taco-masthead { padding: 13px 18px; }
  .taco-masthead span { display: none; }
  .taco-masthead strong { font-size: 25px; }
  .taco-feature { grid-template-columns: 1fr; padding: 23px; }
  .taco-photo { width: 190px; margin: 0 auto 22px; }
  .taco-sticker { width: 57px; height: 57px; font-size: 19px; }
  .taco-intro { text-align: center; }
  .taco-intro h3 { font-size: 59px; }
  .taco-intro .concept-kicker { font-size: 9px; }
  .taco-menu { grid-template-columns: 1fr; }
  .taco-menu > div { padding: 12px 20px; }
  .taco-menu > div + div { border-left: 0; border-top: 1px solid #153e34; }
  .auto-masthead span { display: none; }
  .auto-masthead strong { font-size: 24px; }
  .auto-feature { grid-template-columns: 1fr; }
  .auto-photo { min-height: 220px; }
  .auto-photo h3 { font-size: 37px; }
  .auto-request { padding: 23px; }
  .auto-request h4 { font-size: 26px; }
  .auto-services { grid-template-columns: 1fr; gap: 10px; font-size: 12px; }
  .barber-masthead > span:last-child { display: none; }
  .barber-feature { grid-template-columns: 1fr; }
  .barber-photo { min-height: 220px; }
  .barber-intro { padding: 25px; }
  .barber-intro h3 { font-size: 39px; }
  .barber-menu > div { font-size: 13px; }
  .barber-footer { flex-wrap: wrap; }
  .retail-masthead { justify-content: center; padding: 21px 15px; }
  .retail-masthead > span { display: none; }
  .retail-masthead strong { font-size: 25px; }
  .retail-title h3 { font-size: 32px; }
  .retail-collection { grid-template-columns: 1fr; padding: 0 18px 22px; }
  .retail-collection figure { min-height: 225px; }
  .retail-categories { padding: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .retail-categories h4 { font-size: 20px; }
  .retail-categories .concept-cta { grid-column: 1/-1; }
  .retail-footer { flex-wrap: wrap; padding-inline: 18px; }
  .contractor-masthead > span { display: none; }
  .contractor-masthead strong { font-size: 22px; }
  .contractor-feature { grid-template-columns: 1fr; }
  .contractor-index { padding: 26px 23px; }
  .contractor-index h3 { font-size: 41px; }
  .contractor-index > div { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .contractor-project figure { height: 215px; }
  .concept-site p { font-size: 14px; }
  .concept-cta.preview-action { font-size: 12px; min-height: 42px; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .work-layout { grid-template-columns: 1fr; }
  .demo-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .preview-stage { grid-template-columns: minmax(0, 1fr); }
  .preview-stage .phone-shell { display: none; }
}

@media (max-width: 700px) {
  /* The main frame is already a phone-width design; avoid a second device covering it. */
  .preview-stage { display: block; padding-bottom: 0; }
  .preview-selection { margin-top: 1.5rem; }
  .showcase-stamp { width: 62px; height: 62px; top: -2rem; }
}