/* ============================================================
   Amandeep Singh Rai — Advocate | Design System v3
   Concept: The Legal Gazette — parchment, maroon seal, navy ink
   Body in warm paper tones; the hero is the one dark, dramatic
   photographic moment. Motion: stamp-in reveals, 3D photo-flip
   carousel, wax-seal badge, teletype ticker.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Special+Elite&display=swap');

:root{
  --paper:      #eae3d2;
  --paper-2:    #ddd3b8;
  --paper-3:    #f4efe2;
  --ink:        #221b13;
  --ink-2:      #4a3d2c;
  --maroon:     #7c1f2a;
  --maroon-l:   #9c313c;
  --navy:       #1f3a52;
  --navy-l:     #34597a;
  --line:       rgba(34,27,19,0.18);
  --line-strong:rgba(34,27,19,0.34);
  --wa:         #1f7a4d;
  --shadow:     0 30px 60px -22px rgba(20,14,8,0.35);
  --ease:       cubic-bezier(.19,1,.22,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  /* Keep the hero photo carousel functional; only disable non-essential motion. */
  html{scroll-behavior:auto !important;}
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
::selection{background:var(--maroon);color:var(--paper-3);}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}

/* ---------- Typography ---------- */
h1,h2,h3,h4,.serif{font-family:'Spectral', serif;font-weight:500;color:var(--ink);}
h1{font-size:clamp(2.7rem,6vw,5.2rem);line-height:1.02;font-weight:500;color:var(--paper-3);}
h2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1;}
h3{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.28;font-weight:600;}
h1 em,h2 em{font-style:italic;color:var(--maroon-l);}
.hero h1 em{color:var(--maroon-l);}

p{max-width:64ch;color:var(--ink-2);}
.lede{font-size:clamp(1.03rem,1.4vw,1.2rem);color:var(--ink-2);font-weight:300;}

.rule{width:52px;height:2px;background:var(--maroon);border:none;margin:20px 0;}
.rule-double{width:100%;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:0;}

.kicker{
  font-family:'Special Elite', monospace;
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--maroon);
}
.kicker.navy{color:var(--navy);}

/* ---------- Teletype ticker ---------- */
.ticker-bar{
  position:fixed;top:0;left:0;right:0;z-index:120;height:36px;
  background:var(--ink);border-bottom:2px solid var(--maroon);
  display:flex;align-items:center;overflow:hidden;
}
.ticker-label{
  flex:0 0 auto;height:100%;display:flex;align-items:center;gap:8px;padding:0 18px;
  background:var(--maroon);color:var(--paper-3);
  font-family:'Special Elite',monospace;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  position:relative;z-index:2;
}
.ticker-label::after{
  content:'';position:absolute;right:-13px;top:0;bottom:0;width:13px;background:var(--maroon);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.ticker-viewport{flex:1 1 auto;overflow:hidden;height:100%;position:relative;}
.ticker-track{
  display:flex;align-items:center;position:absolute;white-space:nowrap;
  animation:tickerMove 46s linear infinite;will-change:transform;
}
.ticker-viewport:hover .ticker-track{animation-play-state:paused;}
.ticker-track span{
  font-family:'Special Elite',monospace;
  font-size:0.72rem;color:var(--paper-2);padding:0 24px;position:relative;
}
.ticker-track span::before{content:'\2022';color:var(--maroon-l);margin-right:24px;}
.ticker-track span:hover{color:var(--paper-3);}
@keyframes tickerMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed;top:36px;left:0;right:0;z-index:100;
  background:var(--paper-3);
  border-bottom:1px solid var(--line-strong);
  padding:22px 0;
  transition:padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.scrolled{padding:12px 0;box-shadow:0 8px 24px -12px rgba(20,14,8,0.28);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;flex-direction:column;line-height:1.1;}
.brand .name{font-family:'Spectral',serif;font-size:1.34rem;font-weight:600;letter-spacing:0.01em;color:var(--ink);}
.brand .role{font-family:'Special Elite',monospace;font-size:0.6rem;letter-spacing:0.1em;color:var(--maroon);margin-top:5px;text-transform:uppercase;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:0.85rem;letter-spacing:0.01em;color:var(--ink-2);position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--maroon);transition:width .35s var(--ease);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--maroon);}
.nav-cta{
  border:1px solid var(--maroon);padding:9px 20px;font-size:0.8rem;color:var(--maroon);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav-cta:hover{background:var(--maroon);color:var(--paper-3);}
.nav-toggle{display:none;}
@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:340px;background:var(--paper-3);
    flex-direction:column;align-items:flex-start;padding:130px 32px 40px;gap:26px;
    transform:translateX(100%);transition:transform .5s var(--ease);border-left:1px solid var(--line-strong);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;width:26px;background:none;border:none;cursor:pointer;z-index:110;}
  .nav-toggle span{height:2px;background:var(--ink);width:100%;}
}

