:root { –yellow: #F5C842; –yellow-deep: #B08C00; –ink: #1A1917; –ink-soft: #3D3B35; –muted: #8A8680; –white: #FFFFFF; –paper: #F4F0E5; –paper-deep: #EDE9DC; –line: #E2DDD1; –font-sans: ‘Inter’, system-ui, sans-serif; –font-serif: ‘Playfair Display’, Georgia, serif; –section-pad: 80px 0; –radius: 16px; –radius-pill: 100px; –shadow: 0 4px 24px rgba(0,0,0,0.08); –shadow-hover: 0 8px 40px rgba(0,0,0,0.14); –max-width: 1280px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(–font-sans); font-size: 16px; line-height: 1.6; color: var(–ink); background: var(–paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } address { font-style: normal; } .container { max-width: var(–max-width); margin: 0 auto; padding: 0 40px; } .section { padding: var(–section-pad); } .section-dark { background: var(–ink); color: var(–white); } .section-paper { background: var(–paper-deep); } .eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(–yellow-deep); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .eyebrow::before { content: ”; display: block; width: 28px; height: 2px; background: var(–yellow); flex-shrink: 0; } .display-hero { font-family: var(–font-serif); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .display-large { font-family: var(–font-serif); font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .display-small { font-family: var(–font-serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .lead { font-size: 1.05rem; line-height: 1.7; color: var(–ink-soft); max-width: 560px; } .section-copy { font-size: 0.95rem; line-height: 1.65; color: var(–muted); } .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(–font-sans); font-size: 0.9rem; font-weight: 700; padding: 14px 24px; border-radius: var(–radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; } .btn-primary { background: var(–yellow); color: var(–ink); border-color: var(–yellow); } .btn-primary:hover { background: #d4a800; border-color: #d4a800; transform: translateY(-1px); box-shadow: var(–shadow); } .btn-dark { background: var(–ink); color: var(–white); border-color: var(–ink); } .btn-dark:hover { background: #2d2c28; transform: translateY(-1px); box-shadow: var(–shadow); } .btn-outline { background: transparent; color: var(–ink); border-color: var(–ink); } .btn-outline:hover { background: var(–ink); color: var(–white); } .btn-outline-white { background: transparent; color: var(–white); border-color: rgba(255,255,255,0.5); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: var(–white); } .btn-small { font-size: 0.82rem; padding: 10px 18px; } .btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .site-header { position: sticky; top: 0; z-index: 100; background: var(–paper); border-bottom: 1px solid var(–line); backdrop-filter: blur(12px); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 32px; } .brand-logo { height: 40px; width: auto; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-size: 0.875rem; font-weight: 600; padding: 8px 14px; border-radius: 8px; color: var(–ink-soft); transition: color 0.15s, background 0.15s; } .nav-links a:hover { color: var(–ink); background: var(–paper-deep); } .nav-right { display: flex; align-items: center; gap: 12px; } .hero-section { padding: 80px 0 100px; background: var(–paper); } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 24px; } .hero-title { font-family: var(–font-serif); font-size: clamp(2.6rem, 4.2vw, 4.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; } .hero-image-frame { border-radius: var(–radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(–paper-deep); border: 1px solid var(–line); position: relative; } .hero-image-frame img { width: 100%; height: 100%; object-fit: cover; } .img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(–muted); font-size: 0.875rem; } .img-placeholder-icon { font-size: 2.5rem; opacity: 0.4; } .logo-bar-section { padding: 32px 0; border-top: 1px solid var(–line); border-bottom: 1px solid var(–line); background: var(–white); } .logo-bar-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(–muted); margin-bottom: 20px; text-align: center; } .logo-bar-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px; } .client-logo { height: 28px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; } .client-logo:hover { opacity: 1; filter: none; } .client-logo-text { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(–muted); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-card { border: 1px solid var(–line); border-radius: var(–radius); background: var(–white); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; position: relative; } .service-card:hover { transform: translateY(-3px); box-shadow: var(–shadow-hover); } .service-card-thumb { aspect-ratio: 16 / 9; background: var(–paper-deep); overflow: hidden; } .service-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .service-card:hover .service-card-thumb img { transform: scale(1.03); } .service-card-body { padding: 22px 22px 28px; display: flex; flex-direction: column; gap: 10px; } .service-card-name { font-family: var(–font-serif); font-size: 1.25rem; font-weight: 700; } .service-card-desc { font-size: 0.875rem; color: var(–muted); line-height: 1.55; } .service-card-price { font-size: 0.82rem; font-weight: 700; color: var(–yellow-deep); margin-top: 4px; } .service-card-link { font-size: 0.82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(–ink); padding-top: 8px; border-top: 1px solid var(–line); margin-top: 8px; transition: gap 0.2s; } .service-card-link:hover { gap: 10px; } .amenity-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(–radius-pill); background: var(–paper); color: var(–ink-soft); border: 1px solid var(–line); } .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(–ink); color: var(–white); } .stat-item { padding: 40px 32px; border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 6px; } .stat-item:last-child { border-right: none; } .stat-number { font-family: var(–font-serif); font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; line-height: 1; color: var(–yellow); } .stat-label { font-size: 0.875rem; color: rgba(255,255,255,0.6); } .location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .location-card { border: 1px solid var(–line); border-radius: var(–radius); background: var(–white); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } .location-card:hover { transform: translateY(-3px); box-shadow: var(–shadow-hover); } .location-card-thumb { aspect-ratio: 3 / 2; background: var(–paper-deep); overflow: hidden; position: relative; } .location-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .location-card-city-badge { position: absolute; top: 12px; left: 12px; background: var(–yellow); color: var(–ink); font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: var(–radius-pill); letter-spacing: 0.08em; text-transform: uppercase; } .location-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .location-card-name { font-family: var(–font-serif); font-size: 1.1rem; font-weight: 700; } .location-card-address { font-size: 0.82rem; color: var(–muted); line-height: 1.5; } .location-card-link { font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(–line); color: var(–ink); transition: gap 0.2s; } .location-card-link:hover { gap: 10px; } .section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; } .section-heading-full { max-width: 680px; margin-bottom: 48px; } .cta-banner { background: var(–yellow); border-radius: var(–radius); padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .cta-banner-title { font-family: var(–font-serif); font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 700; color: var(–ink); max-width: 520px; line-height: 1.2; } .cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(–line); border-left: 1px solid var(–line); } .audience-card { border-right: 1px solid var(–line); border-bottom: 1px solid var(–line); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; } .audience-number { font-family: var(–font-serif); font-size: 1.4rem; color: var(–yellow-deep); } .audience-title { font-family: var(–font-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.25; } .audience-desc { font-size: 0.875rem; color: var(–muted); line-height: 1.55; margin-top: auto; } .site-footer { background: var(–ink); color: var(–white); padding: 64px 0 24px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-links a { font-size: 0.875rem; color: rgba(255,255,255,0.65); transition: color 0.15s; } .footer-links a:hover { color: var(–white); } .footer-brand-desc { font-size: 0.875rem; color: rgba(255,255,255,0.5); line-height: 1.65; margin: 16px 0 24px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; font-size: 0.8rem; color: rgba(255,255,255,0.35); } .sticky-cta { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .sticky-wa { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: white; font-weight: 700; font-size: 0.875rem; padding: 12px 20px; border-radius: var(–radius-pill); box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform 0.2s, box-shadow 0.2s; } .sticky-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.5); } .sticky-tour { display: inline-flex; align-items: center; gap: 8px; background: var(–ink); color: white; font-weight: 700; font-size: 0.875rem; padding: 12px 20px; border-radius: var(–radius-pill); box-shadow: var(–shadow); transition: transform 0.2s; } .sticky-tour:hover { transform: translateY(-2px); } @media (max-width: 1024px) { .container { padding: 0 24px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .location-grid { grid-template-columns: repeat(2, 1fr); } .stats-bar { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .cta-banner { flex-direction: column; text-align: center; } } @media (max-width: 640px) { :root { –section-pad: 56px 0; } .container { padding: 0 20px; } .services-grid { grid-template-columns: 1fr; } .location-grid { grid-template-columns: 1fr; } .stats-bar { grid-template-columns: 1fr 1fr; } .audience-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .section-heading { grid-template-columns: 1fr; } .cta-banner { padding: 36px 24px; } .nav-links { display: none; } } body { background: #d1cdc4; margin: 0; } .page-wrapper { max-width: 1280px; margin: 0 auto; background: var(–paper); box-shadow: 0 0 60px rgba(0,0,0,0.15); overflow: hidden; position: relative; } .hero { padding: 72px 0 96px; background: var(–paper); } .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .hero-copy { display:flex; flex-direction:column; gap:20px; } .hero-title { font-family:var(–font-serif); font-size:clamp(2.2rem,3.8vw,3.8rem); font-weight:700; line-height:1.08; letter-spacing:-0.025em; } .hero-stats { display:flex; gap:32px; border-top:1px solid var(–line); padding-top:20px; margin-top:4px; } .hero-stats div { display:flex; flex-direction:column; gap:2px; } .hero-stats dt { font-size:0.72rem; color:var(–muted); text-transform:uppercase; letter-spacing:0.08em; } .hero-stats dd { font-family:var(–font-serif); font-size:1.6rem; font-weight:700; color:var(–ink); margin:0; } .hero-actions { display:flex; flex-wrap:wrap; gap:10px; } .trust-line { display:flex; align-items:center; gap:12px; font-size:0.82rem; color:var(–muted); } .avatar-stack { display:flex; } .avatar-stack span { width:28px; height:28px; border-radius:50%; background:var(–ink); color:var(–white); font-size:0.65rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(–paper); margin-right:-8px; } .hero-visual { position:relative; } .hero-img-wrap { border-radius:var(–radius); overflow:hidden; aspect-ratio:4/3; background:var(–paper-deep); border:1px solid var(–line); position:relative; } .hero-img-wrap img { width:100%; height:100%; object-fit:cover; } .floating-card { position:absolute; bottom:-20px; left:-20px; background:var(–white); border:1px solid var(–line); border-radius:14px; padding:16px 20px; box-shadow:var(–shadow); max-width:280px; } .floating-card strong { font-size:0.875rem; display:block; margin-bottom:6px; } .floating-card p { font-size:0.78rem; color:var(–muted); line-height:1.5; margin:0 0 8px; } .availability { font-size:0.72rem; font-weight:700; color:#22c55e; } .img-caption { position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); color:var(–white); border-radius:8px; padding:8px 12px; font-size:0.75rem; } .img-caption strong { display:block; } .client-logo-bar { padding:28px 0; border-top:1px solid var(–line); border-bottom:1px solid var(–line); text-align:center; } .client-logo-title { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(–muted); margin-bottom:20px; } .client-logo-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:32px; align-items:center; } .client-logo-item { font-weight:800; font-size:0.9rem; letter-spacing:0.04em; color:var(–muted); opacity:0.65; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .service-card.bento-wide { grid-column:span 2; } .service-card.bento-wide { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; } .service-card.bento-wide .image-holder-thumb { aspect-ratio:auto; min-height:280px; height:100%; grid-row:span 5; } .service-card.bento-wide .service-card-top { padding-top:20px; } .service-card.bento-wide h3 { font-size:1.35rem; padding:8px 20px 0; } .service-card.bento-wide p { padding:6px 20px; } .service-card.bento-wide .service-card-facts { padding:10px 20px; } .service-card.bento-wide .service-card-footer { padding:12px 20px 20px; } .service-card { border:1px solid var(–line); border-radius:var(–radius); overflow:hidden; background:var(–white); transition:box-shadow 0.2s,transform 0.2s; } .service-card:hover { transform:translateY(-3px); box-shadow:var(–shadow-hover); } .service-card.featured { border-color:var(–yellow); } .image-holder-thumb { aspect-ratio:16/9; background:var(–paper-deep); overflow:hidden; } .image-holder-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; } .service-card:hover .image-holder-thumb img { transform:scale(1.03); } .service-card-top { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 0; } .service-index { font-family:var(–font-serif); font-size:1.6rem; font-weight:700; color:var(–line); } .service-card h3 { font-family:var(–font-serif); font-size:1.15rem; font-weight:700; padding:6px 16px 0; } .service-card h3 a { color:inherit; } .service-card p { font-size:0.85rem; color:var(–muted); padding:6px 16px; line-height:1.55; } .service-card-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 16px; border-top:1px solid var(–line); margin-top:8px; } .service-card-facts dt { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(–muted); } .service-card-facts dd { font-size:0.8rem; font-weight:600; margin:0; color:var(–ink); } .service-card-footer { display:flex; justify-content:space-between; align-items:flex-end; padding:12px 16px 16px; border-top:1px solid var(–line); margin-top:4px; } .service-price strong { font-size:0.9rem; display:block; } .service-price small { font-size:0.72rem; color:var(–muted); } .service-card-link { font-size:0.8rem; font-weight:700; display:inline-flex; align-items:center; gap:4px; color:var(–ink); white-space:nowrap; } .location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .location-card { border-radius:var(–radius); overflow:hidden; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); transition:transform 0.2s,box-shadow 0.2s; } .location-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.3); } .image-holder-card { aspect-ratio:1/1; background:rgba(255,255,255,0.05); overflow:hidden; } .image-holder-card img { width:100%; height:100%; object-fit:cover; } .location-card-content { padding:16px; } .location-city { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(–yellow); } .location-card-content h3 { font-family:var(–font-serif); font-size:1.05rem; font-weight:700; margin:4px 0; color:var(–white); } .location-card-content h3 a { color:inherit; } .location-meta { display:flex; justify-content:space-between; font-size:0.78rem; color:rgba(255,255,255,0.45); margin-top:6px; } .audience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(–line); border-left:1px solid var(–line); } .audience-card { border-right:1px solid var(–line); border-bottom:1px solid var(–line); padding:28px; display:flex; flex-direction:column; gap:12px; } .audience-card > span { font-family:var(–font-serif); font-size:1.5rem; color:var(–yellow-deep); } .audience-card h3 { font-family:var(–font-serif); font-size:1.1rem; font-weight:700; line-height:1.25; } .audience-card p { font-size:0.85rem; color:var(–muted); line-height:1.55; flex:1; } .text-link { font-size:0.82rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; color:var(–ink-soft); transition:color 0.15s,gap 0.2s; } .text-link:hover { color:var(–ink); gap:10px; } .managed-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .managed-gallery { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; } .image-holder-default { grid-column:span 2; border-radius:var(–radius); overflow:hidden; aspect-ratio:4/3; background:var(–paper-deep); } .image-holder-default img { width:100%; height:100%; object-fit:cover; } .managed-badge { position:absolute; bottom:12px; left:12px; background:var(–yellow); color:var(–ink); border-radius:10px; padding:10px 14px; } .managed-badge strong { font-size:1.6rem; font-family:var(–font-serif); display:block; line-height:1; } .managed-badge span { font-size:0.72rem; font-weight:700; } .managed-copy { display:flex; flex-direction:column; gap:20px; } .benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:8px; border-top:1px solid var(–line); border-left:1px solid var(–line); } .benefit-item { border-right:1px solid var(–line); border-bottom:1px solid var(–line); padding:16px; display:flex; gap:10px; } .benefit-item > span { font-family:var(–font-serif); font-size:1rem; color:var(–yellow-deep); flex-shrink:0; } .benefit-item h3 { font-size:0.82rem; font-weight:700; margin-bottom:4px; } .benefit-item p { font-size:0.78rem; color:var(–muted); line-height:1.5; } .client-strip { padding-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .client-strip p { font-size:0.78rem; color:var(–muted); flex-shrink:0; } .client-strip div { display:flex; flex-wrap:wrap; gap:16px; } .client-strip span { font-weight:800; font-size:0.8rem; color:var(–muted); letter-spacing:0.06em; } .process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; list-style:none; counter-reset:none; margin-top:40px; } .process-grid li { display:flex; flex-direction:column; gap:10px; padding:28px; border:1px solid var(–line); border-radius:var(–radius); background:var(–white); } .process-grid li > span { font-family:var(–font-serif); font-size:2rem; font-weight:700; color:var(–yellow-deep); line-height:1; } .process-grid li h3 { font-family:var(–font-serif); font-size:1.1rem; font-weight:700; } .process-grid li p { font-size:0.85rem; color:var(–muted); line-height:1.6; flex:1; } .process-note { margin-top:24px; background:var(–paper-deep); border:1px solid var(–line); border-radius:10px; padding:16px 20px; font-size:0.82rem; color:var(–muted); display:flex; gap:12px; } .process-note strong { color:var(–ink); display:block; margin-bottom:4px; } .faq-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; } .faq-list { display:flex; flex-direction:column; } .faq-list details { border-bottom:1px solid var(–line); } .faq-list summary { padding:18px 0; font-weight:600; font-size:0.9rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .faq-list summary::after { content:’+’; font-size:1.2rem; font-weight:400; color:var(–muted); flex-shrink:0; } .faq-list details[open] summary::after { content:’−’; } .faq-list details p { font-size:0.875rem; color:var(–muted); line-height:1.65; padding-bottom:16px; } .cta-section { padding:0 0 80px; } .cta-panel { background:var(–yellow); border-radius:var(–radius); padding:56px 64px; display:flex; justify-content:space-between; align-items:center; gap:40px; } .cta-panel h2 { font-family:var(–font-serif); font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:700; color:var(–ink); max-width:480px; line-height:1.2; } .cta-panel p { font-size:0.875rem; color:var(–ink-soft); max-width:480px; margin-top:8px; } .cta-actions { display:flex; flex-wrap:wrap; gap:12px; flex-shrink:0; } .img-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; min-height:200px; color:var(–muted); font-size:0.8rem; text-align:center; } .img-ph-icon { font-size:2.5rem; opacity:0.35; } @media(max-width:1024px) { .hero-grid,.managed-layout { grid-template-columns:1fr; } .service-grid { grid-template-columns:1fr 1fr; } .service-card.bento-wide { grid-column:span 2; display:block; } .service-card.bento-wide .image-holder-thumb { aspect-ratio:16/9; height:auto; } .location-grid { grid-template-columns:repeat(2,1fr); } .audience-grid { grid-template-columns:repeat(2,1fr); } .process-grid { grid-template-columns:1fr; } .faq-layout { grid-template-columns:1fr; } .cta-panel { flex-direction:column; text-align:center; padding:40px 32px; } } @media(max-width:640px) { .service-grid,.location-grid,.audience-grid { grid-template-columns:1fr; } .service-card.bento-wide { grid-column:span 1; display:block; } .service-card.bento-wide .image-holder-thumb { aspect-ratio:16/9; height:auto; } .section-heading { grid-template-columns:1fr; } .hero-stats { flex-wrap:wrap; gap:16px; } .floating-card { display:none; } }