/* * Route-scoped light product-studio redesign. * The current portfolio remains unchanged unless has .portfolio-redesign. */ html.portfolio-redesign { color-scheme: light; --studio-canvas: #e8f0f8; --studio-surface: rgba(248, 252, 255, 0.9); --studio-surface-solid: #f9fcff; --studio-surface-muted: #d9e6f2; --studio-ink: #06182f; --studio-muted: #49617a; --studio-navy: #06182f; --studio-navy-raised: #0d2d4d; --studio-blue: #0868ff; --studio-cyan: #18c6d9; --studio-lime: #a8e82e; --studio-border: rgba(25, 69, 111, 0.2); --studio-border-strong: rgba(8, 104, 255, 0.48); --studio-ring: #0868ff; --studio-shadow: 0 28px 72px rgba(6, 24, 47, 0.16); --studio-shadow-soft: 0 14px 34px rgba(6, 24, 47, 0.11); --studio-sq-sm: 12px; --studio-sq-md: 18px; --studio-sq-lg: 28px; --studio-sq-xl: 38px; --studio-page: min(100% - 32px, 1440px); background: var(--studio-canvas); scroll-padding-top: 104px; } html.portfolio-redesign body { min-width: 0; color: var(--studio-ink); background: linear-gradient(rgba(16, 66, 111, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 66, 111, 0.055) 1px, transparent 1px), radial-gradient(circle at 82% 8%, rgba(24, 198, 217, 0.2), transparent 28rem), var(--studio-canvas); background-size: 40px 40px, 40px 40px, auto, auto; font-family: "Instrument Sans", system-ui, sans-serif; overflow-x: clip; } html.portfolio-redesign .orientation-lock-shell { background: transparent; } html.portfolio-redesign :where( .site-header, .nav-drawer, .orientation-guard-card, .hero-capability-dock, .hero-capability-chip, .glass-card, .cliniqlo-showcase, .cliniqlo-benefits article, .cliniqlo-visual, .cliniqlo-mockup, .project-card, .media-frame, .download-card, .dashboard-panel, .kpi-grid > span, .contact-card, .button, .email-button, .report-action-button, .report-dialog-panel, .email-confirm-panel, .media-viewer-panel, .search-field, .search-suggestion, .search-result, input, textarea, select ) { corner-shape: squircle; } html.portfolio-redesign :where(.site-header, .nav-drawer, .cliniqlo-showcase, .report-dialog-panel, .media-viewer-panel) { border-radius: var(--studio-sq-xl); } html.portfolio-redesign :where(.glass-card, .cliniqlo-visual, .project-card, .dashboard-panel, .contact-card, .email-confirm-panel) { border-radius: var(--studio-sq-lg); } html.portfolio-redesign :where(.hero-capability-dock, .cliniqlo-benefits article, .media-frame, .download-card, .kpi-grid > span, .search-field, .search-result) { border-radius: var(--studio-sq-md); } html.portfolio-redesign :where(.button, .email-button, .report-action-button, .hero-capability-chip, .search-suggestion, input, textarea, select) { border-radius: var(--studio-sq-sm); } html.portfolio-redesign :where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--studio-ring) 70%, white); outline-offset: 4px; } html.portfolio-redesign .site-header { position: fixed; z-index: 80; top: 12px; left: max(16px, calc((100vw - 1440px) / 2)); right: max(16px, calc((100vw - 1440px) / 2)); width: auto; max-width: none; margin: 0; min-height: 68px; padding: 10px 12px 10px 16px; border: 1px solid var(--studio-border); color: white; background: rgba(6, 24, 47, 0.92); box-shadow: 0 16px 44px rgba(6, 24, 47, 0.24); transform: none; -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); } html.portfolio-redesign .site-header::before { display: none; } html.portfolio-redesign .brand { gap: 10px; } html.portfolio-redesign .brand-logo { width: 52px; height: 44px; } html.portfolio-redesign .brand-logo img { width: 52px; height: 44px; object-fit: contain; } html.portfolio-redesign .brand-name { display: inline-flex; min-height: 44px; align-items: center; color: white; font-weight: 700; } html.portfolio-redesign .header-descriptor a { display: inline-flex; min-height: 44px; align-items: center; color: rgba(255, 255, 255, 0.74); font-size: 0.82rem; letter-spacing: 0.01em; } html.portfolio-redesign .header-actions { gap: 6px; } html.portfolio-redesign :where(.icon-trigger, .nav-trigger, .header-cta) { width: 46px; height: 46px; min-width: 46px; border: 1px solid transparent; color: white; background: rgba(255, 255, 255, 0.08); border-radius: 50%; } html.portfolio-redesign :where(.icon-trigger, .nav-trigger, .header-cta):hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); } html.portfolio-redesign .header-cta { color: white; background: linear-gradient(135deg, var(--studio-blue), var(--studio-cyan)); } html.portfolio-redesign .nav-modal { color: var(--studio-ink); } html.portfolio-redesign .nav-skim { background: rgba(7, 22, 47, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.portfolio-redesign .nav-drawer { margin: 12px; max-height: calc(100dvh - 24px); border: 1px solid var(--studio-border); color: var(--studio-ink); background: rgba(255, 255, 255, 0.96); box-shadow: var(--studio-shadow); } html.portfolio-redesign .drawer-kicker, html.portfolio-redesign .section-label, html.portfolio-redesign .hero .eyeline { color: var(--studio-blue); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } html.portfolio-redesign .drawer-nav a { color: var(--studio-ink); background: transparent !important; box-shadow: none !important; } html.portfolio-redesign .drawer-nav a:hover, html.portfolio-redesign .drawer-nav a:focus-visible { color: var(--studio-blue); transform: translateX(8px); } html.portfolio-redesign #main { width: 100%; padding-top: 92px; } html.portfolio-redesign .section { width: var(--studio-page); min-height: auto; margin-inline: auto; padding: 80px 0; color: var(--studio-ink); background: transparent !important; isolation: isolate; } html.portfolio-redesign .section + .section { margin-top: 0; } html.portfolio-redesign .section::before, html.portfolio-redesign .section::after, html.portfolio-redesign .section:not(.contact)::after { display: none !important; } html.portfolio-redesign .section > * { position: relative; z-index: 1; } /* Content remains available without waiting for an observer. Motion is an enhancement on this preview route, never a prerequisite for visibility. */ html.portfolio-redesign .reveal { opacity: 1; transform: none; } html.portfolio-redesign :where(h1, h2, h3, strong) { color: var(--studio-ink); } html.portfolio-redesign :where(p, span) { text-wrap: pretty; } html.portfolio-redesign .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: auto; padding-top: 48px; padding-bottom: 72px; align-content: center; align-items: center; } html.portfolio-redesign .hero-copy { width: 100%; max-width: 690px; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; align-self: center; justify-self: stretch; } html.portfolio-redesign .hero h1 { margin: 8px 0 14px; color: var(--studio-ink); font-size: clamp(4rem, 20vw, 7.5rem); line-height: 0.88; letter-spacing: -0.07em; } html.portfolio-redesign .hero-role { max-width: 23ch; color: var(--studio-navy-raised); font-size: clamp(1.35rem, 5vw, 2.2rem); line-height: 1.12; letter-spacing: -0.035em; } html.portfolio-redesign .button, html.portfolio-redesign .email-button, html.portfolio-redesign .report-action-button { min-height: 48px; padding: 0.8rem 1.1rem; border: 1px solid var(--studio-border); color: var(--studio-ink); background: var(--studio-surface-solid); box-shadow: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease; } html.portfolio-redesign :where(.button, .email-button, .report-action-button):hover { border-color: var(--studio-border-strong); transform: translateY(-2px); box-shadow: var(--studio-shadow-soft); } html.portfolio-redesign :where(.button, .email-button, .report-action-button):active { transform: translateY(0) scale(0.985); box-shadow: none; } html.portfolio-redesign :where(.button.primary, .report-action-button.primary, .email-button) { border-color: var(--studio-blue); color: white; background: linear-gradient(135deg, var(--studio-blue), #0756d7); } html.portfolio-redesign .hero-visual { position: relative; min-width: 0; width: 100%; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--studio-sq-xl); corner-shape: squircle; background: radial-gradient(circle at 58% 38%, rgba(24, 198, 217, 0.34), transparent 31%), linear-gradient(145deg, var(--studio-navy-raised), var(--studio-navy)); box-shadow: var(--studio-shadow); overflow: hidden; align-self: center; align-content: stretch; justify-items: stretch; } html.portfolio-redesign .hero-visual::before, html.portfolio-redesign .hero-visual::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: min(92vw, 660px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } html.portfolio-redesign .hero-visual::after { width: min(64vw, 440px); border-style: dashed; } html.portfolio-redesign .portrait-shell { position: relative; z-index: 1; min-height: 460px; border-radius: calc(var(--studio-sq-xl) - 8px); corner-shape: squircle; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(8,104,255,0.08)); overflow: hidden; } html.portfolio-redesign .portrait-shell img { filter: saturate(0.98) contrast(1.04); } html.portfolio-redesign .hero-capability-dock { z-index: 4; right: 32px; bottom: 32px; width: min(560px, calc(100% - 64px)); border: 1px solid rgba(255, 255, 255, 0.2); color: white; background: rgba(6, 24, 47, 0.88); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); } html.portfolio-redesign .hero-capability-dock > span { color: var(--studio-cyan); } html.portfolio-redesign .hero-capability-dock strong { color: white; } html.portfolio-redesign .hero-capability-chip { min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); color: white; background: rgba(255, 255, 255, 0.09); } html.portfolio-redesign .hero-capability-chip:hover, html.portfolio-redesign .hero-capability-chip:focus-visible { border-color: var(--studio-cyan); color: white; background: rgba(24, 198, 217, 0.2); } html.portfolio-redesign .section-heading { max-width: 780px; margin-bottom: 32px; } html.portfolio-redesign .section-heading h2, html.portfolio-redesign .background h2, html.portfolio-redesign .contact-card h2 { max-width: 14ch; margin-top: 10px; font-size: clamp(2.7rem, 11vw, 5.8rem); line-height: 0.95; letter-spacing: -0.065em; } html.portfolio-redesign .background { display: grid; gap: 34px; width: 100%; max-width: none; padding-inline: max(16px, calc((100vw - 1440px) / 2)); border: 0; color: white; background: radial-gradient(circle at 12% 12%, rgba(24, 198, 217, 0.2), transparent 24rem), linear-gradient(135deg, var(--studio-navy), #0a2340) !important; } html.portfolio-redesign .background .sticky-copy { position: static; } html.portfolio-redesign .background-cards { display: grid; gap: 14px; } html.portfolio-redesign .background :where(h2, h3, strong) { color: white; } html.portfolio-redesign .background .section-label { color: var(--studio-cyan); } html.portfolio-redesign .background .glass-card { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); } html.portfolio-redesign .background .glass-card:nth-child(2) { background: linear-gradient(135deg, rgba(8, 104, 255, 0.42), rgba(24, 198, 217, 0.14)); } html.portfolio-redesign .background .glass-card :where(span, p) { color: rgba(255, 255, 255, 0.72); } html.portfolio-redesign .glass-card, html.portfolio-redesign .download-card, html.portfolio-redesign .dashboard-panel, html.portfolio-redesign .contact-card { border: 1px solid var(--studio-border); color: var(--studio-ink); background: var(--studio-surface); box-shadow: var(--studio-shadow-soft); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html.portfolio-redesign .glass-card span, html.portfolio-redesign .glass-card p { color: var(--studio-muted); } html.portfolio-redesign .cliniqlo { width: 100%; padding-inline: max(16px, calc((100vw - 1440px) / 2)); background: linear-gradient(rgba(229,240,251,0.94), rgba(229,240,251,0.94)), linear-gradient(rgba(11,99,246,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(11,99,246,0.08) 1px, transparent 1px) !important; background-size: auto, 32px 32px, 32px 32px !important; border-block: 1px solid var(--studio-border); } html.portfolio-redesign .cliniqlo-showcase { display: grid; gap: 34px; max-width: 1440px; margin-inline: auto; padding: clamp(22px, 4vw, 54px); border: 1px solid var(--studio-border); background: linear-gradient(145deg, rgba(250,253,255,0.94), rgba(220,235,249,0.92)); box-shadow: var(--studio-shadow); } html.portfolio-redesign .cliniqlo-wordmark { max-width: 260px; filter: none; } html.portfolio-redesign .cliniqlo h2 { max-width: 12.5ch; color: var(--studio-ink); font-size: clamp(2.65rem, 8.5vw, 4.25rem); line-height: 0.96; letter-spacing: -0.065em; overflow-wrap: normal; word-break: normal; } html.portfolio-redesign .cliniqlo-lede { max-width: 45ch; color: var(--studio-muted); font-size: clamp(1rem, 2.6vw, 1.28rem); } html.portfolio-redesign .cliniqlo-benefits { display: grid; gap: 10px; } html.portfolio-redesign .cliniqlo-benefits article { min-height: 0; padding: 16px; border: 1px solid var(--studio-border); background: rgba(255, 255, 255, 0.66); } html.portfolio-redesign .cliniqlo-benefits span { color: var(--studio-blue); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; } html.portfolio-redesign .cliniqlo-visual { align-self: center; border: 1px solid var(--studio-border); background: var(--studio-navy-raised); box-shadow: var(--studio-shadow-soft); } html.portfolio-redesign .cliniqlo-mockup { overflow: hidden; } html.portfolio-redesign .cliniqlo-slide > p { border: 1px solid rgba(255,255,255,0.2); border-radius: var(--studio-sq-md); corner-shape: squircle; background: rgba(7, 22, 47, 0.9); } html.portfolio-redesign .cliniqlo-slide > p :where(span, strong) { color: white; } html.portfolio-redesign .cliniqlo-carousel-controls > button { color: var(--studio-ink); background: white; border-color: var(--studio-border); } html.portfolio-redesign .cliniqlo-carousel-controls [data-carousel-dot]::before { background: rgba(11, 99, 246, 0.28); } html.portfolio-redesign .cliniqlo-carousel-controls [data-carousel-dot]:hover::before, html.portfolio-redesign .cliniqlo-carousel-controls [data-carousel-dot]:focus-visible::before { background: rgba(11, 99, 246, 0.62); } html.portfolio-redesign .cliniqlo-carousel-controls [data-carousel-dot].is-active::before { background: var(--studio-blue); } html.portfolio-redesign :where(.shopify, .email, .meta, .google, .social) { border-top: 1px solid var(--studio-border); } html.portfolio-redesign .shopify { width: 100%; max-width: none; padding-inline: max(16px, calc((100vw - 1440px) / 2)); background: radial-gradient(circle at 90% 8%, rgba(168, 232, 46, 0.2), transparent 20rem), linear-gradient(145deg, #0b5be0, var(--studio-blue)) !important; color: white; } html.portfolio-redesign .shopify :where(h2, h3, strong) { color: white; } html.portfolio-redesign .shopify .section-label { color: var(--studio-lime); } html.portfolio-redesign .shopify .project-mini { border-color: rgba(255, 255, 255, 0.22); background: rgba(249, 252, 255, 0.96); box-shadow: 0 20px 48px rgba(6, 24, 47, 0.2); } html.portfolio-redesign .shopify .project-mini :where(h3, strong) { color: var(--studio-ink); } html.portfolio-redesign .shopify .project-mini :where(p, span) { color: var(--studio-muted); } html.portfolio-redesign .email { background: radial-gradient(circle at 8% 92%, rgba(24, 198, 217, 0.16), transparent 24rem) !important; } html.portfolio-redesign .email .metric-card:first-child { border-color: rgba(255, 255, 255, 0.16); color: white; background: linear-gradient(145deg, var(--studio-navy-raised), var(--studio-navy)); } html.portfolio-redesign .email .metric-card:first-child > p, html.portfolio-redesign .email .metric-card:first-child .metrics span { color: rgba(255, 255, 255, 0.7); } html.portfolio-redesign .email .metric-card:first-child .metrics span { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); } html.portfolio-redesign .email .metric-card:first-child .metrics b { color: var(--studio-cyan); } html.portfolio-redesign .meta { width: 100%; max-width: none; padding-inline: max(16px, calc((100vw - 1440px) / 2)); background: linear-gradient(145deg, #ccdaea, #dce8f3) !important; } html.portfolio-redesign .meta .metric-card { background: linear-gradient(135deg, rgba(249,252,255,0.98), rgba(223,237,249,0.96)); } html.portfolio-redesign .google { width: 100%; max-width: none; padding-inline: max(16px, calc((100vw - 1440px) / 2)); color: white; background: radial-gradient(circle at 88% 16%, rgba(24, 198, 217, 0.18), transparent 22rem), linear-gradient(145deg, var(--studio-navy), #0b2948) !important; } html.portfolio-redesign .google :where(h2, h3, strong) { color: white; } html.portfolio-redesign .google .section-label { color: var(--studio-lime); } html.portfolio-redesign .google .dashboard-panel { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); } html.portfolio-redesign .google .kpi-grid > span { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.08); } html.portfolio-redesign .google .kpi-grid { align-content: center; grid-auto-rows: minmax(112px, auto); } html.portfolio-redesign .google .kpi-grid > span:nth-child(3n + 1) b { color: var(--studio-cyan); } html.portfolio-redesign .google .kpi-grid > span:nth-child(3n + 2) b { color: var(--studio-lime); } html.portfolio-redesign .social { width: 100%; max-width: none; padding-inline: max(16px, calc((100vw - 1440px) / 2)); background: linear-gradient(145deg, #dce8f3, #c9dcec) !important; } html.portfolio-redesign :where(.project-grid, .project-dynamic, .email-layout, .campaign-layout, .social-experience) { min-width: 0; } html.portfolio-redesign :where(.project-card, .media-frame) { border: 1px solid var(--studio-border); background: var(--studio-surface-solid); box-shadow: var(--studio-shadow-soft); overflow: hidden; } html.portfolio-redesign :where(.project-card, .media-frame):hover { border-color: var(--studio-border-strong); transform: translateY(-3px); } html.portfolio-redesign .metric-card .metrics, html.portfolio-redesign .kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html.portfolio-redesign .metric-card .metrics span, html.portfolio-redesign .kpi-grid > span { min-width: 0; padding: 14px; border: 1px solid var(--studio-border); color: var(--studio-muted); background: rgba(238, 246, 252, 0.92); } html.portfolio-redesign .metric-card .metrics b, html.portfolio-redesign .kpi-grid b { color: var(--studio-ink); font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } html.portfolio-redesign .email .metric-card .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.portfolio-redesign .google .kpi-grid b { color: #ffffff; } html.portfolio-redesign .report-dialog, html.portfolio-redesign .media-viewer-dialog, html.portfolio-redesign .email-confirm-dialog { background: rgba(7, 22, 47, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.portfolio-redesign .report-dialog-panel, html.portfolio-redesign .media-viewer-panel, html.portfolio-redesign .email-confirm-panel { border: 1px solid var(--studio-border); color: var(--studio-ink); background: #f8fbff; box-shadow: var(--studio-shadow); } html.portfolio-redesign .report-dialog-header h2, html.portfolio-redesign .report-dialog-header p { color: var(--studio-ink); } html.portfolio-redesign .social { padding-bottom: 92px; } html.portfolio-redesign .contact-card { position: relative; padding: clamp(28px, 6vw, 68px); overflow: hidden; border-color: rgba(255, 255, 255, 0.14); color: white; background: radial-gradient(circle at 92% 12%, rgba(24, 198, 217, 0.24), transparent 15rem), linear-gradient(145deg, var(--studio-navy-raised), var(--studio-navy)); } html.portfolio-redesign .contact-card :where(h2, strong) { color: white; } html.portfolio-redesign .contact-card .section-label, html.portfolio-redesign .contact-card::after { color: var(--studio-cyan); } html.portfolio-redesign .contact-card::after { content: "AVAILABLE FOR SELECT PROJECTS"; display: block; margin-top: 28px; color: var(--studio-blue); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; } @media (min-width: 560px) { html.portfolio-redesign { --studio-page: min(100% - 48px, 1440px); } html.portfolio-redesign .cliniqlo-benefits, html.portfolio-redesign .background-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.portfolio-redesign .metric-card .metrics, html.portfolio-redesign .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 760px) { html.portfolio-redesign .section { padding-block: 96px; } html.portfolio-redesign .background { grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr); align-items: start; } html.portfolio-redesign .background-cards { grid-template-columns: 1fr; } html.portfolio-redesign .cliniqlo-showcase { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); align-items: center; } } @media (min-width: 980px) { html.portfolio-redesign .hero { grid-template-columns: minmax(380px, 0.82fr) minmax(520px, 1.18fr); gap: clamp(42px, 5vw, 84px); min-height: min(850px, calc(100svh - 106px)); align-items: center; } html.portfolio-redesign .hero h1 { font-size: clamp(6rem, 8.5vw, 9rem); } html.portfolio-redesign .hero-visual { min-height: 650px; } html.portfolio-redesign .portrait-shell { min-height: 614px; } html.portfolio-redesign .background { grid-template-columns: minmax(340px, 0.75fr) minmax(0, 1.25fr); } html.portfolio-redesign .cliniqlo-showcase { grid-template-columns: minmax(390px, 0.82fr) minmax(560px, 1.18fr); } html.portfolio-redesign .metric-card .metrics, html.portfolio-redesign .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1320px) { html.portfolio-redesign .site-header { min-height: 76px; padding-inline: 20px 14px; } html.portfolio-redesign #main { padding-top: 106px; } html.portfolio-redesign .section { padding-block: 124px; } html.portfolio-redesign .cliniqlo-showcase { padding: 64px; } } @media (max-width: 759px) { html.portfolio-redesign .header-descriptor, html.portfolio-redesign .brand-name { display: none; } html.portfolio-redesign .site-header { top: 8px; left: 8px; right: 8px; min-height: 62px; padding: 7px 8px 7px 12px; max-width: none; transform: none; } html.portfolio-redesign #main { padding-top: 78px; } html.portfolio-redesign .hero { min-height: auto; } html.portfolio-redesign .hero-visual { padding: 10px; } html.portfolio-redesign .hero-capability-dock { position: relative; inset: auto; width: 100%; margin-top: -48px; } html.portfolio-redesign .cliniqlo { padding-inline: 16px; } html.portfolio-redesign .cliniqlo-showcase { padding: 18px; } html.portfolio-redesign .cliniqlo-carousel-controls { grid-template-columns: 52px minmax(0, 1fr) 52px; } } @media (prefers-reduced-motion: reduce) { html.portfolio-redesign *, html.portfolio-redesign *::before, html.portfolio-redesign *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: more) { html.portfolio-redesign { --studio-border: rgba(7, 22, 47, 0.48); --studio-border-strong: #07162f; } }