/* ---------- WhatsApp postmark button ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:62px;height:62px;border-radius:50%;
  background:var(--paper-3);border:2px dashed var(--wa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  animation:waSpin 16s linear infinite;
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;color:var(--wa);animation:waCounter 16s linear infinite;}
@keyframes waSpin{to{transform:rotate(360deg);}}
@keyframes waCounter{to{transform:rotate(-360deg);}}

/* ---------- Hero (dark photographic, 3D flip carousel) ---------- */
.hero{
  position:relative;height:100svh;min-height:640px;
  display:flex;align-items:flex-end;overflow:hidden;
  background:#170f0d;margin-top:36px;
  perspective:1600px;
}
.hero-slides{position:absolute;inset:0;transform-style:preserve-3d;}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  filter:sepia(0.22) contrast(1.08) saturate(0.85);
  transform:rotateY(0deg);
  backface-visibility:hidden;
  transition:opacity .45s var(--ease), transform .8s var(--ease);
  will-change:opacity,transform;
}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.hero-slide.active{opacity:1;z-index:2;transform:rotateY(0deg);}
.hero-slide.flip-out{opacity:0;transform:rotateY(-70deg);z-index:1;}
.hero-slide.flip-in-start{opacity:0;transform:rotateY(70deg);}

.hero::before{
  content:'';position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(90deg, rgba(19,12,10,0.94) 0%, rgba(19,12,10,0.55) 44%, rgba(19,12,10,0.24) 66%, rgba(19,12,10,0.66) 100%),
    linear-gradient(0deg, rgba(15,9,7,0.92) 0%, rgba(15,9,7,0.04) 42%);
}

.hero-seal{
  position:absolute;top:clamp(96px,14vh,150px);right:clamp(24px,6vw,80px);z-index:6;
  width:106px;height:106px;border-radius:50%;
  border:2px solid var(--maroon-l);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--maroon-l);font-family:'Special Elite',monospace;font-size:0.62rem;letter-spacing:0.06em;
  transform:scale(0) rotate(-18deg);opacity:0;
  animation:sealStamp .6s var(--ease-back) 1.1s forwards;
}
.hero-seal::before{content:'';position:absolute;inset:8px;border:1px solid var(--maroon-l);border-radius:50%;}
@keyframes sealStamp{
  0%{transform:scale(2.2) rotate(-18deg);opacity:0;}
  60%{transform:scale(0.9) rotate(-10deg);opacity:1;}
  100%{transform:scale(1) rotate(-10deg);opacity:1;}
}

.hero-content{position:relative;z-index:6;width:100%;padding:0 clamp(20px,5vw,64px) clamp(60px,9vw,110px);}
.hero-content .container{padding:0;max-width:1240px;}
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;color:var(--paper-2);
  font-family:'Special Elite',monospace;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  margin-bottom:18px;opacity:0;animation:riseIn .8s var(--ease) 0.35s forwards;
}
.hero-eyebrow .dot{width:6px;height:6px;background:var(--maroon-l);border-radius:50%;}
.hero h1{max-width:16ch;opacity:0;animation:riseIn .9s var(--ease) 0.5s forwards;}
.hero-sub{
  margin-top:24px;max-width:46ch;color:var(--paper-2);font-weight:300;
  font-size:clamp(1rem,1.3vw,1.16rem);
  opacity:0;animation:riseIn 1s var(--ease) 0.75s forwards;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px;opacity:0;animation:riseIn 1s var(--ease) 0.95s forwards;}
