/* # Studio — shared design system for the redesigned layouts (city + service×city landing pages, Our Process, Get a Free Quote). Same language as the homepage: deep-green hero with coral glows on the right, badge chips, icon cards, coral CTA band. Markup helpers live in functions/studio.php. Scroll reveals: add .st-reveal (driven by ML_MOTION in scripts/ml.js + styles/ml_motion.css); icon chips (.st-icon) get the shimmer. px + explicit line-heights throughout (html{font-size:0}). -------------------------------------------------------------------------------*/ #hero.studio { --st-coral:#F8444F; --st-coral-deep:#E7164F; --st-ink:#0b2b2c; --st-text:#4a5a5c; --st-dark:#04191a; font-family:'DM Sans', sans-serif; text-align:left; } #hero.studio .st-core { max-width:1240px; margin:0 auto; position:relative; } /* Hero -------------------------------------------------------------------------------*/ #hero.studio .st-hero { padding:148px 24px 104px; overflow:hidden; position:relative; background:#04282d; color:#FFF; } #hero.studio .st-hero--compact { padding:132px 24px 84px; } #hero.studio .st-hero::before, #hero.studio .st-hero::after { z-index:0; position:absolute; top:-25%; right:-25%; bottom:-25%; left:-25%; content:''; pointer-events:none; } #hero.studio .st-hero::before { z-index:1; top:0; right:0; bottom:0; left:0; background-image:linear-gradient(RGBA(255,255,255, .06) 1px, transparent 1px), linear-gradient(90deg, RGBA(255,255,255, .06) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 45%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 70% 45%, #000 0%, transparent 75%); } #hero.studio .st-hero::after { background:radial-gradient(ellipse 28% 34% at 65% 46%, RGBA(248,68,79, .22) 0%, RGBA(248,68,79, 0) 70%), linear-gradient(118deg, #04282d 0%, #05261f 42%, #3a0c26 78%, #5a0f2c 100%); animation:st-split 22s ease-in-out infinite alternate; } #hero.studio .st-hero > .st-core { z-index:2; } @media (max-width: 699px) { #hero.studio .st-hero, #hero.studio .st-hero--compact { padding:112px 18px 72px; } } #hero.studio .st-hero__grid { display:grid; gap:56px; grid-template-columns:1.05fr .95fr; align-items:center; } #hero.studio .st-hero__grid--solo { grid-template-columns:minmax(0, 860px); } @media (max-width: 999px) { #hero.studio .st-hero__grid { gap:44px; grid-template-columns:1fr; } } #hero.studio .st-badge { margin:0 0 20px; padding:5px 15px 5px 13px; background:RGBA(255,255,255, .045); border:1px solid RGBA(255,255,255, .13); border-radius:999px; display:inline-flex; gap:9px; align-items:center; white-space:nowrap; line-height:1; font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:#cfe3e0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #hero.studio .st-badge::before { width:8px; height:8px; flex:0 0 auto; background:#4ad991; border-radius:50%; content:''; animation:st-ping 2.4s ease-out infinite; } #hero.studio .st-hero h1 { margin:0; line-height:1; font-family:'DM Sans', sans-serif; font-size:64px; font-weight:500; letter-spacing:-0.02em; color:#FFF; text-wrap:balance; } #hero.studio .st-hero h1 em { font-style:normal; color:var(--st-coral); } @media (max-width: 699px) { #hero.studio .st-hero h1 { font-size:42px; line-height:1.04; } } #hero.studio .st-lede { max-width:620px; margin:22px 0 0; line-height:1.6; font-size:19px; color:#d5e4e2; text-wrap:pretty; } #hero.studio .st-lede a { color:#78BDC4; text-decoration:none; border-bottom:1px solid RGBA(120,189,196, .35); } #hero.studio .st-lede a:hover { border-bottom-color:#78BDC4; } #hero.studio .st-lede strong { color:#FFF; font-weight:600; } #hero.studio .st-hero__meta { margin:22px 0 0; line-height:1.5; font-size:14px; color:#9fb4b2; } #hero.studio .st-hero__meta strong { color:#e2ecea; font-weight:600; } /* Buttons ---------------------------------------------------------------------------*/ #hero.studio .st-actions { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; } #hero.studio .st-btn { padding:16px 24px; background:linear-gradient(135deg, #E8054C 0%, #c4003d 100%); border:1px solid RGBA(255,255,255, .14); border-radius:10px; box-shadow:0 12px 28px -12px RGBA(231,22,79, .7); display:inline-flex; gap:10px; align-items:center; line-height:1; font-size:15px; font-weight:700; letter-spacing:.4px; color:#FFF; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; } #hero.studio .st-btn:hover { transform:translateY(-3px); box-shadow:0 18px 34px -14px RGBA(231,22,79, .75); } #hero.studio .st-btn::after { content:'\f061'; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:13px; transition:transform .25s ease; } #hero.studio .st-btn:hover::after { transform:translateX(4px); } #hero.studio .st-btn--ghost { background:RGBA(255,255,255, .05); border-color:RGBA(255,255,255, .28); box-shadow:none; } #hero.studio .st-btn--ghost:hover { background:RGBA(255,255,255, .12); border-color:RGBA(255,255,255, .5); box-shadow:none; } #hero.studio .st-btn--ghost::after { content:none; } #hero.studio .st-btn--light { background:#FFF; border-color:transparent; box-shadow:0 12px 28px -14px RGBA(0,0,0, .45); color:#c4003d; } #hero.studio .st-btn--light:hover { background:#022122; color:#FFF; } /* Glass panel (hero aside) ---------------------------------------------------------------------------*/ #hero.studio .st-panel { padding:28px; background:RGBA(255,255,255, .045); border:1px solid RGBA(255,255,255, .12); border-radius:16px; box-shadow:0 40px 80px -40px RGBA(0,0,0, .7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } #hero.studio .st-panel__title { margin:0 0 18px; line-height:1.3; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#9fc9c4; } #hero.studio .st-facts { margin:0; padding:0; list-style:none; } #hero.studio .st-facts li { padding:14px 0; border-top:1px solid RGBA(255,255,255, .08); display:grid; gap:14px; grid-template-columns:40px 1fr; align-items:center; } #hero.studio .st-facts li:first-child { padding-top:0; border-top:0; } #hero.studio .st-facts strong { display:block; line-height:1.3; font-size:15.5px; font-weight:600; color:#FFF; } #hero.studio .st-facts span { margin-top:2px; display:block; line-height:1.45; font-size:13.5px; color:#a9bfbc; } #hero.studio .st-facts a { color:inherit; text-decoration:none; } #hero.studio .st-facts a:hover strong { color:var(--st-coral); } /* Browser frame (work cycler — slides driven by scripts/ml.js) ---------------------------------------------------------------------------*/ #hero.studio .st-frame { overflow:hidden; background:#0b1a1b; border:1px solid RGBA(255,255,255, .12); border-radius:12px; box-shadow:0 44px 90px -34px RGBA(0,0,0, .85); display:block; text-decoration:none; transition:transform .35s ease, box-shadow .35s ease; } #hero.studio .st-frame:hover { transform:translateY(-4px); box-shadow:0 56px 104px -34px RGBA(0,0,0, .9); } #hero.studio .st-frame__bar { height:36px; padding:0 15px; background:#0b1a1b; border-bottom:1px solid RGBA(255,255,255, .08); display:flex; gap:7px; align-items:center; } #hero.studio .st-frame__bar i { width:11px; height:11px; border-radius:50%; display:block; } #hero.studio .st-frame__bar i:nth-child(1) { background:#ff5f57; } #hero.studio .st-frame__bar i:nth-child(2) { background:#febc2e; } #hero.studio .st-frame__bar i:nth-child(3) { background:#28c840; } #hero.studio .st-frame__stage { aspect-ratio:3/2; overflow:hidden; position:relative; background:#0b1a1b; display:block; } #hero.studio .st-frame .sc-hero-media__slide { width:100%; height:100%; top:0; left:0; position:absolute; object-fit:cover; object-position:50% 0; opacity:0; transition:opacity .9s ease; } #hero.studio .st-frame .sc-hero-media__slide.is-active { opacity:1; } @media (max-width: 999px) { #hero.studio .st-hero__aside { max-width:560px; } } /* Sections + heads -------------------------------------------------------------------------------*/ #hero.studio .st-section { padding:104px 24px; position:relative; background:#FFF; } #hero.studio .st-section--tint { background:linear-gradient(180deg, #F3F7F6 0%, #FCFCFC 100%); } #hero.studio .st-section--dark { background:linear-gradient(180deg, #04191a 0%, #021315 100%); color:#FFF; } @media (max-width: 699px) { #hero.studio .st-section { padding:72px 18px; } } #hero.studio .st-head { max-width:760px; margin:0 auto 56px; text-align:center; } #hero.studio .st-head--left { margin-left:0; text-align:left; } #hero.studio .st-eyebrow { margin:0 0 14px; line-height:1.3; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--st-coral-deep); } #hero.studio .st-section--dark .st-eyebrow { color:var(--st-coral); } #hero.studio .st-head h2, #hero.studio .st-h2 { margin:0; line-height:1.07; font-family:'DM Sans', sans-serif; font-size:48px; font-weight:600; letter-spacing:-0.02em; color:var(--st-ink); text-wrap:balance; } #hero.studio .st-head h2 em, #hero.studio .st-h2 em { font-style:normal; color:var(--st-coral-deep); } #hero.studio .st-section--dark .st-head h2 { color:#FFF; } #hero.studio .st-section--dark .st-head h2 em { color:var(--st-coral); } @media (max-width: 599px) { #hero.studio .st-head h2, #hero.studio .st-h2 { font-size:34px; } } #hero.studio .st-head p { margin:18px auto 0; line-height:1.6; font-size:18px; color:var(--st-text); text-wrap:pretty; } #hero.studio .st-head--left p { margin-left:0; } #hero.studio .st-section--dark .st-head p { color:#9fb4b2; } #hero.studio .st-head p strong { font-weight:600; color:var(--st-ink); } #hero.studio .st-foot { margin:40px 0 0; text-align:center; line-height:1.6; font-size:15px; color:var(--st-text); } #hero.studio .st-foot a { font-weight:600; color:var(--st-coral-deep); text-decoration:none; border-bottom:1px solid RGBA(231,22,79, .3); } #hero.studio .st-foot a:hover { border-bottom-color:var(--st-coral-deep); } /* Card grid -------------------------------------------------------------------------------*/ #hero.studio .st-grid { margin:0; padding:0; display:grid; gap:22px; grid-template-columns:repeat(3, 1fr); list-style:none; } #hero.studio .st-grid--2 { grid-template-columns:repeat(2, 1fr); } #hero.studio .st-grid--4 { grid-template-columns:repeat(4, 1fr); } @media (max-width: 1099px) { #hero.studio .st-grid--4 { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 899px) { #hero.studio .st-grid, #hero.studio .st-grid--2 { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 599px) { #hero.studio .st-grid, #hero.studio .st-grid--2, #hero.studio .st-grid--4 { grid-template-columns:1fr; } } #hero.studio .st-card { padding:30px 26px 26px; overflow:hidden; position:relative; background:#FFF; border:1px solid #e1e9e7; border-radius:16px; box-shadow:0 1px 2px RGBA(2,33,34, .04); display:flex; flex-direction:column; text-align:left; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } #hero.studio .st-card::before { height:3px; top:0; right:0; left:0; position:absolute; background:linear-gradient(90deg, #E8054C, #F8444F); content:''; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } #hero.studio .st-card:hover { transform:translateY(-6px); border-color:#d3e0dd; box-shadow:0 30px 54px -32px RGBA(2,33,34, .38); } #hero.studio .st-card:hover::before { transform:scaleX(1); } #hero.studio .st-section--dark .st-card { background:#0b2324; border-color:RGBA(120,189,196, .14); box-shadow:none; } #hero.studio .st-section--dark .st-card:hover { border-color:RGBA(248,68,79, .4); box-shadow:0 30px 60px -30px RGBA(0,0,0, .8); } #hero.studio .st-icon { width:52px; height:52px; margin-bottom:22px; position:relative; background:linear-gradient(135deg, #E8054C 0%, #c4003d 100%); border-radius:12px; box-shadow:0 10px 22px -10px RGBA(231,22,79, .6); display:flex; flex:0 0 auto; align-items:center; justify-content:center; font-family:'Material Symbols Outlined'; font-style:normal; font-weight:400; font-size:28px; line-height:1; color:#FFF; text-transform:none; letter-spacing:normal; white-space:nowrap; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; } #hero.studio .st-icon--sm { width:40px; height:40px; margin:0; border-radius:10px; font-size:22px; } #hero.studio .st-icon--teal { background:linear-gradient(135deg, #1f8f84 0%, #13665e 100%); box-shadow:0 10px 22px -10px RGBA(19,102,94, .6); } #hero.studio .st-card h3 { margin:0 0 8px; line-height:1.25; font-family:'DM Sans', sans-serif; font-size:21px; font-weight:600; letter-spacing:-0.01em; text-transform:none; color:var(--st-ink); } #hero.studio .st-section--dark .st-card h3 { color:#FFF; } #hero.studio .st-card p { margin:0 0 18px; flex:1 0 auto; line-height:1.6; font-size:15px; color:#5b6b6d; } #hero.studio .st-section--dark .st-card p { color:#a9bfbc; } #hero.studio .st-card p strong { font-weight:600; color:var(--st-ink); } #hero.studio .st-card__meta { margin:-6px 0 18px; line-height:1.3; font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--st-coral-deep); } #hero.studio .st-card__link { margin-top:auto; display:inline-flex; gap:6px; align-items:center; align-self:flex-start; line-height:1.3; font-size:14px; font-weight:600; letter-spacing:.2px; color:var(--st-ink); text-decoration:none; transition:color .25s ease, gap .25s ease; } #hero.studio .st-card__link::after { content:'\f061'; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px; } #hero.studio .st-card__link:hover { gap:10px; color:var(--st-coral-deep); } #hero.studio .st-section--dark .st-card__link { color:#78BDC4; } /* Whole-card link variant */ #hero.studio a.st-card { color:inherit; text-decoration:none; } #hero.studio a.st-card:hover .st-card__link { gap:10px; color:var(--st-coral-deep); } /* Prose + sticky aside (long-form local content) -------------------------------------------------------------------------------*/ #hero.studio .st-split { display:grid; gap:64px; grid-template-columns:minmax(0, 1fr) 360px; align-items:start; } @media (max-width: 999px) { #hero.studio .st-split { gap:40px; grid-template-columns:1fr; } } #hero.studio .st-sticky { top:96px; position:sticky; } @media (max-width: 999px) { #hero.studio .st-sticky { position:static; } } #hero.studio .st-prose { max-width:720px; line-height:1.75; font-size:17.5px; color:#3c4d50; } #hero.studio .st-prose > *:first-child { margin-top:0; } #hero.studio .st-prose p { margin:0 0 20px; line-height:1.75; font-size:17.5px; color:#3c4d50; } #hero.studio .st-prose h2 { margin:44px 0 16px; line-height:1.15; font-family:'DM Sans', sans-serif; font-size:34px; font-weight:600; letter-spacing:-0.02em; color:var(--st-ink); } #hero.studio .st-prose h3 { margin:36px 0 12px; line-height:1.25; font-family:'DM Sans', sans-serif; font-size:24px; font-weight:600; color:var(--st-ink); } #hero.studio .st-prose strong { font-weight:600; color:var(--st-ink); } #hero.studio .st-prose a { font-weight:500; color:var(--st-coral-deep); text-decoration:none; border-bottom:1px solid RGBA(231,22,79, .3); } #hero.studio .st-prose a:hover { border-bottom-color:var(--st-coral-deep); } #hero.studio .st-prose ul { margin:0 0 22px; padding:0; list-style:none; } #hero.studio .st-prose ul li { padding:6px 0 6px 28px; position:relative; line-height:1.6; font-size:17px; } #hero.studio .st-prose ul li::before { top:7px; left:0; position:absolute; content:'check'; font-family:'Material Symbols Outlined'; font-size:19px; line-height:1; font-weight:600; color:var(--st-coral-deep); text-transform:none; font-feature-settings:'liga'; } #hero.studio .st-prose blockquote, #hero.studio .st-prose .wp-block-pullquote { margin:32px 0; padding:4px 0 4px 24px; border-left:3px solid var(--st-coral); line-height:1.6; font-size:20px; font-weight:500; color:var(--st-ink); } /* Light facts card (sticky aside on light sections) */ #hero.studio .st-aside { padding:28px; background:#FFF; border:1px solid #e1e9e7; border-radius:16px; box-shadow:0 30px 60px -40px RGBA(2,33,34, .35); } #hero.studio .st-aside .st-panel__title { color:#6b7a79; } #hero.studio .st-aside .st-facts li { border-top-color:#eef3f2; } #hero.studio .st-aside .st-facts strong { color:var(--st-ink); } #hero.studio .st-aside .st-facts span { color:#6b7a79; } #hero.studio .st-aside .st-btn { margin-top:22px; width:100%; justify-content:center; } /* Stat strip -------------------------------------------------------------------------------*/ #hero.studio .st-stats { margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(4, 1fr); list-style:none; } @media (max-width: 799px) { #hero.studio .st-stats { gap:28px; grid-template-columns:repeat(2, 1fr); } } #hero.studio .st-stats li { padding:6px 12px; border-right:1px solid RGBA(20,31,56, .08); text-align:center; } #hero.studio .st-stats li:last-child { border-right:0; } @media (max-width: 799px) { #hero.studio .st-stats li:nth-child(2n) { border-right:0; } } #hero.studio .st-stats b { display:block; line-height:1; font-family:'DM Sans', sans-serif; font-size:52px; font-weight:700; letter-spacing:-0.02em; color:#141F38; } #hero.studio .st-stats b em { margin-left:2px; font-style:normal; font-weight:500; font-size:30px; color:var(--st-coral-deep); } #hero.studio .st-stats span { margin-top:10px; display:block; line-height:1.35; font-size:14.5px; font-weight:600; color:#141F38; } /* City chips -------------------------------------------------------------------------------*/ #hero.studio .st-chips { margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; list-style:none; } #hero.studio .st-chips a { padding:11px 18px 11px 14px; background:#FFF; border:1px solid #dbe5e3; border-radius:999px; display:inline-flex; gap:8px; align-items:center; line-height:1; font-size:15px; font-weight:600; color:var(--st-ink); text-decoration:none; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease; } #hero.studio .st-chips a::before { content:'location_searching'; font-family:'Material Symbols Outlined'; font-weight:400; font-size:18px; line-height:1; color:var(--st-coral-deep); text-transform:none; font-feature-settings:'liga'; } #hero.studio .st-chips a:hover { transform:translateY(-2px); border-color:RGBA(231,22,79, .45); box-shadow:0 12px 24px -16px RGBA(2,33,34, .4); color:var(--st-coral-deep); } #hero.studio .st-chips em { font-style:normal; font-weight:500; font-size:12px; color:#6b7a79; } /* CTA band -------------------------------------------------------------------------------*/ #hero.studio .st-cta { padding:112px 24px; overflow:hidden; position:relative; background:linear-gradient(135deg, #E7164F 0%, #c4003d 100%); text-align:center; color:#FFF; } #hero.studio .st-cta::before { top:0; right:0; bottom:0; left:0; position:absolute; background:url(../images/ui/bg-diag.svg); content:''; opacity:.08; pointer-events:none; } #hero.studio .st-cta .st-core { max-width:860px; } @media (max-width: 599px) { #hero.studio .st-cta { padding:80px 18px; } } #hero.studio .st-cta h2 { margin:0 0 22px; line-height:1.05; font-family:'DM Sans', sans-serif; font-size:60px; font-weight:600; letter-spacing:-0.02em; color:#FFF; text-wrap:balance; } #hero.studio .st-cta h2 span { display:block; color:RGBA(255,255,255, .82); } @media (max-width: 599px) { #hero.studio .st-cta h2 { font-size:38px; } } #hero.studio .st-cta p { max-width:640px; margin:0 auto 36px; line-height:1.65; font-size:18px; color:RGBA(255,255,255, .92); } #hero.studio .st-cta p a { color:#FFF; font-weight:600; text-decoration:underline; text-underline-offset:3px; } #hero.studio .st-cta .st-actions { margin-top:0; justify-content:center; } /* Process timeline -------------------------------------------------------------------------------*/ #hero.studio .st-timeline { max-width:1080px; margin:0 auto; padding:0; position:relative; list-style:none; } #hero.studio .st-timeline::before { width:2px; top:28px; bottom:28px; left:27px; position:absolute; background:linear-gradient(180deg, RGBA(231,22,79, .5), RGBA(31,143,132, .5)); content:''; } #hero.studio .st-phase { padding:0 0 40px 88px; position:relative; scroll-margin-top:100px; } #hero.studio .st-phase:last-child { padding-bottom:0; } @media (max-width: 599px) { #hero.studio .st-timeline::before { left:19px; } #hero.studio .st-phase { padding-left:58px; } } #hero.studio .st-phase__node { width:56px; height:56px; top:0; left:0; z-index:1; position:absolute; background:linear-gradient(135deg, #E8054C 0%, #c4003d 100%); border:4px solid #FFF; border-radius:50%; box-shadow:0 10px 24px -10px RGBA(231,22,79, .7); display:flex; align-items:center; justify-content:center; line-height:1; font-family:'DM Sans', sans-serif; font-size:20px; font-weight:700; color:#FFF; } @media (max-width: 599px) { #hero.studio .st-phase__node { width:40px; height:40px; border-width:3px; font-size:16px; } } #hero.studio .st-phase__card { padding:32px 34px; background:#FFF; border:1px solid #e1e9e7; border-radius:18px; box-shadow:0 30px 60px -44px RGBA(2,33,34, .45); } @media (max-width: 599px) { #hero.studio .st-phase__card { padding:24px 20px; } } #hero.studio .st-phase__top { margin-bottom:14px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; } #hero.studio .st-phase__top h3 { margin:0; line-height:1.2; font-family:'DM Sans', sans-serif; font-size:28px; font-weight:600; letter-spacing:-0.01em; color:var(--st-ink); } #hero.studio .st-pill { padding:7px 12px; background:#eef6f4; border:1px solid #d6e7e3; border-radius:999px; display:inline-flex; gap:6px; align-items:center; line-height:1; font-size:13px; font-weight:600; color:#13665e; } #hero.studio .st-pill::before { content:'event_upcoming'; font-family:'Material Symbols Outlined'; font-size:16px; font-weight:400; line-height:1; text-transform:none; font-feature-settings:'liga'; } #hero.studio .st-phase__summary { margin:0 0 24px; line-height:1.7; font-size:17px; color:#3c4d50; } #hero.studio .st-phase__cols { display:grid; gap:20px; grid-template-columns:1fr 1fr; } @media (max-width: 799px) { #hero.studio .st-phase__cols { grid-template-columns:1fr; } } #hero.studio .st-phase__list { padding:20px 22px; background:#F6F9F8; border-radius:12px; } #hero.studio .st-phase__list h4 { margin:0 0 10px; display:flex; gap:8px; align-items:center; line-height:1.3; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#13665e; } #hero.studio .st-phase__list--you h4 { color:var(--st-coral-deep); } #hero.studio .st-phase__list ul { margin:0; padding:0; list-style:none; } #hero.studio .st-phase__list li { padding:6px 0 6px 26px; position:relative; line-height:1.5; font-size:15px; color:#33464a; } #hero.studio .st-phase__list li::before { top:7px; left:0; position:absolute; content:'check'; font-family:'Material Symbols Outlined'; font-size:18px; font-weight:600; line-height:1; color:#1f8f84; text-transform:none; font-feature-settings:'liga'; } #hero.studio .st-phase__list--you li::before { content:'person_search'; font-weight:400; color:var(--st-coral-deep); } #hero.studio .st-phase__output { margin:20px 0 0; padding:16px 18px 16px 52px; position:relative; background:linear-gradient(90deg, RGBA(231,22,79, .07), RGBA(231,22,79, .02)); border:1px solid RGBA(231,22,79, .16); border-radius:12px; line-height:1.55; font-size:15.5px; color:#3c4d50; } #hero.studio .st-phase__output::before { top:15px; left:18px; position:absolute; content:'verified'; font-family:'Material Symbols Outlined'; font-size:22px; line-height:1; color:var(--st-coral-deep); text-transform:none; font-feature-settings:'liga'; } #hero.studio .st-phase__output strong { font-weight:700; color:var(--st-ink); } /* At-a-glance phase list (hero panel) */ #hero.studio .st-glance { margin:0; padding:0; counter-reset:glance; list-style:none; } #hero.studio .st-glance li { border-top:1px solid RGBA(255,255,255, .08); } #hero.studio .st-glance li:first-child { border-top:0; } #hero.studio .st-glance a { padding:13px 0; display:grid; gap:14px; grid-template-columns:34px 1fr auto; align-items:center; color:#FFF; text-decoration:none; } #hero.studio .st-glance li:first-child a { padding-top:0; } #hero.studio .st-glance b { width:34px; height:34px; background:RGBA(248,68,79, .14); border:1px solid RGBA(248,68,79, .4); border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; font-size:14px; font-weight:700; color:#ff8a92; } #hero.studio .st-glance strong { line-height:1.3; font-size:16px; font-weight:600; transition:color .25s ease; } #hero.studio .st-glance span { line-height:1.3; font-size:13px; color:#a9bfbc; white-space:nowrap; } #hero.studio .st-glance a:hover strong { color:var(--st-coral); } /* Motion -------------------------------------------------------------------------------*/ @keyframes st-split { 0% { transform:translate3d(-4%,-3%,0) rotate(-2deg) scale(1); } 50% { transform:translate3d(3%,2%,0) rotate(1deg) scale(1.06); } 100% { transform:translate3d(-2%,4%,0) rotate(2deg) scale(1.03); } } @keyframes st-ping { 0% { box-shadow:0 0 0 0 RGBA(74,217,145, .55); } 70% { box-shadow:0 0 0 8px RGBA(74,217,145, 0); } 100% { box-shadow:0 0 0 0 RGBA(74,217,145, 0); } } @media (prefers-reduced-motion: reduce) { #hero.studio .st-hero::before, #hero.studio .st-hero::after, #hero.studio .st-badge::before { animation:none; } #hero.studio .st-card, #hero.studio .st-btn, #hero.studio .st-frame, #hero.studio .st-chips a { transition:none; } #hero.studio .st-card:hover, #hero.studio .st-btn:hover, #hero.studio .st-frame:hover, #hero.studio .st-chips a:hover { transform:none; } } #hero.studio .st-card h3 small { font-size:13px; font-weight:600; letter-spacing:.4px; color:#6b7a79; } #hero.studio .st-split--even { grid-template-columns:1.1fr .9fr; align-items:center; } #hero.studio .st-split--even .st-head { margin-bottom:0; } #hero.studio .st-stats--2 { grid-template-columns:repeat(2, 1fr); } @media (max-width: 999px) { #hero.studio .st-split--even { grid-template-columns:1fr; } } #hero.studio .screen-reader-text { width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; position:absolute; border:0; clip:rect(0, 0, 0, 0); clip-path:inset(50%); white-space:nowrap; } /* Phones: the hero is tall and narrow, so steepen the split and move the grid and glow down behind the stacked aside, keeping the copy on the dark end. */ @media (max-width: 699px) { #hero.studio .st-hero::before { -webkit-mask-image:radial-gradient(ellipse 90% 40% at 50% 80%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 90% 40% at 50% 80%, #000 0%, transparent 75%); } #hero.studio .st-hero::after { background:radial-gradient(ellipse 50% 22% at 50% 70%, RGBA(248,68,79, .20) 0%, RGBA(248,68,79, 0) 70%), linear-gradient(170deg, #04282d 0%, #05261f 50%, #3a0c26 85%, #5a0f2c 100%); } }