/*   
Theme Name: Liry
Description: Tema para o site da Liry.
Author: Camila Lins
Author URI: http://camilalins.co
Version: 2025
*/

@charset "utf-8";

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; vertical-align:baseline;}
input:focus, textarea:focus, button:focus, select:focus {outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#bf61f6; color:#2F0F40; text-shadow:none;}
::selection {background:#bf61f6; color:#2F0F40; text-shadow:none;}

::-webkit-input-placeholder {color:#e4f549;}
::-moz-placeholder {color:#e4f549;}
::placeholder {color:#e4f549;}

*::-webkit-media-controls-start-playback-button {display:none !important; -webkit-appearance:none;}

/* Toolbox */
.hidden {display:none !important;}
.flex {display:flex;}

/* Variáveis */
:root {
    --cor-roxo:#bf61f6;
    --cor-roxo-escuro:#8d36c1;
    --cor-roxo-preto:#2F0F40;
    --cor-verde:#e4f549;
    --cor-verde-escuro:#bdcc32;
    --cor-bege:#f4ece0;
    --cor-error:#ee442e;

    --padding:30px;
}

/* Page style */
html {overscroll-behavior:none; background:var(--cor-roxo-escuro); scrollbar-color:var(--cor-verde) var(--cor-roxo-escuro); min-height:100vh;}
body::-webkit-scrollbar {width:8px;}
body::-webkit-scrollbar-track {box-shadow:inset 0 0 3px rgba(0, 0, 0, .75); background:var(--cor-roxo-escuro);}
body::-webkit-scrollbar-thumb {background-color:var(--cor-verde); border-radius:5px;}

body {font:18px 'Chivo', sans-serif; color:var(--cor-bege); min-height:100vh;}

a {color:#000; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all 250ms ease-out;}

.mobile-check {display:none;}

#wrap {position:relative; z-index:500; min-height:100vh; overflow-x: hidden;}
.wrapper {max-width:880px; width:100%; margin:0 auto;}

#background {position:absolute; top:0; left:0; right:0; height:100%; z-index:-2; opacity: .75;}
#background canvas {width:100% !important; height:100% !important; pointer-events:none;}
#grain {position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; background:url(img/layout/grain.png); background-position:0% 0%; animation:grain 800ms infinite; mix-blend-mode:overlay; opacity:.5; pointer-events:none;}

@keyframes grain {
    0% {background-position:0% 0%;}
    10% {background-position:-1% -2%;}
    20% {background-position:1% 1%;}
    30% {background-position:-2% -1%;}
    40% {background-position:4% 8%;}
    50% {background-position:-10% -3%;}
    60% {background-position:4% 5%;}
    70% {background-position:-4% -4%;}
    80% {background-position:7% 9%;}
    90% {background-position:-5% -2%;}
    100% {background-position:3% 0%;}
}

/* Common */
section {min-height:100vh; display:flex; align-items:center;}
.top, .bottom {display:flex; gap:45px; margin:0 auto;}
.left, .right {width:50%;}
.left {text-align:right;}

.lora {font:italic 700 110%/90% 'Lora', Georgia, serif;}

.loading {opacity: 0;}

/* Menu */
#menu {position:fixed; right:0; top:50%; translate:0 -50%; padding-right:var(--padding); text-align:right;}
#menu li {font-size:15px; line-height:40px; font-weight:500; cursor:pointer; transition:all 250ms ease-out;}
#menu li .dot {display:inline-block; width:20px; height:20px; background:var(--cor-roxo); border-radius:100%; vertical-align:middle; margin:0 5px 0 10px; transition:all 250ms ease-out;}
#menu li.active {font-size:20px; font-weight:700;}
#menu li.active .dot {background:var(--cor-verde);}
#menu li:hover .dot {background:var(--cor-verde); scale:1.1;}

/* Social links */
#social {position:fixed; top:var(--padding); right:var(--padding); display:flex; gap:15px; align-items: center;}
#social a {display:block; color:var(--cor-verde); text-transform:lowercase; font-size:18px; font-weight:500;}
#social a.icon {width:32px; height:32px; text-indent:-99999px;}
#social a:nth-child(2) {background:url(img/layout/icon-whatsapp.svg) no-repeat;}
#social a:nth-child(3) {background:url(img/layout/icon-instagram.svg) no-repeat;}
#social a:nth-child(4) {background:url(img/layout/icon-email.svg) no-repeat;}
#social a:hover {scale:1.2;}

/* Main */
#wrap h1.main {text-indent:-99999px; background:url(img/layout/logo.svg) no-repeat center / 100%; width:100%; height:0; padding-bottom:54.67%; text-align:initial;}
#wrap h2.tagline {text-indent:-99999px; background:url(img/layout/tagline.svg) no-repeat center / 100%; width:100%; height:0; padding-bottom:20.70%;}

#start .top {max-width:645px; margin-bottom:calc(var(--padding) * 3);}
#start .top .left {padding-left:13.88%;}

#start .bottom {max-width:817px; transition:all 500ms ease-out;}
#start .bottom h2 {font-size:36px; line-height:42px; font-weight:600;}
#start .bottom .left p {font-size:27px; line-height:32px; font-weight:600; margin-top:20px;}
#start .bottom .right p {font-size:22px; font-weight: 500; margin-bottom:20px;}

#start form button {background: url(img/layout/submit.gif) no-repeat left center / auto 100%; min-height:90px;}
#start form button:hover, #start form button:focus {background-image:url(img/layout/submit-hover.gif);}

.logo-wrapper {position: relative; height:0; top:0; left:0; transition:all 500ms ease-out;}
#logo {width:100%; display:flex; align-items:center; gap:45px; position:absolute;}
#logo .left {transition: all 500ms ease-out;}
#logo .right {transition: all 500ms ease-out;}
#logo.fixed {position:fixed; top:var(--padding); left:var(--padding); max-width:220px; gap:20px;}
#logo.fixed .left {width:37.75%; padding-left:0;}
#logo.fixed .right {width:62.26%;}

/* Serviços */
#services .top {margin-bottom:var(--padding);}
#services h2 {font-size:40px; line-height:46px; font-weight:600; color:var(--cor-verde);}
#services .top p {font-size:22px; line-height:32px;}
#services .bottom p {font-size:20px; line-height:24px;}
#services ul {display: flex; flex-direction: column; gap:18px;}
#services li {font-size:26px;}
#services li span {color:var(--cor-bege); font-weight:400;}
#services li strong {font-weight:600; background: var(--cor-roxo); color:var(--cor-bege)}

/* Quem somos */
#us .top {align-items:center; margin-bottom:var(--padding);}
#us h2 {font-size:48px; line-height:125%; font-weight:600;}
#us h3 {font-size:30px; line-height:130%; font-weight:500; color:var(--cor-verde);}
#us .intro {width:182px; text-align:center;}
#us .left, #us .right {position: relative;}
#us .left .intro {margin-left:auto;}
#us .intro .thumb {overflow:hidden; border-radius:100%; margin-bottom:15px; transition:all 350ms ease-out;}
#us .intro h4 {font-size:22px; font-weight:600; color:var(--cor-verde); transition:all 350ms ease-out;}
#us .intro h5 {margin:10px 0; font-size:20px; font-weight:500;}
#us .intro .links {display:flex; justify-content: center; gap:10px;}
#us .intro .links a {display:block; width:32px; height:32px; text-indent:-99999px;}
#us .intro .links a:hover {scale:1.2;}
#us .intro .links .email {background:url(img/layout/icon-email.svg) no-repeat;}
#us .intro .links .site {background:url(img/layout/icon-site.svg) no-repeat;}
#us .intro .links .instagram {background:url(img/layout/icon-instagram.svg) no-repeat;}
#us .info {opacity: 0; visibility: hidden; pointer-events: none; scale:.5; position:absolute; background:var(--cor-verde-escuro); color:var(--cor-roxo-preto); text-align:left; width:32vw; max-width:600px; padding:30px; border-radius:20px; transition:all 350ms ease-out; box-shadow:0px 2px 8px 0 var(--cor-roxo-escuro);}
#us .left .info {transform-origin:right center;}
#us .right .info {transform-origin:left center;}
#us .info p {margin-bottom:30px; font-weight:500;}
#us .info p:last-of-type {margin-bottom:0px;}
#us .info p strong {font-weight:700;}
#us .left .info {top:50%; right:188px; translate:0 -50%;}
#us .right .info {top:50%; left:188px; translate:0 -50%;}

#us .bottom div:hover .intro .thumb {scale:1.1; box-shadow:0 0 10px 4px var(--cor-roxo);}
#us .bottom div:hover .intro h4 {color: var(--cor-verde-escuro);}
#us .bottom div:hover .info {opacity: 1; visibility: visible; pointer-events: all; scale:1;}

/* Contato */
#contact .top {align-items:center; margin-bottom:var(--padding);}
#contact .top p {font-size:22px; line-height:130%; color:var(--cor-verde); font-weight:500;}
#contact h2 {font-size:40px; line-height:130%; font-weight:600;}
#contact .links {display: flex; flex-direction: column; align-items: end;}
#contact .links a {display:inline-block; font-size:22px; line-height:50px; font-weight:600; color:var(--cor-bege); position: relative;}
#contact .links a::after {transition: all 250ms ease-out; content:''; position:absolute; top:50%; left:50%; width:calc(100% + 40px); height:50px; translate:-50% -50%; background:var(--cor-roxo); border:2px solid var(--cor-bege); z-index:-1; border-radius:50px; opacity: 0;}
#contact .links a:hover::after {opacity: 1;}

#contact form button {background: url(img/layout/submit-contact.gif) no-repeat left center / auto 100%; padding:0 20px; min-height:50px;}
#contact form button:hover, #contact form button:focus {background-image:url(img/layout/submit-contact-hover.gif);}

/* Formulários */
form label {display:flex; align-items:center; gap:3px; margin-bottom:24px; color:var(--cor-verde);}
form label svg {transition:250ms ease-out;}
form label:hover svg {scale:1.2;}
form input, form textarea {font-size:20px; font-weight:500; background:transparent; border:2px solid var(--cor-verde); width:100%; padding:0 16px; transition:all 250ms ease-out; color:var(--cor-bege);}
form input:focus, form textarea:focus {box-shadow:0 0 10px var(--cor-verde);}
form input:focus + svg, form textarea:focus + svg {scale:1.2;}
form input {line-height:60px;}
form textarea {padding:8px 16px; height:180px;}
form button {font:italic 700 28px/30px 'Lora', Georgia, serif; background:transparent; color:var(--cor-roxo); text-align:left; transition:all 250ms ease-out; padding:0px 24px;}
form button:hover, form button:focus {color:var(--cor-verde);}
form button.loading {opacity:.5; pointer-events:none;}
.type-file {position:relative; display:block; height:64px; border:2px solid var(--cor-verde); width:100%; padding:0 16px;}
.type-file input {width:0.1px; height:0.1px; opacity:0; overflow:hidden; position:absolute; z-index:-1;}
.type-file .file-name:empty {display:none;}
.type-file .file-name {left:0; top:0; bottom:0; right:0; position:absolute; font-size:20px; font-weight:500; color:var(--cor-verde); pointer-events:none; display:flex; align-items: center; padding:0 16px; word-break:break-all;}
.type-file .file-name.filled {color:var(--cor-bege);}
form .feedback {position: absolute; font-size:14px; font-weight:500; color:var(--cor-verde);}
form .feedback:empty {display:none;}
form .error input, form .error textarea {border-color:var(--cor-error);}
form .error svg {color:var(--cor-error);}

/* Erro 404 */
#error404 {min-height:100vh; max-width:580px; margin:0 auto; display:flex; flex-direction: column; align-items: flex-start; justify-content: center; padding:var(--padding); gap:var(--padding);}
#error404 h2 {font-size:3vw;}
#error404 a {color:var(--cor-bege); line-height:50px; position: relative;}
#error404 a::after {transition: all 250ms ease-out; content:''; position:absolute; top:50%; left:50%; width:calc(100% + 40px); height:50px; translate:-50% -50%; background:var(--cor-roxo); border:2px solid var(--cor-bege); z-index:-1; border-radius:50px; opacity: 0;}
#error404 a:hover::after {opacity: 1;}

/* Blog */
#page {max-width: 1200px; padding-top:calc(var(--padding) * 5); padding-bottom:calc(var(--padding) * 3); padding-left:var(--padding); padding-right:var(--padding);}
#page > h2 {font-size:40px; font-weight:800; padding-bottom: calc(var(--padding) * 2);}
#page > h2 a {color: var(--cor-bege);}

#inner-logo {width:20%; max-width:220px; display:flex; align-items: center; gap:10px; position: fixed; top:var(--padding); left:var(--padding); z-index:100;}
#inner-logo div {width: 100%;}

.posts-list {display: flex; flex-direction: column; gap:50px;}
.posts-list li a {display:flex; gap:50px;}
.posts-list li a:hover .thumb-wrapper {transform:scale(1.025);}
.posts-list .thumb-wrapper {align-self:flex-start; flex-shrink: 0; width: 50%; overflow: hidden; border-radius:16px; position: relative; background:rgba(255, 255, 255, .2); transition:all 250ms ease-out;}
.posts-list .thumb {width:100%; height:0; padding-bottom:62.5%; overflow: hidden;}
.posts-list .thumb img {position: absolute; top:50%; left:50%; translate:-50% -50%; max-width: 100%; min-width:100%; max-height:100%; min-height:100%; object-fit: cover;}
.posts-list .meta {display: flex; flex-direction: column; gap:10px; justify-content: center;}
.posts-list .meta span {color:var(--cor-roxo); font-weight:700; font-size:18px;}
.posts-list h3 {color:var(--cor-verde); font-size:40px; line-height:120%;}
.posts-list .meta p {font-size:24px; font-weight: 500; color:var(--cor-bege); line-height:120%;}

#page.single {}
#page.single .content {max-width:90%; margin:0 auto;}
#page.single .meta {display: flex; flex-direction: column; gap:20px; padding-bottom:10px; border-bottom:1px solid rgba(255, 255, 255, .3); margin-bottom:50px; position: relative;}
#page.single .meta:before {content:''; position: absolute; left:0; top:10px; width: 40px; height:40px; background:url(img/layout/star.svg) no-repeat; transform: translateX(calc(-100% - 16px));}
#page.single .meta h3 {color:var(--cor-verde); font-size: 50px; line-height: 120%;}
#page.single .meta h4 {font-size:26px; font-weight: 500;}
#page.single .meta span {font-size:20px; font-weight: 700; color:var(--cor-roxo);}

#page.single .entry {font-size:22px; width:90%; margin:0 auto;}
#page.single .entry p {margin-bottom:var(--padding);}
#page.single .entry a {color:var(--cor-bege); text-decoration: underline; font-weight: 500;}
#page.single .entry a:hover {color: var(--cor-verde);}
#page.single .entry h1 {font-size:200%; margin-bottom:8px;}
#page.single .entry h2 {font-size:180%; margin-bottom:8px;}
#page.single .entry h3 {font-size:160%; margin-bottom:8px;}
#page.single .entry h4 {font-size:135%; margin-bottom:8px;}
#page.single .entry h5 {font-size:120%; margin-bottom:8px;}
#page.single .entry h6 {font-size:110%; margin-bottom:8px;}
#page.single .entry blockquote {font:italic 600 32px/120% 'Lora', Georgia, serif; padding:0 16%; color:var(--cor-verde);}
#page.single .entry ul {margin-bottom: var(--padding); padding:0 16px; display: flex; flex-direction: column; gap:16px; list-style-type: disc; list-style-position: inside;}
#page.single .entry ul.none {list-style: none;}
#page.single .entry ol {margin-bottom: var(--padding); padding:0 16px; display: flex; flex-direction: column; gap:16px; list-style-position: inside;}
#page.single .entry li::marker {margin-right:4px; color: var(--cor-verde);}
#page.single .entry .wp-caption {margin:0 auto 50px; display: flex; flex-direction: column; gap:8px; align-items: center; justify-content: center; background:var(--cor-roxo); padding:8px; border-radius: 6px; max-width: 100%;}
#page.single .entry p.wp-caption-text {font-size:16px; margin:0;}
#page.single .entry img {height:auto;}
#page.single .entry hr {opacity:.3; border-color:#FFF; margin-bottom:var(--padding);}

#page.single .more-posts {display: flex; align-items: center; justify-content: center; gap:var(--padding); margin-top: 100px;}
#page.single .more-posts a {color:var(--cor-bege); text-transform: lowercase; font-size: 22px; line-height:42px; font-weight: 600; background: var(--cor-roxo); border:2px solid var(--cor-bege); padding:0 32px; border-radius:42px; position: relative;}
#page.single .more-posts .thumb {opacity: 0; visibility: hidden; pointer-events: none; position: absolute; bottom:calc(100% + 16px); right:0; padding:16px; background:var(--cor-roxo); width:300px; border:2px solid var(--cor-bege); border-radius:10px; transition:all 300ms ease-out;}
#page.single .more-posts .thumb::after {content:''; position: absolute; top:100%; right:16px; width:2px; height:2px; border:8px solid transparent; border-top-color:var(--cor-bege);}

#page.single .more-posts a:hover .thumb {opacity: 1; visibility: visible;}

#page.single .more-posts .next .thumb {right:auto; left:0;}
#page.single .more-posts .next .thumb::after {right:auto; left:16px;}

.lead-wrap {background: var(--cor-roxo); padding:16px 16px 32px; border-radius:6px;}
.lead-wrap form {display:flex; flex-direction: column; align-items: center; justify-content: center; gap:20px; position: relative;}
.lead-wrap form label {width: 100%; margin-bottom:0;}
.lead-wrap form button {background:var(--cor-verde); color:var(--cor-roxo); padding:0 32px; font-size:26px; line-height:50px; border-radius:50px;}
.lead-wrap form button:hover, .lead-wrap form button:focus {transform:scale(1.05)}
.lead-wrap form button.disabled {pointer-events: none; opacity: .5;}
.lead-wrap form .feedback {top:calc(100% + 6px);}

@media screen and (max-width:1200px) {
    #menu li {font-size:12px;}
    #menu li.active {font-size:15px;}
    #menu li .dot {margin:0 5px;}

    #us .info {width:30vw;}
    #us .info p {font-size:14px;}
}

@media screen and (max-width:1080px) {
    #menu {left:0; right:auto;}
    #menu ul {display:flex; flex-direction: row-reverse; transform:rotate(-90deg) translateX(-50%); transform-origin: left top; gap:15px; margin-left:10px;}
    #menu li .dot {display: none;}

    #page.single .content {max-width: 100%;}
    #page.single .meta:before {display: none;}
}

@media screen and (max-width:960px) {
    :root {--padding:20px;}

    #logo, .top, .bottom {gap:32px;}
    #logo.fixed {gap:10px;}
    form input, form textarea, .type-file .file-name {font-size:16px;}
    .wrapper {padding:0 20px;}

    #start .bottom h2 {font-size: clamp(1.625rem, 0.3875rem + 3vw, 2.1875rem); line-height: clamp(2rem, 0.4821rem + 3.5714vw, 2.625rem);}
    #start .bottom .left p {font-size: clamp(1.0625rem, -0.4554rem + 3.5714vw, 1.6875rem); line-height: clamp(1.375rem, -0.1429rem + 3.5714vw, 2rem);}
    
    #services h2 {font-size: clamp(1.875rem, 0.3571rem + 3.5714vw, 2.5rem); line-height: clamp(2.25rem, 0.7321rem + 3.5714vw, 2.875rem);}
    #services .top p {font-size: clamp(1rem, 0.0893rem + 2.1429vw, 1.375rem); line-height: clamp(1.625rem, 0.7143rem + 2.1429vw, 2rem);}
    #services li {font-size: clamp(1.125rem, 0.025rem + 2.6667vw, 1.625rem); line-height: clamp(2.375rem, 1rem + 3.3333vw, 3rem);}
    #services .bottom p {font-size: clamp(1rem, 0.45rem + 1.3333vw, 1.25rem);}

    #us h2 {font-size: clamp(2.375rem, 1rem + 3.3333vw, 3rem);}
    #us h3 {font-size: clamp(1.375rem, 0.275rem + 2.6667vw, 1.875rem);}
    #us .bottom div:hover .info {opacity: 0; visibility: hidden; pointer-events: none; scale: 0;}

    #contact h2 {font-size: clamp(1.875rem, 0.5rem + 3.3333vw, 2.5rem);}
    #contact .top p {font-size: clamp(1rem, 0.175rem + 2vw, 1.375rem);}
    #contact .links a {font-size: clamp(1.125rem, 0.575rem + 1.3333vw, 1.375rem);}

    .posts-list li a {flex-direction: column; gap:30px;}
    .posts-list .thumb-wrapper {width: 100%;}
}

@media screen and (max-width:660px) {
    #logo {gap:16px;}
    .top, .bottom {flex-direction: column;}
    .left, .right {width: 100%; text-align:center;}
    .wrapper {padding:0 60px;}
    form {margin-right:-32px;}

    #start .top {margin-bottom:4vw;}
    #start .bottom {flex-direction: column;}
    #start .bottom h2 {font-size: clamp(1.5rem, 0.4167rem + 4.4444vw, 2.25rem); line-height: clamp(2rem, 1.0972rem + 3.7037vw, 2.625rem);}
    #start .bottom .left p {font-size: clamp(1.0625rem, 0.1597rem + 3.7037vw, 1.6875rem); line-height: clamp(1.625rem, 1.0833rem + 2.2222vw, 2rem);}

    #services h2 {font-size: clamp(1.875rem, 0.9722rem + 3.7037vw, 2.5rem);}
    #services .top p {font-size: clamp(0.875rem, 0.3333rem + 2.2222vw, 1.25rem); line-height: clamp(1.5rem, 0.7778rem + 2.963vw, 2rem);}

    #services .bottom p {font-size:20px; font-weight: 700; margin:35px 0 -16px;}
    #services .bottom p br {display:none;}
    #services li {font-size: clamp(1.125rem, 0.4028rem + 2.963vw, 1.625rem); line-height: clamp(2.375rem, 1.4722rem + 3.7037vw, 3rem);}

    #us .top {gap:20px;}
    #us h2 {font-size: clamp(2.375rem, 1.4722rem + 3.7037vw, 3rem);}
    #us h3 {font-size: clamp(1.375rem, 1.0139rem + 1.4815vw, 1.625rem);}
    #us .intro {margin:0 auto; width: auto;}
    #us .intro h5 br {display: none;}
    #us .intro .thumb {max-width:182px; margin:0 auto 15px;}

    #contact .top {gap:20px;}
    #contact h2 {font-size: clamp(2rem, 1.2778rem + 2.963vw, 2.5rem); line-height:115%;}
    #contact .top p {font-size: clamp(0.875rem, 0.5139rem + 1.4815vw, 1.125rem); max-width:80%; margin:0 auto;}
    #contact .top p br {display: none;}
    #contact .links {align-items: center;}
    #contact .links a {line-height:40px;}
}

@media screen and (max-width:400px){
    #logo.fixed {max-width:180px;}
}

@media screen and (max-height:920px) {
    section {padding:80px 0;}
}