@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  font-size:0.87rem;letter-spacing:0.01em;border:1px solid var(--maroon-l);
  transition:all .4s var(--ease);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;
}
.btn-solid{background:var(--maroon-l);color:var(--paper-3);}
.btn-solid:hover{background:var(--maroon);border-color:var(--maroon);}
.btn-line{color:var(--paper-3);border-color:rgba(244,239,226,0.55);}
.btn-line:hover{border-color:var(--paper-3);background:rgba(244,239,226,0.08);}
.btn-wa{border-color:var(--wa);color:#7fd6a8;}
.btn-wa:hover{background:var(--wa);color:var(--paper-3);}
.btn svg{width:17px;height:17px;flex:0 0 auto;}

/* on light sections, line buttons need dark text */
.section .btn-line,footer .btn-line{color:var(--ink);border-color:var(--line-strong);}
.section .btn-line:hover,footer .btn-line:hover{border-color:var(--ink);background:rgba(34,27,19,0.05);}

.hero-dots{position:absolute;z-index:7;right:clamp(20px,5vw,64px);bottom:clamp(60px,9vw,110px);display:flex;flex-direction:column;gap:11px;}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--maroon-l);background:transparent;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);}
.hero-dots button.active{background:var(--maroon-l);transform:scale(1.3);}

.hero-tear{
  position:absolute;left:0;right:0;bottom:-1px;height:22px;z-index:7;
  background:var(--paper);
  -webkit-mask-image:radial-gradient(circle 7px at 14px 0, transparent 7px, black 7.5px);
  -webkit-mask-repeat:repeat-x;-webkit-mask-size:28px 22px;
  mask-image:radial-gradient(circle 7px at 14px 0, transparent 7px, black 7.5px);
  mask-repeat:repeat-x;mask-size:28px 22px;
}

/* ---------- Stat / docket strip ---------- */
.stat-strip{border-bottom:1px solid var(--line-strong);background:var(--paper-3);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat-cell{padding:36px 28px;border-left:1px dashed var(--line-strong);}
.stat-cell:first-child{border-left:none;}
.stat-num{font-family:'Spectral',serif;font-size:clamp(1.8rem,2.6vw,2.5rem);color:var(--maroon);font-weight:600;}
.stat-label{margin-top:6px;font-size:0.83rem;color:var(--ink-2);}
@media (max-width:820px){.stat-grid{grid-template-columns:repeat(2,1fr);}.stat-cell:nth-child(3){border-left:none;}}

/* ---------- Section scaffolding ---------- */
section{position:relative;}
.section{padding:clamp(76px,9vw,130px) 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;flex-wrap:wrap;}
.section-head .lede{margin-top:12px;}
.section-alt{background:var(--paper-2);}
.section-navy{
  background:radial-gradient(1000px 520px at 14% 0%, rgba(31,58,82,0.12), transparent 60%), var(--navy);
  color:var(--paper-3);
}
.section-navy p,.section-navy .lede{color:var(--paper-2);}
.section-navy h2,.section-navy h3{color:var(--paper-3);}

/* ---------- Stamp-in scroll reveal ---------- */
.unveil{opacity:0;transform:scale(0.96) rotate(-1deg);transition:opacity .6s var(--ease-back), transform .6s var(--ease-back);}
.unveil.in{opacity:1;transform:scale(1) rotate(0deg);}
.unveil-delay1.in{transition-delay:.1s;}

/* ---------- Split / about ---------- */
.split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center;}
.split.rev{grid-template-columns:1.1fr 0.9fr;}
.split.rev .split-media{order:2;}
@media (max-width:900px){.split,.split.rev{grid-template-columns:1fr;}.split.rev .split-media{order:0;}}
.split-media{position:relative;}
.split-media .frame{
  position:relative;border:1px solid var(--ink);padding:10px;background:var(--paper-3);
  box-shadow:6px 6px 0 0 var(--maroon);
}
.split-media img{width:100%;height:520px;object-fit:cover;filter:sepia(0.16) contrast(1.05);}
.split-media .tag{
  position:absolute;left:16px;bottom:-16px;background:var(--ink);color:var(--paper-3);
  padding:9px 18px;font-family:'Special Elite',monospace;font-size:0.72rem;letter-spacing:0.04em;
}
.split-copy p + p{margin-top:16px;}

