/* Layout matched to the running source site; explicit client changes remain. */ :root { --paper: #fff; --dark: #000; --gold: #efc379; } body { background:#fff; } .site-header, .site-header.over-hero { position:absolute; top:0; background:none; border:0; color:#fff; pointer-events:none; } .header-inner { width:calc(100% - 100px); height:112px; flex-direction:row-reverse; } .header-inner > a, .header-actions, .menu-button { pointer-events:auto; } .header-actions { display:flex; align-items:center; } .account-menu, .header-actions>.account-trigger { position:fixed; right:120px; top:29px; z-index:30; } .account-trigger { min-width:50px; height:50px; padding:0 14px; border:0; border-radius:8px; background:#2229; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; } .account-trigger svg { width:22px; height:22px; stroke-width:1.5; } .account-user span { font-size:13px; white-space:nowrap; } .account-dropdown { position:absolute; top:calc(100% + 10px); right:0; min-width:190px; padding:9px; background:#fff; color:#222; border:1px solid #eee; box-shadow:0 15px 35px #0002; } .account-dropdown a { display:flex; align-items:center; gap:10px; padding:11px 9px; font-size:13px; } .account-dropdown a:hover { background:#f4f1ea; } .account-dropdown svg { width:17px; height:17px; } .header-inner .brand-wordmark { display:none; } .header-inner .brand-logo { width:65px; max-height:76px; object-fit:contain; } .desktop-nav, .header-contact { display:none; } .menu-button { display:grid; place-items:center; position:fixed; right:50px; top:28px; color:white; background:#2229; border-radius:8px; width:56px; height:52px; } .menu-button svg { width:28px; height:28px; stroke-width:1.4; } .mobile-menu { width:100%; max-width:100%; height:100dvh; background:#222; color:#fff; padding:65px 100px; } .mobile-menu .menu-top { flex-direction:row-reverse; margin-bottom:10px; } .mobile-menu .brand-wordmark, .mobile-menu nav small, .mobile-menu nav svg, .menu-phone { display:none; } .mobile-menu .icon-button { border:0; } .mobile-menu .icon-button svg { width:32px; height:32px; } .mobile-menu nav { width:min(420px,100%); margin-left:auto; } .mobile-menu nav a { border:0; padding:20px 0; font-size:25px; } .reference-home { position:relative; background:#fff; } .reference-home.is-desktop, .reference-home.is-desktop > .swiper { height:100svh; } .reference-home.is-desktop .swiper-slide { height:100%; } .reference-hero { height:100svh; min-height:600px; position:relative; color:#fff; } .reference-hero-image { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .reference-hero-copy { position:absolute; top:50%; left:50%; transform:translate(-50%,-35%); width:90%; text-align:center; } .reference-hero h1 { font-size:clamp(42px,4.2vw,64px); line-height:1.5; color:#fff; text-shadow:0 2px 16px #0004; } .reference-gold-button { background:var(--gold); color:#292929; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; width:160px; height:56px; margin-top:64px; font-size:13px; } .reference-discover { position:absolute; right:9.5%; bottom:9.5%; display:flex; flex-direction:row-reverse; align-items:center; gap:44px; background:none; border:0; color:#fff; font-size:15px; } .reference-play { width:110px; height:110px; background:var(--gold); border-radius:50%; display:grid; place-items:center; } .reference-feature { display:grid; grid-template-columns:1fr 1fr; direction:ltr; height:100svh; min-height:650px; } .reference-feature-image { position:relative; min-width:0; } .reference-feature-image img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; } .reference-feature-info { position:relative; direction:rtl; background:#fff; display:flex; align-items:center; justify-content:flex-start; padding:70px max(9.5vw,75px) 70px 85px; } .reference-feature-copy { width:100%; max-width:350px; } .reference-english { letter-spacing:4px; font-size:15px; text-align:right; color:#222; margin-bottom:32px; white-space:nowrap; } .reference-feature h2 { position:relative; font-size:32px; line-height:1.5; margin-bottom:48px; } .reference-number { position:absolute; right:-42px; top:12px; font-size:18px; color:#333; } .reference-description { font-size:15px; line-height:1.85; text-align:justify; color:#666; } .reference-letter { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); font-family:Arial,sans-serif; font-size:clamp(180px,20vw,310px); font-weight:300; line-height:1; color:var(--gold); z-index:2; pointer-events:none; } .reference-project-link { display:flex; align-items:center; gap:18px; margin-top:clamp(55px,12vh,130px); font-size:13px; } .reference-project-link svg { color:#b4b4b4; } .feature-dark .reference-feature-info { background:#000; color:#fff; } .feature-dark .reference-english, .feature-dark .reference-description { color:#fff; } .feature-dark .reference-number { color:#a9a9a9; } .reference-pagination { position:absolute; z-index:10; right:3.5%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; } .reference-pagination button { width:30px; height:24px; display:grid; place-items:center; border:0; background:none; padding:0; } .reference-pagination span { width:10px; height:10px; border-radius:50%; background:#eee; } .reference-pagination.on-light span { background:#bdbdbd; } .reference-pagination button[aria-current] span { background:var(--gold); } .reference-home.is-stacked > .swiper > .swiper-wrapper { display:block; transform:none!important; } .reference-home.is-stacked .swiper-slide { height:auto!important; } .page-heading { height:690px; min-height:0; padding:0; display:grid; place-items:center; text-align:center; background-image:url('/img/subheader/bg.jpg'); background-position:center; color:#222; } .page-heading h1, .page-heading .eyebrow { color:#222; } .page-heading .container { display:flex; flex-direction:column; align-items:center; } .page-heading h1 { font-size:40px; order:0; margin:0 0 12px; } .page-heading .eyebrow { order:1; margin:0; font-size:18px; letter-spacing:5px; text-align:center; } .page-heading .breadcrumb, .page-heading p { display:none; } .reference-services { width:min(1100px,calc(100% - 80px)); margin:-100px auto 110px; position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; } .reference-service-card { background:#fff; padding:60px 48px; box-shadow:0 12px 42px #0000000c; scroll-margin-top:30px; } .reference-service-card h2 { font-size:21px; } .reference-service-card .reference-english { text-align:right; } .reference-service-card .reference-english { white-space:normal; font-size:12px; letter-spacing:4px; margin:0; padding-bottom:20px; border-bottom:1px solid #ddd; } .reference-service-card .service-card-text { margin-top:28px; } .reference-service-card p { font-size:15px; line-height:2.1; text-align:justify; } .reference-about-hero { min-height:100svh; background:url('/img/info/bg.jpg') center/cover; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:150px 20px 90px; text-align:center; } .reference-about-hero .reference-english { font-size:23px; margin:0 0 25px; text-align:center; } .reference-about-hero h1 { font-size:32px; line-height:1.5; } .reference-about-icons { display:flex; direction:ltr; gap:100px; margin-top:65px; } .reference-about-icons span { width:160px; height:160px; display:grid; place-items:center; border-radius:50%; background:#ef0060; } .reference-about-icons span:nth-child(2) { background:#efb900; } .reference-about-icons span:nth-child(3) { background:#096bd9; } .reference-about-icons img { width:60px; height:80px; object-fit:contain; } .reference-about-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:110px; width:min(1100px,calc(100% - 80px)); margin:100px auto; } .reference-about-intro h2 { font-size:30px; margin-bottom:8px; } .reference-about-intro .reference-english { text-align:right; } .reference-about-intro .reference-english { font-size:15px; letter-spacing:4px; margin-bottom:70px; } .reference-about-intro p { font-size:15px; line-height:2; text-align:justify; } .reference-about-intro img { width:445px; max-width:100%; justify-self:center; } .reference-about-values { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12%; padding:20px 30px 100px; } .reference-about-values > img { width:100%; } .reference-about-values-copy { max-width:330px; } .reference-about-values h2 { font-size:30px; } .reference-about-values .reference-english { white-space:normal; font-size:28px; letter-spacing:3px; margin-bottom:30px; } .reference-about-values p { font-size:13px; } .reference-progress { margin-top:40px; } .reference-progress label { display:block; font-size:13px; margin-bottom:12px; } .reference-progress progress { appearance:none; display:block; height:4px; width:100%; border:0; background:#f3f3f3; } .reference-progress progress::-webkit-progress-bar { background:#f3f3f3; } .reference-progress progress::-webkit-progress-value { background:var(--gold); } .reference-progress progress::-moz-progress-bar { background:var(--gold); } .reference-faq { max-width:1100px; margin:30px auto 120px; width:calc(100% - 80px); } .reference-faq > div { width:50%; margin-left:auto; } .reference-faq h2 { font-size:30px; } .reference-faq .reference-english { font-size:16px; margin-bottom:35px; } .reference-faq p { font-size:15px; margin-bottom:24px; } .reference-contact { max-width:1100px; width:calc(100% - 80px); margin:55px auto 80px; display:grid; grid-template-columns:repeat(3,1fr); gap:65px; } .reference-contact h2 { font-size:21px; text-align:center; margin-bottom:35px; } .reference-contact p, .reference-contact a { font-size:17px; color:#666; } .reference-contact p { margin-bottom:10px; } .reference-contact .contact-address-latin { font-size:14px; } .reference-contact-links a { display:block; text-align:center; margin-bottom:16px; overflow-wrap:anywhere; } .reference-contact-social { display:flex; justify-content:center; gap:24px; } .reference-contact-social a { display:flex; flex-direction:column; align-items:center; gap:9px; } .reference-contact-social svg { padding:14px; width:50px; height:50px; background:#eee; border-radius:50%; } .reference-message { margin:80px auto 110px; padding:0 20px; } .reference-message h2 { text-align:center; font-size:30px; } .reference-message .reference-english { text-align:center; margin:5px 0 45px; } .reference-message .contact-form { width:min(540px,100%); margin:auto; } .reference-message .form-grid { grid-template-columns:1fr; gap:26px; } .reference-message .contact-form label { font-size:13px; } .reference-message .contact-form input, .reference-message .contact-form textarea { background:#fff; border:1px solid #ddd; } .form-status.success { color:#39744c; } .form-status.error { color:#a33b35; } .contact-form button:disabled { opacity:.58; cursor:wait; } .toast { position:fixed; z-index:80; left:30px; bottom:30px; width:min(420px,calc(100% - 40px)); padding:17px 18px; background:#1f2721; color:#fff; display:flex; align-items:center; gap:12px; box-shadow:0 14px 40px #0004; } .toast>svg { color:var(--gold); flex:none; } .toast span { flex:1; font-size:14px; } .toast button { border:0; background:none; color:#fff; padding:5px; } .toast button svg { width:18px; height:18px; } .editorial-list { padding-block:80px 110px; } .editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:55px 30px; } .editorial-grid article { min-width:0; } .editorial-image { aspect-ratio:4/3; overflow:hidden; background:#eeeae1; margin-bottom:20px; } .editorial-image img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease; } .editorial-grid a:hover .editorial-image img { transform:scale(1.045); } .editorial-grid small { color:#9a8055; font-size:11px; } .editorial-grid h2, .editorial-grid h3 { font-size:22px; margin:8px 0 12px; } .editorial-grid p { color:#777; font-size:14px; line-height:1.9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .editorial-grid a>span { display:flex; align-items:center; gap:9px; margin-top:18px; font-size:13px; } .empty-content { text-align:center; max-width:700px; margin:auto; } .empty-thumbnail { width:100%; aspect-ratio:16/7; background:linear-gradient(135deg,#ece8df,#f7f5f0); position:relative; } .empty-thumbnail:after { content:'BLOG'; position:absolute; inset:0; display:grid; place-items:center; color:#c8baa0; font-family:Arial,sans-serif; letter-spacing:14px; font-size:clamp(30px,7vw,70px); } .empty-content h2 { margin:35px 0 12px; font-size:27px; } .empty-content p { color:#777; } .editorial-detail, .portfolio-api-detail { max-width:1050px; padding-block:150px 100px; } .editorial-detail .text-link, .portfolio-api-detail .text-link { display:inline-block; margin-bottom:50px; } .editorial-detail h1, .portfolio-api-detail h1 { font-size:clamp(34px,5vw,58px); margin:12px 0 20px; } .editorial-lead, .portfolio-api-detail header p { color:#777; font-size:18px; max-width:760px; } .editorial-cover { width:100%; max-height:620px; object-fit:cover; margin:55px 0; } .rich-content { font-size:16px; line-height:2.2; color:#555; } .rich-content h2 { color:#222; font-size:28px; margin:45px 0 15px; } .rich-content img { max-width:100%; height:auto; } .media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:55px 0; } .media-gallery button { border:0; background:none; overflow:hidden; padding:0; aspect-ratio:4/3; cursor:zoom-in; } .media-gallery button:first-child { grid-column:1/-1; aspect-ratio:16/9; } .media-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .media-gallery button:hover img { transform:scale(1.08); } .lightbox { position:fixed; inset:0; z-index:100; background:#080808ed; display:grid; place-items:center; color:#fff; padding:40px 90px; } .lightbox>img { max-width:100%; max-height:calc(100dvh - 80px); object-fit:contain; } .lightbox button { position:absolute; border:0; background:#ffffff18; color:#fff; width:48px; height:48px; display:grid; place-items:center; } .lightbox-close { top:25px; right:25px; } .lightbox-prev { right:25px; top:50%; } .lightbox-next { left:25px; top:50%; } .lightbox>span { position:absolute; bottom:18px; font-family:Arial,sans-serif; } .related-work { padding-bottom:110px; } .related-work>h2 { font-size:30px; margin-bottom:35px; } .reference-message .form-bottom { flex-direction:column; align-items:stretch; } .reference-message .form-bottom button { align-self:center; background:var(--gold); color:#222; border-radius:4px; } .site-footer { background:#000; } .reference-footer-main { padding:140px 0 85px; width:calc(100% - 19%); margin:auto; display:grid; grid-template-columns:1fr 1.8fr; gap:70px; direction:ltr; } .reference-footer-intro, .reference-footer-details { direction:rtl; } .reference-footer-intro .brand-wordmark { display:none; } .reference-footer-intro .brand-logo { width:110px; margin:0 auto 35px; } .reference-footer-intro p { font-size:18px; line-height:1.65; color:white; text-align:justify; } .reference-footer-details { display:grid; grid-template-columns:1fr 1fr; gap:50px; } .reference-footer-details h3 { font-size:20px; margin-bottom:30px; } .reference-footer-details p, .reference-footer-details a { color:#eee; font-size:15px; } .reference-footer-details .footer-contact a { font-size:16px; margin-bottom:12px; } .reference-footer-details .footer-contact .email { font-size:13px; } .reference-footer-details .footer-offices { display:block; } .reference-footer-details .footer-offices p { margin-bottom:16px; } .reference-footer-nav { display:flex; justify-content:center; gap:40px; padding:0 20px 55px; font-size:14px; } .footer-bottom { background:#111; } @media (max-width:1200px) { .reference-feature-info { padding-right:85px; padding-left:70px; } .reference-feature h2 { font-size:30px; margin-bottom:30px; } .reference-english { font-size:12px; letter-spacing:3px; } .reference-description { font-size:14px; } .reference-project-link { margin-top:55px; } .reference-footer-main { width:calc(100% - 100px); gap:40px; } .reference-footer-details { gap:30px; } .reference-footer-intro p { font-size:16px; } } @media (max-width:899px), (max-height:649px) { .reference-feature { min-height:650px; height:auto; } .reference-feature-info { padding:90px 55px 90px 60px; } .reference-letter { font-size:160px; } .reference-english { white-space:normal; } .reference-about-intro { gap:45px; } .reference-about-values { gap:7%; } .reference-about-icons { gap:50px; } .reference-about-icons span { width:130px; height:130px; } .reference-footer-main { grid-template-columns:1fr; padding-top:80px; } .reference-footer-intro { max-width:650px; } .reference-contact { gap:30px; } .editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:650px) { .header-inner { width:calc(100% - 40px); height:90px; } .header-inner .brand-logo { width:48px; } .menu-button { right:20px; top:20px; width:48px; height:48px; } .account-menu, .header-actions>.account-trigger { right:78px; top:20px; } .account-trigger { min-width:48px; width:48px; height:48px; padding:0; } .account-user { width:auto; max-width:180px; padding:0 12px; } .account-user span { max-width:90px; overflow:hidden; text-overflow:ellipsis; } .mobile-menu { padding:25px; } .mobile-menu nav a { font-size:22px; padding:18px 0; } .reference-hero { min-height:620px; } .reference-hero h1 { font-size:clamp(30px,7.4vw,42px); } .reference-hero-copy { transform:translate(-50%,-55%); } .reference-gold-button { margin-top:38px; } .reference-discover { right:25px; bottom:35px; gap:22px; font-size:13px; } .reference-play { width:70px; height:70px; } .reference-feature { display:flex; flex-direction:column; min-height:0; } .reference-feature-image { height:52svh; min-height:300px; } .reference-feature-info { padding:65px 40px 55px; min-height:430px; } .reference-feature-copy { max-width:none; } .reference-letter { left:35px; top:0; font-size:115px; transform:translateY(-50%); } .reference-number { position:static; display:inline-block; margin-left:16px; font-size:14px; } .reference-feature h2 { display:flex; align-items:start; font-size:28px; margin-bottom:28px; } .reference-feature .reference-english { margin-bottom:20px; font-size:12px; } .reference-description { font-size:15px; } .reference-project-link { margin-top:35px; } .page-heading { height:430px; } .page-heading h1 { font-size:32px; } .page-heading .eyebrow { font-size:14px; } .reference-services { width:calc(100% - 40px); grid-template-columns:1fr; gap:25px; margin-top:-55px; margin-bottom:65px; } .reference-service-card { padding:35px 25px; } .reference-service-card h2 { font-size:22px; } .reference-about-hero { min-height:700px; padding:140px 20px 90px; } .reference-about-hero h1 { font-size:28px; } .reference-about-icons { gap:22px; margin-top:50px; } .reference-about-icons span { width:80px; height:80px; } .reference-about-icons img { width:35px; height:45px; } .reference-about-intro { grid-template-columns:1fr; width:calc(100% - 40px); margin-block:65px; gap:35px; } .reference-about-intro h2 { font-size:27px; } .reference-about-intro .reference-english { margin-bottom:30px; font-size:12px; letter-spacing:2px; } .reference-about-intro img { width:340px; } .reference-about-values { grid-template-columns:1fr; padding:0 20px 60px; gap:35px; } .reference-about-values-copy { max-width:none; } .reference-about-values h2 { font-size:26px; } .reference-about-values .reference-english { font-size:22px; } .reference-faq { width:calc(100% - 40px); margin-bottom:70px; } .reference-faq > div { width:100%; } .reference-contact { width:calc(100% - 40px); grid-template-columns:1fr; margin-block:50px; gap:45px; } .reference-contact h2 { margin-bottom:20px; } .reference-contact p, .reference-contact a { font-size:16px; } .reference-message { margin-block:60px; } .reference-message h2 { font-size:25px; } .reference-footer-main { width:calc(100% - 40px); padding-top:60px; padding-bottom:40px; } .reference-footer-details { grid-template-columns:1fr; gap:35px; } .reference-footer-details h3 { font-size:19px; margin-bottom:22px; } .reference-footer-intro p { font-size:16px; } .reference-footer-nav { flex-wrap:wrap; gap:18px 25px; padding-bottom:35px; } .editorial-list, .editorial-detail, .portfolio-api-detail { padding-block:65px 80px; } .editorial-grid { grid-template-columns:1fr; } .media-gallery { grid-template-columns:1fr; gap:14px; } .media-gallery button:first-child { grid-column:auto; } .lightbox { padding:70px 15px; } .lightbox-prev { right:10px; } .lightbox-next { left:10px; } .toast { left:20px; bottom:20px; } } @media (prefers-reduced-motion:no-preference) { .reference-home .swiper-slide-active .reference-feature-copy { animation:gentle-entry .6s ease both; } .reference-project-link svg { transition:transform .25s; } .reference-project-link:hover svg { transform:translateX(-8px); } }