/* SMART America Institute — member directory. Editorial / modern brand system. (fonts.css linked in ) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root{ --teal-900:#142a2f; --teal-800:#1d363c; --teal-700:#27484f; --teal-600:#356069; --gold:#c6a14f; --gold-2:#e2cb8e; --cream:#f4efe3; --flag-blue:#27356a; --flag-red:#a8333a; --ink:#1f2a2b; --muted:#677573; --bg:#f6f3ec; --card:#fffefa; --line:#e9e3d5; --line-2:#f0ebdf; --shadow:0 1px 2px rgba(20,42,47,.04),0 10px 30px rgba(20,42,47,.06); --shadow-lg:0 24px 60px rgba(20,42,47,.16); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --maxw:1160px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%} a{color:var(--teal-600);text-decoration:none} a:hover{color:var(--gold)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600} /* ---------- Top bar ---------- */ .topbar{background:var(--teal-800);color:var(--cream);border-bottom:1px solid rgba(226,203,142,.18); position:sticky;top:0;z-index:50} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px} .brand{display:flex;align-items:center;gap:14px;color:var(--cream)} .brand:hover{color:var(--cream)} .brand .mark{width:44px;height:44px;border-radius:50%;flex:none;position:relative; background:radial-gradient(120% 120% at 30% 25%,var(--teal-600),var(--teal-900)); display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-weight:500;color:var(--gold-2);font-size:17px;letter-spacing:.5px; box-shadow:0 0 0 1px rgba(226,203,142,.5),inset 0 0 0 3px rgba(20,42,47,.4)} .brand .mark-img{width:50px;height:50px;border-radius:50%;flex:none;object-fit:cover; box-shadow:0 0 0 1px rgba(226,203,142,.55)} .brand .name{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:.2px;line-height:1.05} .brand .name small{display:block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-2);margin-top:5px;opacity:.85} .navlinks{display:flex;gap:30px;font-size:13.5px;font-weight:500} .navlinks a{color:rgba(244,239,227,.72);letter-spacing:.02em} .navlinks a:hover{color:var(--cream)} /* ---------- Masthead (brand banner image, desktop) ---------- */ .masthead{display:block;line-height:0;background:var(--teal-800)} .masthead img{width:100%;height:auto;display:block} /* mobile brand hero (shown only on small screens — see media query) */ .hero-m{display:none} /* ---------- Hero (fallback) ---------- */ .hero{background: radial-gradient(80% 130% at 88% -10%,rgba(198,161,79,.18),transparent 55%), linear-gradient(165deg,var(--teal-800) 0%,var(--teal-900) 100%); color:var(--cream);padding:96px 0 100px;position:relative;overflow:hidden} .hero:before{content:"";position:absolute;inset:0;opacity:.4; background-image:radial-gradient(rgba(226,203,142,.12) 1px,transparent 1.5px);background-size:34px 34px} .hero .wrap{position:relative;z-index:1} .hero .tricolor-bar{width:72px;height:4px;border-radius:3px;margin:0 0 26px; background:linear-gradient(90deg,var(--flag-blue) 0 34%,#f3efe4 34% 66%,var(--flag-red) 66% 100%)} .hero .eyebrow{color:var(--gold-2);margin:0 0 18px} .hero h1{font-family:var(--serif);font-size:60px;line-height:1.02;margin:0 0 22px;font-weight:300; letter-spacing:-.5px;color:var(--cream)} .hero p{max-width:600px;font-size:18px;line-height:1.7;color:rgba(244,239,227,.82);margin:0;font-weight:400} /* ---------- Section ---------- */ .section{padding:84px 0} .section-head{margin-bottom:48px;max-width:760px} .section-head .eyebrow{color:var(--gold);margin:0 0 14px} .section-head h2{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.3px;margin:0 0 12px;color:var(--teal-800)} .section-head p{margin:0;color:var(--muted);font-size:17px} /* ---------- Member grid ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px 26px; box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;overflow:hidden; transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s} .card:before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .3s ease} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#ddd2b6} .card:hover:before{width:100%} .card .top{display:flex;align-items:center;gap:17px;margin-bottom:18px} .avatar{width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-weight:500;font-size:23px;color:#fff;letter-spacing:.5px;overflow:hidden; box-shadow:0 0 0 1px rgba(20,42,47,.06),inset 0 0 0 2px rgba(255,255,255,.16)} .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .card .who h3{margin:0;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--teal-800);line-height:1.18} .card .who .role{font-family:var(--sans);font-size:11px;color:var(--gold);font-weight:600;letter-spacing:.08em; text-transform:uppercase;margin-top:5px} .card .bio{font-size:14.5px;color:var(--muted);margin:0 0 20px;flex:1;line-height:1.62} .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .tag{font-size:11px;color:var(--teal-700);background:transparent;border:1px solid var(--line); border-radius:999px;padding:4px 12px;font-weight:500;letter-spacing:.01em} .card .more{font-size:13px;font-weight:600;color:var(--teal-600);margin-top:auto;letter-spacing:.02em} .card:hover .more{color:var(--gold)} /* ---------- Profile page ---------- */ .profile-head{background: radial-gradient(70% 120% at 90% -20%,rgba(198,161,79,.16),transparent 55%), linear-gradient(165deg,var(--teal-800) 0%,var(--teal-900) 100%); color:var(--cream);padding:72px 0 64px;position:relative;overflow:hidden} .profile-head:before{content:"";position:absolute;inset:0;opacity:.35; background-image:radial-gradient(rgba(226,203,142,.12) 1px,transparent 1.5px);background-size:34px 34px} .profile-head .wrap{display:flex;gap:38px;align-items:center;position:relative;z-index:1} .profile-head .avatar{width:132px;height:132px;font-size:46px; box-shadow:0 0 0 1px rgba(226,203,142,.5),inset 0 0 0 3px rgba(20,42,47,.35),0 16px 40px rgba(0,0,0,.28)} .crumb{font-size:12px;letter-spacing:.04em;color:rgba(244,239,227,.6);margin-bottom:20px} .crumb a{color:rgba(244,239,227,.6)} .crumb a:hover{color:var(--gold-2)} .profile-head h1{font-family:var(--serif);font-size:46px;font-weight:300;letter-spacing:-.5px;margin:0 0 12px;line-height:1.04;color:var(--cream)} .profile-head .role{color:var(--gold-2);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px} .profile-head .affil{color:rgba(244,239,227,.85);font-size:15.5px;font-weight:400;max-width:560px} .profile-head .links{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap} .profile-head .links a{color:var(--cream);font-size:12.5px;font-weight:500;letter-spacing:.02em; border:1px solid rgba(226,203,142,.45);border-radius:999px;padding:7px 17px;display:inline-flex;align-items:center;gap:6px; transition:background .2s,border-color .2s} .profile-head .links a:hover{background:rgba(226,203,142,.14);border-color:var(--gold-2);color:var(--gold-2)} .profile-head .links a.pdf{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--teal-900);border-color:transparent;font-weight:600} .profile-head .links a.pdf:hover{filter:brightness(1.06);color:var(--teal-900)} .profile-body{padding:72px 0 88px} .profile-grid{display:grid;grid-template-columns:1fr 312px;gap:64px} @media(max-width:840px){.profile-grid{grid-template-columns:1fr;gap:44px}} .prose h2{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--teal-700);margin:0 0 18px;display:flex;align-items:center;gap:14px} .prose h2:after{content:"";flex:1;height:1px;background:var(--line)} .prose h2:not(:first-child){margin-top:44px} .prose p{margin:0 0 18px;font-size:16.5px;line-height:1.78;color:#33403f} .prose p:first-of-type{font-size:18px;line-height:1.7;color:var(--ink)} .prose ul{margin:0 0 18px;padding-left:0;list-style:none} .prose li{margin-bottom:11px;font-size:15.5px;line-height:1.6;padding-left:22px;position:relative} .prose li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%; background:var(--gold);box-shadow:0 0 0 3px rgba(198,161,79,.14)} .sidebar .box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 24px; box-shadow:var(--shadow);margin-bottom:20px} .sidebar h3{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px; font-weight:700;color:var(--gold);margin:0 0 16px} .sidebar .row{font-size:14px;margin-bottom:15px;line-height:1.45} .sidebar .row:last-child{margin-bottom:0} .sidebar .row .k{display:block;font-weight:600;color:var(--teal-800);margin-bottom:2px;font-size:14px} .sidebar .row .v{color:var(--muted);font-size:13.5px} .sidebar .taglist{display:flex;flex-wrap:wrap;gap:7px} /* ---------- Footer ---------- */ .footer{background:var(--teal-900);color:rgba(244,239,227,.62);padding:52px 0;font-size:13.5px; border-top:1px solid rgba(226,203,142,.16)} .footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center} .footer .fbrand{display:flex;align-items:center;gap:16px} .footer .fbrand img{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(226,203,142,.45)} .footer .name{font-family:var(--serif);color:var(--cream);font-size:19px;font-weight:500;margin-bottom:5px} .footer a{color:var(--gold-2)} .footer .addr{text-align:right;line-height:1.7} .footer .fnav{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px} .footer .fnav a{color:rgba(244,239,227,.7)} .footer .fnav a:hover{color:var(--gold-2)} /* ---------- Interior page header ---------- */ .page-head{color:var(--cream);padding:64px 0 58px;position:relative;overflow:hidden; background:radial-gradient(75% 130% at 90% -15%,rgba(198,161,79,.16),transparent 55%), linear-gradient(165deg,var(--teal-800),var(--teal-900))} .page-head:before{content:"";position:absolute;inset:0;opacity:.4; background-image:radial-gradient(rgba(226,203,142,.12) 1px,transparent 1.5px);background-size:34px 34px} .page-head .wrap{position:relative;z-index:1} .page-head .tricolor-bar{width:64px;height:4px;border-radius:3px;margin:0 0 22px; background:linear-gradient(90deg,var(--flag-blue) 0 34%,#f3efe4 34% 66%,var(--flag-red) 66% 100%)} .page-head .eyebrow{color:var(--gold-2);margin:0 0 14px} .page-head h1{font-family:var(--serif);font-weight:300;font-size:48px;letter-spacing:-.5px;line-height:1.04;color:var(--cream);margin:0 0 14px} .page-head p{color:rgba(244,239,227,.85);font-size:18px;line-height:1.6;max-width:660px;margin:0} /* ---------- Buttons ---------- */ .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.02em; border-radius:999px;padding:13px 26px;transition:filter .2s,background .2s,border-color .2s,color .2s;cursor:pointer} .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--teal-900)} .btn-primary:hover{filter:brightness(1.06);color:var(--teal-900)} .btn-ghost{border:1px solid rgba(226,203,142,.5);color:var(--cream)} .btn-ghost:hover{background:rgba(226,203,142,.14);border-color:var(--gold-2);color:var(--gold-2)} .btn-dark{border:1px solid var(--line);color:var(--teal-700);background:var(--card)} .btn-dark:hover{border-color:var(--gold);color:var(--gold)} /* ---------- Generic content ---------- */ .section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .lede{font-size:20px;line-height:1.62;color:var(--ink);max-width:780px;margin:0 0 8px} .measure{max-width:780px} .measure p{font-size:16.5px;line-height:1.8;color:#33403f;margin:0 0 18px} .measure h3{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--teal-800);margin:26px 0 10px} /* ---------- Focus-area grid ---------- */ .focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:820px){.focus-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.focus-grid{grid-template-columns:1fr}} .focus-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:var(--shadow)} .focus-card .fa-k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px} .focus-card h3{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--teal-800);margin:0 0 7px} .focus-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6} /* ---------- Members teaser (home) ---------- */ .avatars-row{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 4px} .avatars-row .avatar{width:58px;height:58px;font-size:20px;box-shadow:0 0 0 1px rgba(20,42,47,.06),inset 0 0 0 2px rgba(255,255,255,.16)} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px} @media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:30px}} .contact-block{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px;box-shadow:var(--shadow)} .contact-block h3{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--gold);margin:0 0 14px} .contact-block .line{font-size:16px;color:var(--ink);margin-bottom:8px;line-height:1.5} .contact-block .line a{color:var(--teal-600)} .contact-block .sub{color:var(--muted);font-size:14px} /* ---------- Mobile ---------- */ @media(max-width:760px){ .wrap{padding:0 20px} /* swap the wide banner image for a clean, legible native hero on phones */ .masthead{display:none} .hero-m{display:block;color:var(--cream);padding:42px 0 46px; background:radial-gradient(85% 130% at 88% -10%,rgba(198,161,79,.18),transparent 55%), linear-gradient(165deg,var(--teal-800),var(--teal-900))} .hero-m-logo{width:74px;height:74px;border-radius:50%;display:block;margin-bottom:18px; box-shadow:0 0 0 1px rgba(226,203,142,.5)} .hero-m .tricolor-bar{width:58px;height:4px;border-radius:3px;margin:0 0 16px; background:linear-gradient(90deg,var(--flag-blue) 0 34%,#f3efe4 34% 66%,var(--flag-red) 66% 100%)} .hero-m h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.07;color:var(--cream);margin:0 0 11px} .hero-m p{color:rgba(244,239,227,.84);font-size:15px;line-height:1.6;margin:0} /* top bar: brand on top, nav wraps below — no more overlap */ .topbar{position:static} .topbar .wrap{height:auto;min-height:62px;flex-wrap:wrap;gap:7px 18px;padding-top:12px;padding-bottom:12px} .brand{gap:11px} .brand .mark,.brand .mark-img{width:38px;height:38px} .brand .name{font-size:16px} .brand .name small{font-size:8.5px;letter-spacing:.12em;margin-top:3px} .navlinks{width:100%;gap:22px;font-size:13px} /* hero (fallback) */ .hero{padding:52px 0 56px} .hero h1{font-size:38px} .hero p{font-size:16px} /* interior page header */ .page-head{padding:44px 0 40px} .page-head h1{font-size:33px} .page-head p{font-size:16px} .lede{font-size:18px} /* sections */ .section{padding:52px 0} .section-head{margin-bottom:30px} .section-head h2{font-size:29px} .section-head p{font-size:16px} /* profile header stacks vertically */ .profile-head{padding:42px 0 38px} .profile-head .wrap{flex-direction:column;align-items:flex-start;gap:20px} .profile-head .avatar{width:100px;height:100px;font-size:36px} .profile-head h1{font-size:31px} .profile-head .affil{font-size:14.5px} .profile-body{padding:42px 0 54px} .profile-grid{gap:32px} .prose p:first-of-type{font-size:16.5px} /* footer stacks */ .footer .wrap{flex-direction:column;align-items:flex-start;gap:18px} .footer .addr{text-align:left} } @media(max-width:420px){ .hero h1{font-size:32px} .section-head h2{font-size:25px} .brand .name{font-size:15px} } /* ---------- Motion & effects ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} } /* Home animated quantum-field hero */ .hero--home{position:relative;overflow:hidden;padding:92px 0 100px} .hero--home .qfield{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0} .hero--home:before{z-index:1} .hero--home .wrap{position:relative;z-index:2} .hero--home .hero-logo{width:80px;height:80px;border-radius:50%;display:block;margin:0 0 22px;box-shadow:0 0 0 1px rgba(226,203,142,.5)} .hero--home .btns{margin-top:30px} @media(max-width:760px){ .hero--home{padding:60px 0 66px} .hero--home .hero-logo{width:66px;height:66px} } /* Card hover polish */ .card:hover{box-shadow:0 18px 46px rgba(20,42,47,.17),0 0 0 1px rgba(198,161,79,.28)} .focus-card{transition:transform .2s ease,box-shadow .2s,border-color .2s} .focus-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#ddd2b6} /* Heading underline draw-in (ties to scroll-reveal) */ .section-head h2{position:relative} .section-head h2:after{content:"";position:absolute;left:0;bottom:-11px;height:3px;width:0;border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .8s ease .15s} .section-head.in h2:after{width:64px} @media (prefers-reduced-motion: reduce){ .section-head h2:after{width:64px;transition:none} } /* Quantum orbit motif */ .orbit-accent{display:flex;margin:0 0 14px} .orbit-accent .orb{transform-origin:50px 50px} @media (prefers-reduced-motion: no-preference){ .orbit-accent .o1{animation:spin 7s linear infinite} .orbit-accent .o2{animation:spin 10s linear infinite} .orbit-accent .o3{animation:spin 13s linear infinite reverse} } @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Domain motifs (per member + focus area) ---------- */ .head-motif{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:200px;height:200px;opacity:.4;z-index:0;pointer-events:none} @media(max-width:760px){.head-motif{display:none}} .fa-motif{width:46px;height:46px;margin-bottom:14px} .fa-motifs{display:flex;align-items:center;gap:4px;margin-bottom:14px} .fa-motifs .fa-motif{margin-bottom:0} .fa-conn{width:30px;height:46px;flex:none} .fa-glow{opacity:0} @keyframes spinr{to{transform:rotate(-360deg)}} @keyframes mpulse{0%,100%{opacity:.3}50%{opacity:1}} @keyframes mtwist{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.16)}} @keyframes mshim{0%,100%{opacity:.3}50%{opacity:1}} @keyframes mscan{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}} @keyframes mdraw{0%{stroke-dashoffset:140}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} @keyframes mwave{to{stroke-dashoffset:-24}} @keyframes fasig{0%{transform:translateX(0);opacity:0}12%{opacity:1}66%{transform:translateX(46px);opacity:1}78%{transform:translateX(46px);opacity:0}100%{transform:translateX(46px);opacity:0}} @keyframes faglow{0%,56%{opacity:0}70%{opacity:.9}86%{opacity:0}100%{opacity:0}} @media(prefers-reduced-motion:no-preference){ .mtf-spin{transform-box:fill-box;transform-origin:center;animation:spin 13s linear infinite} .mtf-spinr{transform-box:fill-box;transform-origin:center;animation:spinr 11s linear infinite} .mtf-nd{animation:mpulse 2.6s ease-in-out infinite} .mtf-rg{transform-box:fill-box;transform-origin:center;animation:mtwist 3.4s ease-in-out infinite} .mtf-sh{animation:mshim 3s ease-in-out infinite} .mtf-scan{animation:mscan 3.2s ease-in-out infinite} .mtf-draw{stroke-dasharray:140;animation:mdraw 4.4s ease-in-out infinite} .mtf-wave{stroke-dasharray:6 6;animation:mwave 1.7s linear infinite} .fa-sig{animation:fasig 2.4s linear infinite} .fa-glow{animation:faglow 2.4s linear infinite} } /* ---------- Particle field on interior page headers + load entrance ---------- */ .page-head .qfield{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0} .page-head:before{z-index:1} .page-head .wrap{z-index:2} @keyframes hin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference){ .hero--home .wrap,.page-head .wrap{animation:hin .85s cubic-bezier(.2,.7,.2,1) both} } /* ---------- Home carrier network ---------- */ .hero--home .netfield{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0} .hero--home .carrier-layer{position:absolute;inset:0;z-index:1;pointer-events:none} .carrier{position:absolute;top:0;left:0;width:40px;height:40px;opacity:.58;will-change:transform} .carrier svg{width:100%;height:100%;display:block} /* ---------- Unified header height (home hero == interior page headers) ---------- */ .hero--home, .page-head{display:flex;flex-direction:column;justify-content:center;min-height:440px;padding-top:56px;padding-bottom:56px} @media(max-width:760px){ .hero--home, .page-head{min-height:300px;padding-top:40px;padding-bottom:40px} }