/* ---------- Practice — gazette notification entries ---------- */
.gazette{border-top:1px solid var(--line-strong);}
.gazette-entry{
  display:grid;grid-template-columns:150px 1fr;gap:34px;
  padding:40px 0;border-bottom:1px solid var(--line-strong);align-items:start;
}
.entry-stamp{
  border:1px dashed var(--line-strong);padding:14px 12px;text-align:center;
}
.entry-stamp .no{font-family:'Special Elite',monospace;font-size:0.68rem;color:var(--maroon);letter-spacing:0.04em;display:block;}
.entry-stamp .lbl{font-family:'Spectral',serif;font-size:1.7rem;color:var(--ink);margin-top:6px;display:block;}
.gazette-entry h3{margin-bottom:10px;}
.gazette-entry .fields{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px;}
.gazette-entry .fields span{font-family:'Special Elite',monospace;font-size:0.68rem;color:var(--navy);border:1px solid var(--line-strong);padding:6px 12px;letter-spacing:0.02em;}
@media (max-width:700px){.gazette-entry{grid-template-columns:1fr;gap:14px;}.entry-stamp{width:120px;}}

/* ---------- Docket table (timeline) ---------- */
.docket{border:1px solid var(--line-strong);background:var(--paper-3);}
.docket-row{
  display:grid;grid-template-columns:150px 1fr;gap:24px;
  padding:26px 24px;border-bottom:1px solid var(--line);
}
.docket-row:last-child{border-bottom:none;}
.docket-row:nth-child(even){background:var(--paper-2);}
.docket-row .d-date{font-family:'Special Elite',monospace;font-size:0.82rem;color:var(--maroon);}
.docket-row h3{font-size:1.15rem;margin-bottom:6px;}
.docket-row p{font-size:0.93rem;}
@media (max-width:640px){.docket-row{grid-template-columns:1fr;gap:8px;}}

/* ---------- Feature panel (DAG) ---------- */
.feature-panel{
  border:2px solid var(--maroon-l);padding:clamp(30px,5vw,60px);
  background:rgba(124,31,42,0.06);position:relative;
}

/* ---------- Pull quote ---------- */
.pull{
  border-left:3px solid var(--maroon);padding-left:26px;
  font-family:'Spectral',serif;font-weight:500;font-style:italic;
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.38;max-width:44ch;
}
.section-navy .pull{border-left-color:var(--paper-2);}

