/* RealTyme's photographic identity. Base layout and components live in styles.css. */
:root { --ink:#172a31; --muted:#5e6c64; --orange:#f5683c; --font:'Manrope',sans-serif; --heading:'Manrope',sans-serif; --display:'Instrument Serif',Georgia,serif; }
.site-header { max-width:none; background:#14252c; color:#f5f3ed; border-color:#ffffff20; height:104px; }
.brand-lockup { display:inline-flex; align-items:center; gap:13px; flex-shrink:0; }
.brand-lockup img { width:59px; height:61px; object-fit:contain; }
.brand-lockup>span { font-family:var(--heading); font-size:25px; line-height:1.15; letter-spacing:-1px; font-weight:650; }
.brand-lockup small { display:block; font:500 9px var(--font); letter-spacing:4px; margin-top:6px; }
.site-header nav { font-size:14px; gap:32px; }
.site-header .button { color:#172a31; }
.button { font-size:14px; min-height:49px; }
.button-small { font-size:12px; }
.text-link { font-size:13px; }
.hero { max-width:none; background:#14252c; color:#f5f3ed; padding:30px max(6%,calc((100vw - 1280px)/2)) 58px; overflow:hidden; }
.hero-topline { color:#c4cec9; }
.hero-grid { grid-template-columns:1.1fr 1fr; align-items:center; gap:55px; padding-top:35px; }
.hero-copy,.hero-art { animation:none; }
.hero h1 { font-size:clamp(64px,6.4vw,96px); font-weight:500; letter-spacing:-.06em; line-height:1.03; margin-bottom:28px; white-space:normal; }
.hero-copy>p { font-size:17px; color:#e3e8e3; line-height:1.65; }
.hero-copy .hero-detail { font-size:14px; max-width:360px; color:#bbc7c4; }
.hero-actions { flex-wrap:wrap; margin-top:28px; gap:24px; }
.hero-actions .text-link { color:#e3e8e3; font-size:12px; }
.hero-art { width:100%; padding:0; align-self:center; min-width:0; }
.photo-frame { height:560px; transform:none; border-radius:1px; background:#21414d; }
.photo-frame img { object-position:50% 5%; filter:none; }
.photo-frame:after { display:none; }
.image-caption { color:#c7d2ce; font-size:9px; margin-top:16px; gap:20px; line-height:1.7; }
.image-caption a { text-align:right; }
.hero-footnote { display:flex; color:#bac8c6; margin-top:35px; font-size:9px; letter-spacing:1px; gap:13px; flex-wrap:wrap; }
.footnote-rule { width:30px; height:1px; background:var(--orange); }
.motion-toggle { margin-left:auto; background:transparent; border:1px solid #ffffff4a; color:#d7dfdb; padding:9px 11px; font-size:10px; min-height:38px; border-radius:2px; }
.motion-toggle[hidden] { display:none; }
.lens-scene { position:absolute; left:-72px; bottom:53px; width:160px; height:160px; pointer-events:none; }
.lens-scene canvas { display:block; width:100%; height:100%; }
.lens-fallback { position:absolute; inset:27px; border:5px solid #acbdc0; border-radius:50%; transform:rotate(-25deg) scaleX(.72); box-shadow:inset 0 0 0 8px #253c42,0 0 0 2px #435d64; }
.lens-scene.ready .lens-fallback { display:none; }
.ticker { background:#e7eae3; color:#172a31; }
.ticker>div { padding-block:24px; }
.ticker span { font-size:13px; }
.ticker b { color:#8b968e; font-size:20px; font-weight:400; }
.muted { color:#69776e; }
.about-layout p,.section-heading>p,.service-card p,.insights-grid p,details p { color:#56655e; }
.about-layout p { font-size:15px; }
.industry-strip>span { font-size:13px; }
.industry-strip>span:first-child { font-size:9px; }
.service-card p { font-size:14px; }
.service-tags { color:#5e6c64; font-size:12px; }
.card-link { font-size:12px; gap:12px; }
.service-card { padding:26px 22px 20px; }
.card-top { color:#606c64; }
.section-heading>p { font-size:14px; }
.portrait-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; align-items:start; }
.portrait-card { border:0; padding:0; background:none; text-align:left; }
.portrait-card:nth-child(2) { margin-top:42px; }
.portrait-image { position:relative; overflow:hidden; aspect-ratio:2/3; background:#1b303a; }
.portrait-image img { width:100%; height:100%; object-position:50% 25%; transition:transform .65s ease; }
.portrait-card:hover img { transform:scale(1.025); }
.portrait-expand { position:absolute; bottom:17px; right:17px; border:1px solid #fff8; background:#14252c99; color:white; width:39px; height:39px; border-radius:50%; display:grid; place-items:center; font-size:22px; }
.portrait-caption { margin-top:19px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.portrait-caption h3 { font-size:22px; letter-spacing:-.7px; font-weight:550; }
.portrait-caption>span { font-size:8px; letter-spacing:1px; color:#5e6c64; text-align:right; }
.gallery-note { margin-top:35px; padding-top:25px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:25px; }
.gallery-note p { color:#5e6c64; font-size:14px; }
.section-heading em { color:#ad4428; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.engagements { padding-top:0; }
.engagement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.engagement-grid article { border-top:1px solid #bcc6bd; padding:24px 0 0; display:flex; flex-direction:column; align-items:start; }
.engagement-number { color:#9c432c; font-size:12px; margin-bottom:25px; }
.engagement-grid h3 { font-size:27px; letter-spacing:-1px; }
.engagement-grid p { font-size:14px; line-height:1.75; color:#56655e; margin:18px 0; max-width:320px; }
.engagement-grid ul { list-style:none; padding:0; margin:0 0 25px; font-size:13px; }
.engagement-grid li { margin-bottom:7px; }
.engagement-grid li:before { content:'↗'; margin-right:12px; color:#9c432c; }
.engagement-grid .text-link { margin-top:auto; }
.process { background:#14252c; }
.process-grid p { font-size:14px; }
.process-grid article>span { font-size:10px; }
.insights-grid p { font-size:14px; }
.article-category { font-size:10px; color:#8f422c; }
summary { font-size:14px; min-height:30px; align-items:center; }
details p { font-size:14px; }
.contact h2 { font-size:clamp(58px,6vw,82px); letter-spacing:-.055em; }
.contact h2>span:first-child { color:var(--ink); }
.contact-expectation { border-top:1px solid #172a3144; margin-top:35px; padding-top:24px; display:flex; flex-direction:column; gap:9px; font-size:13px; }
.contact-expectation strong { font-weight:650; }
.contact label { font-size:13px; }
.contact label>span { font-weight:400; font-size:11px; }
input,select,textarea { font-size:16px; min-height:44px; }
input::placeholder,textarea::placeholder { font-size:14px; color:#493930; }
.form-note { font-size:12px; max-width:none; }
.contact #form-status { font-size:13px; }
.contact-email { font-size:16px; }
.footer-top { align-items:center; }
.footer-top .brand-lockup img { width:61px; height:63px; }
.footer-top p { font-size:14px; }
.footer-top p>span { color:#5e6c64; font-size:12px; }
.footer-bottom { color:#5e6c64; font-size:11px; }
.footer-bottom button,.footer-bottom a { display:inline-flex; min-height:30px; align-items:center; }
.photo-dialog { padding:20px; width:min(670px,calc(100% - 30px)); background:#14252c; color:var(--paper); }
.photo-dialog .dialog-close { background:#14252ce6; color:white; top:25px; right:25px; z-index:1; width:40px; height:40px; border-radius:50%; }
.lightbox-image { height:min(66vh,780px); }
.lightbox-image img { height:100%; object-fit:contain; }
.lightbox-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 5px 2px; }
.lightbox-caption h2 { margin:8px 0 0; font-size:26px; }
.photo-dialog .eyebrow { color:#bac8c6; font-size:9px; }
.lightbox-controls { display:flex; gap:9px; }
.lightbox-controls button { background:transparent; color:var(--paper); border:1px solid #ffffff50; width:44px; height:44px; font-size:22px; }
@media(min-width:1500px) { .hero-grid { gap:80px; } .photo-frame { height:600px; } }
@media(max-width:1100px) { .hero-grid { gap:35px; } .hero h1 { font-size:76px; } .photo-frame { height:520px; } .site-header nav { gap:22px; font-size:13px; } .brand-lockup>span { font-size:22px; } .brand-lockup img { width:49px; height:51px; } .hero-actions { gap:17px; } .hero-actions .button { font-size:13px; } .lens-scene { width:125px; height:125px; left:-48px; } .portrait-caption { flex-direction:column; align-items:start; gap:7px; } .hero-copy>p { font-size:16px; } }
@media(max-width:900px) { .header-cta { display:none; } .hero h1 { font-size:65px; } .desktop-break { display:none; } .hero-grid { gap:27px; } .photo-frame { height:510px; } .hero-actions .text-link { font-size:11px; } }
@media(max-width:800px) { .hero-grid { grid-template-columns:1fr 1fr; gap:30px; } .hero h1 { font-size:60px; } .hero-art { max-width:none; } .photo-frame { height:530px; } .hero-copy>p { font-size:15px; } .hero-copy .hero-detail { font-size:13px; } .hero-actions { gap:16px; } .hero-actions .button { padding:15px; gap:12px; } .hero-footnote { font-size:8px; margin-top:24px; } .lens-scene { display:none; } .image-caption { font-size:7px; flex-wrap:wrap; gap:8px; } .motion-toggle { margin-left:0; } .portrait-grid { gap:16px; } .portrait-caption h3 { font-size:19px; } .engagement-grid { gap:24px; } .engagement-grid h3 { font-size:23px; } .engagement-grid p,.engagement-grid ul { font-size:13px; } .gallery-note { align-items:start; } .ticker span { font-size:11px; } .ticker>div { gap:20px; } .contact h2 { font-size:72px; } .contact h2 br:last-of-type { display:block; } .contact-layout>div { max-width:600px; } .contact-expectation { display:none; } }
@media(max-width:600px) { .site-header { height:88px; } .brand-lockup>span { font-size:22px; } .brand-lockup img { width:48px; height:50px; } .menu-toggle { display:flex; flex-direction:column; gap:6px; background:transparent; border:1px solid #ffffff50; padding:13px 10px; min-height:44px; } .menu-toggle span { background:var(--paper); display:block; width:22px; height:2px; } .site-header { position:relative; z-index:5; } .site-header nav { display:none; position:absolute; top:87px; left:0; right:0; background:#14252c; padding:25px 6%; border-bottom:1px solid #ffffff40; font-size:16px; } .site-header nav.open { display:flex; flex-direction:column; gap:23px; } .hero { padding-top:24px; padding-bottom:30px; } .hero-grid { grid-template-columns:1fr; gap:30px; padding-top:33px; } .hero h1 { font-size:clamp(58px,14vw,80px); margin-bottom:24px; } .hero-copy>p { font-size:16px; max-width:390px; } .hero-copy .hero-detail { font-size:14px; } .hero-topline .eyebrow { font-size:8px; } .hero-actions { gap:23px; } .hero-actions .button { font-size:13px; padding:15px 19px; } .hero-actions .text-link { font-size:12px; } .hero-footnote { margin-top:22px; } .photo-frame { height:auto; aspect-ratio:4/5; } .photo-frame img { object-position:50% 20%; } .image-caption { font-size:8px; justify-content:space-between; flex-wrap:nowrap; } .portrait-grid { grid-template-columns:1fr; gap:32px; } .portrait-card:nth-child(2) { margin-top:0; } .portrait-image { aspect-ratio:4/5; } .portrait-caption { flex-direction:row; align-items:center; gap:15px; } .portrait-caption h3 { font-size:23px; } .portrait-caption>span { font-size:9px; } .gallery-note { flex-direction:column; gap:15px; } .engagement-grid { grid-template-columns:1fr; gap:35px; } .engagement-grid article { display:grid; grid-template-columns:35px 1fr; column-gap:12px; } .engagement-number { grid-row:1/5; margin:4px 0 0; } .engagement-grid h3 { font-size:25px; } .engagement-grid p { max-width:none; font-size:14px; } .engagement-grid ul { font-size:14px; } .engagement-grid .text-link { justify-self:start; } .engagements { padding-top:0; } .ticker>div { gap:16px; padding-block:21px; flex-wrap:wrap; justify-content:center; } .ticker span { font-size:9px; letter-spacing:1px; } .ticker b { font-size:14px; } .contact h2 { font-size:65px; } .contact-email { font-size:14px; } .footer-top { align-items:center; } .footer-top .brand-lockup img { width:48px; height:50px; } .footer-top .brand-lockup>span { font-size:22px; } .footer-top p { font-size:12px; } .footer-bottom { font-size:10px; } .service-card p { font-size:14px; } .industry-strip>span { font-size:12px; } }
@media(max-width:360px) { .hero h1 { font-size:55px; } .hero-actions { gap:12px; } .hero-actions .text-link { font-size:11px; } .hero-actions .button { padding:14px; } .contact h2 { font-size:55px; } .process-grid { grid-template-columns:1fr; } .image-caption { font-size:7px; } .form-row { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .motion-toggle { display:none; } .portrait-image img { transition:none; } }

/* Display serif establishes the editorial voice; Manrope keeps detail readable. */
h2 { font-family:var(--display); font-weight:400; font-size:clamp(44px,4.5vw,64px); letter-spacing:-.025em; line-height:1.06; }
.hero h1 { font-family:var(--display); font-size:clamp(80px,8vw,116px); font-weight:400; letter-spacing:-.03em; line-height:.96; }
.hero h1 .orange { font-style:italic; }
.contact h2 { font-family:var(--display); font-weight:400; letter-spacing:-.03em; font-size:clamp(74px,7.5vw,108px); line-height:.98; }
.eyebrow,.location { font-size:11px; letter-spacing:1.2px; }
.section-heading>p,.about-layout p,.service-card p,.engagement-grid p,.process-grid p,.insights-grid p,details p { font-size:15px; }
.hero-art { perspective:1200px; }
@media(min-width:801px) {
  .photo-frame { transform:rotateY(-6deg) rotateX(3deg) rotateZ(-1deg); transform-style:preserve-3d; overflow:visible; }
  .photo-frame img { position:relative; z-index:1; }
  .photo-frame:before { content:''; position:absolute; inset:0; background:#263d46; transform:translateZ(-14px) translateX(7px); box-shadow:22px 25px 45px #0003; }
  .photo-frame:after { content:''; display:block; position:absolute; top:0; right:-14px; width:14px; height:100%; background:#425962; transform:rotateY(90deg); transform-origin:left; }
}
@media(max-width:1100px) { .hero h1 { font-size:94px; } }
@media(max-width:900px) { .hero h1 { font-size:84px; } }
@media(max-width:800px) { .hero h1 { font-size:78px; } .contact h2 { font-size:88px; } }
@media(max-width:600px) { .hero h1 { font-size:clamp(68px,18vw,94px); line-height:.99; } h2 { font-size:44px; } .contact h2 { font-size:78px; } .hero-topline .eyebrow { font-size:10px; letter-spacing:.8px; } .eyebrow { font-size:10px; } .hero-footnote { font-size:9px; } }
@media(max-width:360px) { .hero h1 { font-size:65px; } .contact h2 { font-size:69px; } h2 { font-size:40px; } }
@media(prefers-reduced-motion:reduce) { .photo-frame { transform:none; } }