.halcyon-native-portfolio { background: #fff; color: #23303d; }
.halcyon-native-portfolio__container { box-sizing: border-box; margin: 0 auto; max-width: 1180px; padding-left: 28px; padding-right: 28px; }
.halcyon-native-portfolio__hero { background: #172433; color: #fff; padding: 84px 0 72px; }
.halcyon-native-portfolio__hero-grid { align-items: center; display: grid; gap: 52px; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.halcyon-native-portfolio__hero-copy { min-width: 0; }
.halcyon-native-portfolio__eyebrow { color: #ffc72c; font-size: 14px; font-weight: 700; letter-spacing: .14em; margin: 0 0 18px; text-transform: uppercase; }
.halcyon-native-portfolio h1 { color: #fff; font-size: clamp(38px, 5.3vw, 68px); line-height: 1.08; margin: 0; max-width: 880px; }
.halcyon-native-portfolio__summary { color: #d5dce3; font-size: 21px; line-height: 1.65; margin: 28px 0; max-width: 760px; }
.halcyon-native-portfolio__cta { background: #ffc72c; color: #162331; display: inline-block; font-size: 16px; font-weight: 700; padding: 16px 24px; text-decoration: none; }
.halcyon-native-portfolio__hero-media { margin: 0; }
.halcyon-native-portfolio__hero-media img { display: block; height: auto; max-width: 100%; width: 100%; }
.halcyon-native-portfolio__body { padding-bottom: 84px; padding-top: 68px; }
.halcyon-native-portfolio__body > section { border-top: 3px solid #ffc72c; margin: 34px 0; padding: 28px 0 0; }
.halcyon-native-portfolio__body > section h2 { color: #172433; font-size: 32px; line-height: 1.2; margin: 0 0 16px; }
.halcyon-native-portfolio__body > section p { color: #5c6976; font-size: 18px; line-height: 1.75; }
.halcyon-native-portfolio__content { margin-top: 34px; }
.halcyon-native-portfolio__gallery { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
.halcyon-native-portfolio__gallery figure { margin: 0; }
.halcyon-portfolio-detail { color: #23303d; }
.halcyon-portfolio-detail__section { border-top: 3px solid #ffc72c; margin: 54px 0 0; padding-top: 30px; }
.halcyon-portfolio-detail__section:first-child { margin-top: 0; }
.halcyon-portfolio-detail__heading { margin-bottom: 28px; max-width: 900px; }
.halcyon-portfolio-detail h2 { color: #172433; font-size: clamp(30px, 4vw, 42px); line-height: 1.16; margin: 0 0 16px; }
.halcyon-portfolio-detail h3 { color: #172433; font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.halcyon-portfolio-detail p, .halcyon-portfolio-detail li { color: #5c6976; font-size: 17px; line-height: 1.7; }
.halcyon-portfolio-detail p { margin: 0; }
.halcyon-portfolio-detail ul { margin: 18px 0 0; padding-left: 22px; }
.halcyon-portfolio-detail li + li { margin-top: 8px; }
.halcyon-portfolio-detail__grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.halcyon-portfolio-detail__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.halcyon-portfolio-detail__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.halcyon-portfolio-detail__card { border: 1px solid #dbe1e6; box-sizing: border-box; padding: 28px; }
.halcyon-portfolio-detail__feature { display: flex; flex-direction: column; gap: 18px; }
.halcyon-portfolio-detail__feature figure, .halcyon-portfolio-detail__album-item figure { margin: 0; }
.halcyon-portfolio-detail__feature img, .halcyon-portfolio-detail__album-item img { display: block; height: auto; width: 100%; }
.halcyon-portfolio-detail__feature .halcyon-portfolio-detail__card { flex: 1; }
.halcyon-portfolio-detail__steps { counter-reset: portfolio-step; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.halcyon-portfolio-detail__step { border-top: 2px solid #dbe1e6; padding-top: 16px; }
.halcyon-portfolio-detail__step::before { color: #c99510; content: '0' counter(portfolio-step); counter-increment: portfolio-step; display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-bottom: 9px; }
.halcyon-portfolio-detail__album { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.halcyon-portfolio-detail__album-item { border: 1px solid #dbe1e6; margin: 0; }
.halcyon-portfolio-detail__album-item figcaption { padding: 18px 18px 22px; }
.halcyon-portfolio-detail__album-item h3 { font-size: 18px; }
.halcyon-portfolio-detail__album-item p { font-size: 14px; }
.halcyon-portfolio-detail__cta { align-items: center; background: #ffc72c; display: flex; gap: 24px; justify-content: space-between; margin-top: 54px; padding: 30px; }
.halcyon-portfolio-detail__cta h2, .halcyon-portfolio-detail__cta p { color: #172433; }
.halcyon-portfolio-detail__cta h2 { font-size: 28px; margin-bottom: 8px; }
.halcyon-portfolio-detail__cta-copy { max-width: 720px; }
.halcyon-portfolio-detail__cta-link { background: #172433; color: #fff; flex: 0 0 auto; font-weight: 700; padding: 16px 22px; text-decoration: none; }
/*
 * RealFactory's wide-screen navigation is transparently and absolutely
 * positioned above the page wrapper. Reserve its lower search/menu row for
 * the editor-owned Portfolio hero so the page eyebrow and H1 remain clear.
 * The mobile Site UI owns the header below this breakpoint, so it keeps its
 * existing compact hero spacing.
 */
@media (min-width: 1200px) { .halcyon-native-portfolio__hero { padding-top: 118px; } }
@media (max-width: 900px) { .halcyon-native-portfolio__hero-grid { gap: 32px; grid-template-columns: 1fr; } .halcyon-native-portfolio__hero-media { max-width: 680px; } .halcyon-portfolio-detail__grid--four, .halcyon-portfolio-detail__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .halcyon-portfolio-detail__album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .halcyon-native-portfolio__container { padding-left: 24px; padding-right: 24px; } .halcyon-native-portfolio__hero { padding: 58px 0 52px; } .halcyon-native-portfolio__summary { font-size: 18px; } .halcyon-native-portfolio__body { padding-bottom: 56px; padding-top: 42px; } .halcyon-native-portfolio__body > section h2 { font-size: 28px; } .halcyon-native-portfolio__gallery, .halcyon-portfolio-detail__grid, .halcyon-portfolio-detail__grid--four, .halcyon-portfolio-detail__grid--three, .halcyon-portfolio-detail__steps, .halcyon-portfolio-detail__album { grid-template-columns: 1fr; } .halcyon-portfolio-detail__section { margin-top: 44px; padding-top: 24px; } .halcyon-portfolio-detail h2 { font-size: 30px; } .halcyon-portfolio-detail p, .halcyon-portfolio-detail li { font-size: 16px; } .halcyon-portfolio-detail__card { padding: 24px; } .halcyon-portfolio-detail__cta { align-items: stretch; flex-direction: column; padding: 24px; } .halcyon-portfolio-detail__cta-link { text-align: center; } }