/* ---------- Document-style info cards ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.doc-card{border:1px dashed var(--line-strong);padding:28px 24px;background:var(--paper-3);}
.doc-card h4{font-family:'Special Elite',monospace;font-size:0.7rem;letter-spacing:0.06em;color:var(--maroon);margin-bottom:12px;text-transform:uppercase;}
@media (max-width:760px){.doc-grid{grid-template-columns:1fr;}}

/* ---------- Legacy / seal panel ---------- */
.legacy-panel{display:grid;grid-template-columns:auto 1fr;gap:26px;border:1px solid var(--ink);padding:clamp(26px,4vw,44px);align-items:center;background:var(--paper-3);}
.legacy-crest{width:76px;height:76px;border-radius:50%;border:2px solid var(--maroon);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.legacy-crest svg{width:34px;height:34px;color:var(--maroon);}
@media (max-width:640px){.legacy-panel{grid-template-columns:1fr;text-align:left;}}

/* ---------- Gallery strip ---------- */
.strip-track{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.strip-track::-webkit-scrollbar{display:none;}
.strip-item{flex:0 0 auto;width:min(74vw,400px);border:1px solid var(--ink);background:var(--paper-3);padding:8px;}
.strip-item img{width:100%;height:280px;object-fit:cover;filter:sepia(0.16) contrast(1.05);}
.strip-item .cap{padding:12px 6px 4px;font-family:'Special Elite',monospace;font-size:0.72rem;color:var(--ink-2);}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);}
.contact-cell{background:var(--paper-3);padding:clamp(32px,5vw,54px);}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-line{display:flex;align-items:center;gap:12px;margin-top:12px;}
.contact-line svg{width:18px;height:18px;color:var(--maroon);flex:0 0 auto;}
.contact-line a{color:var(--ink);border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease),color .3s var(--ease);}
.contact-line a:hover{color:var(--maroon);border-color:var(--maroon);}

.form-field{margin-bottom:20px;}
.form-field label{display:block;font-family:'Special Elite',monospace;font-size:0.68rem;letter-spacing:0.05em;color:var(--maroon);margin-bottom:8px;text-transform:uppercase;}
.form-field input,.form-field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);
  color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-size:1rem;padding:9px 2px;
  transition:border-color .3s var(--ease);
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--maroon);}
.form-field textarea{resize:vertical;min-height:96px;}

/* ---------- Footer (dark, bookends hero) ---------- */
footer{border-top:3px solid var(--maroon);padding:56px 0 34px;background:#170f0d;color:var(--paper-2);}
footer h5{color:var(--paper-3);}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:38px;border-bottom:1px solid rgba(244,239,226,0.14);margin-bottom:26px;}
.footer-cols{display:flex;gap:66px;flex-wrap:wrap;}
.footer-col h5{font-family:'Special Elite',monospace;font-size:0.7rem;letter-spacing:0.08em;margin-bottom:16px;text-transform:uppercase;}
.footer-col a,.footer-col p{display:block;color:var(--paper-2);font-size:0.91rem;margin-bottom:9px;}
.footer-col a:hover{color:var(--maroon-l);}
footer .brand .name{color:var(--paper-3);}
footer .brand .role{color:var(--maroon-l);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;color:rgba(234,227,210,0.5);}

/* ---------- misc ---------- */
.tag-list{display:flex;gap:10px;flex-wrap:wrap;}
.tag-list span{font-family:'Special Elite',monospace;font-size:0.68rem;border:1px solid var(--line-strong);padding:6px 12px;color:var(--navy);}
.page-hero{
  padding:calc(clamp(76px,9vw,130px) + 74px) 0 clamp(56px,8vw,86px);
  border-bottom:1px solid var(--line-strong);
  background:var(--paper-3);
}
.page-hero h1{color:var(--ink);}

/* CLEARER TYPOGRAPHY + NEWS STRIP UNDER THE TITLE BAR */
.site-nav{top:0;z-index:130;padding:20px 0}
.site-nav.scrolled{padding:11px 0}
.ticker-bar{top:86px;height:38px;z-index:125;border-bottom:1px solid rgba(124,31,42,.45)}
.ticker-label{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.09em}
.ticker-track span{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.005em}
.hero{margin-top:124px}
.brand .name{font-family:'Spectral',Georgia,serif;font-weight:700;font-size:1.4rem}
.brand .role{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.11em}
.nav-links a{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.035em}
.hero h1{font-family:'Spectral',Georgia,serif;font-weight:600;letter-spacing:-.018em}
.hero-sub{font-family:'IBM Plex Sans',Arial,sans-serif;font-size:1rem;line-height:1.78;font-weight:400}
.btn{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:700;letter-spacing:.08em}
.kicker{font-family:'IBM Plex Sans',Arial,sans-serif;font-weight:700;letter-spacing:.12em}
@media(max-width:860px){.ticker-bar{top:74px}.hero{margin-top:112px}}