/* =========================================================
   Daiana Kosteski — Advocacia de Família
   Design tokens
========================================================= */
:root{
  --cream:      #F6F1EA;
  --paper:      #FBF8F3;
  --paper-line: #E6DDD0;
  --ink:        #241C1F;
  --ink-soft:   #55494C;
  --wine:       #7A2836;
  --wine-dark:  #5A1D28;
  --wine-tint:  #F1E2E1;
  --gold:       #B08948;
  --sage:       #6B7A5E;
  --sage-tint:  #E7EBE0;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Raleway", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;

  --radius: 2px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

/* scroll progress indicator */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--wine), var(--gold));
  z-index: 300;
  transition: width .1s linear;
}

/* subtle paper grain used behind sections */
.hero-texture{
  position:absolute; inset:0;
  opacity:.35;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(36,28,31,.09) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
          mask-image: linear-gradient(to bottom, black, transparent 92%);
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--sans);
  font-weight:600;
  font-size: 1rem;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  position:relative; overflow:hidden;
  background: var(--wine);
  color: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ background: var(--wine-dark); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(122,40,54,.55); }
.btn-ghost{
  background:transparent;
  color: var(--ink);
  border-color: rgba(36,28,31,.28);
  padding: .85em 1.3em;
}
.btn-ghost:hover{ border-color: var(--ink); }
.btn-lg{ padding: 1em 1.9em; font-size: 1.08rem; }
.btn-nav{ padding: .6em 1.2em; font-size: .9rem; }
.ico-wpp{ flex:none; }

/* =========================================================
   Header
========================================================= */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(246,241,234,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(36,28,31,.08);
  transition: box-shadow .3s var(--ease);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  height: 84px;
}
.brand{ display:flex; align-items:center; gap:12px; color: var(--wine); }
.brand-logo{ display:block; height:56px; width:auto; }

.main-nav{ display:flex; gap: 30px; }
.main-nav a{
  font-size:1rem; font-weight:500; color: var(--ink-soft);
  position:relative; padding: 4px 0;
  transition: color .2s var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--wine); transform: scaleX(0); transform-origin:left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ transform: scaleX(1); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:1.5px; background: var(--ink); }

/* =========================================================
   Hero
========================================================= */
.hero{ position:relative; overflow:hidden; padding: 76px 0 96px; }
.hero-inner{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap: 64px; align-items:center; position:relative; z-index:1;
}
.eyebrow{
  font-family: var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--wine); margin-bottom: 22px;
}
.hero h1{
  font-family: var(--serif); font-weight:500; font-size: clamp(2.35rem, 4.4vw, 3.5rem);
  line-height:1.12; letter-spacing:-.01em; color: var(--ink);
}
.hero h1 span{ color: var(--wine); font-style:italic; font-weight:500; }
.lede{ font-size: 1.18rem; color: var(--ink-soft); margin-top:22px; max-width: 46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.trust-bar{ display:flex; flex-wrap:wrap; gap: 10px 28px; margin-top:40px; }
.trust-bar li{
  font-size:.92rem; color: var(--ink-soft); position:relative; padding-left:16px;
}
.trust-bar li::before{
  content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%;
  background: var(--sage);
}

.hero-figure{ display:flex; justify-content:center; }
.portrait-frame{
  position:relative; width: 320px; max-width:100%;
}
.portrait-clip{
  position:relative;
  overflow:hidden;
  border:1px solid var(--paper-line);
  aspect-ratio: 5/6;
}
.portrait-photo{
  display:block; width:100%; height:112%; position:relative; top:-6%;
  object-fit:cover; object-position: top center;
  background: var(--paper);
  will-change: transform;
}
.portrait-frame-sm .portrait-clip{ aspect-ratio: 4/5; }
.portrait-seal{
  position:absolute; right:-34px; bottom:-30px;
  color: var(--wine);
  filter: drop-shadow(0 8px 18px rgba(122,40,54,.18));
  animation: seal-spin 34s linear infinite;
}
.portrait-seal svg{ background: var(--cream); border-radius:50%; }
@keyframes seal-spin{ to{ transform: rotate(360deg); } }
.portrait-frame-sm{ width: 280px; }

/* =========================================================
   Reveal on scroll
========================================================= */
[data-reveal]{
  opacity:0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* staggered cascade for grid/list children */
.stagger-grid > [data-reveal]:nth-child(1){ transition-delay: 0s; }
.stagger-grid > [data-reveal]:nth-child(2){ transition-delay: .08s; }
.stagger-grid > [data-reveal]:nth-child(3){ transition-delay: .16s; }
.stagger-grid > [data-reveal]:nth-child(4){ transition-delay: .24s; }
.stagger-grid > [data-reveal]:nth-child(5){ transition-delay: .30s; }
.stagger-grid > [data-reveal]:nth-child(6){ transition-delay: .36s; }
.stagger-grid > [data-reveal]:nth-child(7){ transition-delay: .42s; }
.stagger-grid > [data-reveal]:nth-child(8){ transition-delay: .48s; }
.stagger-grid > [data-reveal]:nth-child(9){ transition-delay: .54s; }

/* hero entrance choreography */
.hero-copy > [data-reveal]:nth-child(1){ transition-delay: .05s; }
.hero-copy > [data-reveal]:nth-child(2){ transition-delay: .15s; }
.hero-copy > [data-reveal]:nth-child(3){ transition-delay: .25s; }
.hero-copy > [data-reveal]:nth-child(4){ transition-delay: .35s; }
.hero-copy > [data-reveal]:nth-child(5){ transition-delay: .45s; }
.hero-figure[data-reveal]{ transition-delay: .2s; }

/* =========================================================
   Sections generic
========================================================= */
.section{ padding: 108px 0; }
.section-alt{ background: var(--paper); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }

.tab-label{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wine); margin-bottom:20px;
}
.tab-label span{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:1px solid var(--wine); border-radius:50%;
  font-size:.66rem;
}
.tab-label.light{ color: var(--gold); }
.tab-label.light span{ border-color: var(--gold); }

.section-title{
  font-family: var(--serif); font-weight:500; font-size: clamp(1.9rem, 2.9vw, 2.45rem);
  line-height:1.22; max-width: 20ch; color: var(--ink);
}
.section-lede{ font-size:1.12rem; color: var(--ink-soft); max-width:60ch; margin-top:16px; }
.section-note{ margin-top:44px; font-size:.98rem; color: var(--ink-soft); font-style:italic; max-width:60ch; }

/* =========================================================
   O caso — notes grid
========================================================= */
.notes-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:2px;
  margin-top:48px;
  background: var(--paper-line);
  border:1px solid var(--paper-line);
}
.note-card{
  background: var(--paper); padding:34px 36px;
  transition: background-color .3s var(--ease);
}
.note-card:hover{ background: var(--wine-tint); }
.note-q{ font-family: var(--serif); font-size:1.22rem; font-style:italic; color: var(--wine); line-height:1.4; }
.note-a{ margin-top:14px; font-size:1.04rem; color: var(--ink-soft); }

/* =========================================================
   Caminhos — document compare
========================================================= */
.doc-compare{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
  margin-top:52px;
}
.doc-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  padding: 40px 38px 34px;
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doc-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 48px -30px rgba(36,28,31,.35); }
.doc-card-dark:hover{ box-shadow: 0 28px 48px -26px rgba(0,0,0,.5); }
/* paper settling into place on reveal */
.doc-card[data-reveal]{ transform: translateY(24px) rotate(-1deg); transition: opacity .8s var(--ease), transform .7s var(--ease); }
.doc-card-dark[data-reveal]{ transform: translateY(24px) rotate(1deg); }
.doc-card[data-reveal].is-visible{ transform:none; }
.doc-card[data-reveal].is-visible:hover{ transform: translateY(-6px); }
.doc-card::before{
  content:""; position:absolute; top:0; left:28px; right:28px; height:1px;
  background: repeating-linear-gradient(to right, var(--paper-line) 0 6px, transparent 6px 12px);
  top: 78px;
}
.doc-card-dark{ background: var(--ink); border-color: var(--ink); color: var(--cream); }
.doc-card-dark::before{ background: repeating-linear-gradient(to right, rgba(246,241,234,.22) 0 6px, transparent 6px 12px); }
.doc-card-head{ margin-bottom: 30px; }
.doc-stamp{
  display:inline-block; font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding: 4px 10px; border:1px solid var(--wine); color: var(--wine); margin-bottom:14px;
}
.doc-card-dark .doc-stamp{ border-color: var(--gold); color: var(--gold); }
.doc-card h3{ font-family: var(--serif); font-weight:500; font-size:1.4rem; }
.doc-list{ display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.doc-list li{
  font-size:1.02rem; line-height:1.5; padding-left:20px; position:relative; color: var(--ink-soft);
}
.doc-card-dark .doc-list li{ color: rgba(246,241,234,.78); }
.doc-list li::before{
  content:""; position:absolute; left:2px; top:.6em; width:6px; height:6px; border-radius:50%;
  background: var(--wine);
}
.doc-card-dark .doc-list li::before{ background: var(--gold); }
.doc-list li strong{ color: var(--ink); }
.doc-card-dark .doc-list li strong{ color: var(--cream); }
.doc-foot{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--paper-line);
  font-size:.92rem; font-style:italic; color: var(--wine);
}
.doc-card-dark .doc-foot{ border-color: rgba(246,241,234,.18); color: var(--gold); }

.cta-inline{
  margin-top:48px; padding: 30px 36px;
  background: var(--wine); color: var(--paper);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-inline p{ font-family: var(--serif); font-style:italic; font-size:1.14rem; max-width:44ch; }
.cta-inline .btn-primary{ background: var(--cream); color: var(--wine); flex:none; }
.cta-inline .btn-primary:hover{ background:#fff; }

/* =========================================================
   Checklist + paper stack illustration
========================================================= */
.checklist-layout{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:70px; align-items:center;
}
.checklist{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.checklist li{
  display:flex; align-items:flex-start; gap:12px; font-size:1.06rem; color: var(--ink-soft);
}
.check-mark{
  flex:none; width:22px; height:22px; border-radius:50%;
  background: var(--sage-tint); color: var(--sage);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; margin-top:1px;
}
.checklist{ margin-bottom:36px; }

.checklist-figure{ display:flex; justify-content:center; }
.paper-stack{ position:relative; width:260px; height:320px; }
.paper{ position:absolute; inset:0; background: var(--paper); border:1px solid var(--paper-line); box-shadow: 0 20px 40px -20px rgba(36,28,31,.25); }
.paper-3{ transform: rotate(6deg) translate(10px,6px); }
.paper-2{ transform: rotate(-4deg) translate(-6px,2px); }
.paper-1{
  display:flex; flex-direction:column; gap:14px; padding: 30px 26px;
  transition: transform .4s var(--ease);
}
.paper-stack:hover .paper-1{ transform: translateY(-6px) rotate(-.6deg); }
.paper-title{ font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; color: var(--wine); margin-bottom:8px; }
.paper-line{ display:block; height:7px; background: var(--paper-line); border-radius:1px; }
.paper-line.short{ width:60%; }
.paper-seal-mini{
  margin-top:auto; align-self:flex-end;
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--gold);
}

/* =========================================================
   Áreas de atuação
========================================================= */
.areas-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  margin-top:52px; background: var(--paper-line); border:1px solid var(--paper-line);
}
.area-item{
  background: var(--cream); padding:32px 30px; transition: background-color .3s var(--ease);
}
.area-item:hover{ background: var(--paper); }
.area-item h3{ font-family: var(--serif); font-weight:500; font-size:1.16rem; color: var(--wine); }
.area-item p{ margin-top:10px; font-size:.98rem; color: var(--ink-soft); }

/* =========================================================
   Sobre
========================================================= */
.about-layout{
  display:grid; grid-template-columns: .8fr 1.2fr; gap:70px; align-items:center;
}
.about-figure{ display:flex; justify-content:center; }
.about-copy p{ font-size:1.12rem; color: var(--ink-soft); margin-top:20px; max-width:58ch; }
.about-copy p:first-of-type{ margin-top:20px; }
.about-signature{ display:flex; flex-direction:column; gap:2px; margin-top:34px; }
.about-signature strong{ font-family: var(--serif); font-style:italic; font-size:1.3rem; color: var(--wine); }
.about-signature span{ font-family: var(--mono); font-size:.78rem; letter-spacing:.04em; color: var(--ink-soft); }
.link-inline{
  display:inline-block; margin-top:22px; font-size:.98rem; color: var(--wine); font-weight:600;
  border-bottom:1px solid var(--wine); padding-bottom:2px;
  transition: opacity .25s var(--ease);
}
.link-inline:hover{ opacity:.7; }

/* =========================================================
   Como funciona — steps
========================================================= */
.steps{
  margin-top:56px; display:grid; grid-template-columns: repeat(3,1fr); gap:56px;
  position:relative;
}
.steps::before{
  content:""; position:absolute; top:22px; left:8%; right:8%; height:1px;
  background: repeating-linear-gradient(to right, var(--wine) 0 8px, transparent 8px 16px);
  opacity:.4;
}
.steps li{ position:relative; }
.step-n{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background: var(--cream); border:1px solid var(--wine); color: var(--wine);
  font-family: var(--serif); font-style:italic; font-size:1.1rem;
  position:relative; z-index:1; margin-bottom:22px;
}
.steps h3{ font-family: var(--serif); font-weight:500; font-size:1.22rem; }
.steps p{ margin-top:10px; font-size:1.02rem; color: var(--ink-soft); }

/* =========================================================
   FAQ
========================================================= */
.faq-list{ margin-top:48px; border-top:1px solid var(--paper-line); }
.faq-item{ border-bottom:1px solid var(--paper-line); }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding: 24px 4px; font-family: var(--serif); font-size:1.2rem; color: var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family: var(--sans); font-size:1.4rem; color: var(--wine); flex:none;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary{ transition: color .25s var(--ease); }
.faq-item:hover summary{ color: var(--wine); }
.faq-item p{ padding: 0 4px 26px; max-width:66ch; color: var(--ink-soft); font-size:1.04rem; overflow:hidden; transition: height .35s var(--ease); }

/* =========================================================
   CTA final
========================================================= */
.cta-final{
  background: var(--ink); color: var(--cream); padding: 118px 0; text-align:center;
  position:relative; overflow:hidden;
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(122,40,54,.35), transparent 60%);
}
.cta-final-inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.cta-final h2{
  font-family: var(--serif); font-weight:500; font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  max-width: 18ch; line-height:1.2; margin-top:10px;
}
.cta-final-lede{ margin-top:20px; max-width:48ch; color: rgba(246,241,234,.72); font-size:1.14rem; }
.cta-final .btn-primary{ margin-top:38px; background: var(--gold); color: var(--ink); }
.cta-final .btn-primary:hover{ background:#c49a52; }
.cta-final-phone{ margin-top:18px; font-family: var(--mono); font-size:.85rem; letter-spacing:.06em; color: rgba(246,241,234,.55); }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background: var(--paper); border-top:1px solid var(--paper-line); padding: 48px 0 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:36px; }
.footer-brand{ display:flex; flex-direction:column; gap:4px; }
.footer-brand strong{ font-family: var(--serif); font-style:italic; color: var(--wine); font-size:1.1rem; }
.footer-brand span{ font-size:.88rem; color: var(--ink-soft); }
.footer-links{ display:flex; gap:24px; }
.footer-links a{ font-size:.94rem; font-weight:600; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--wine); }
.footer-fine{ border-top:1px solid var(--paper-line); padding: 20px 0 28px; }
.footer-fine p{ font-size:.84rem; color: rgba(85,73,76,.75); max-width:80ch; }

/* =========================================================
   Floating WhatsApp
========================================================= */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background: var(--wine); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px rgba(122,40,54,.6);
  transition: transform .3s var(--ease), background-color .3s var(--ease), opacity .3s var(--ease), visibility .3s;
  animation: float-pulse 3.2s ease-in-out infinite;
}
.whatsapp-float:hover{ transform: scale(1.08); background: var(--wine-dark); }
/* hidden while the footer (which has its own WhatsApp link) is in view, so it never overlaps footer content */
.whatsapp-float.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(.7); }
@keyframes float-pulse{
  0%,100%{ box-shadow: 0 10px 30px -8px rgba(122,40,54,.6), 0 0 0 0 rgba(122,40,54,.35); }
  50%{ box-shadow: 0 10px 30px -8px rgba(122,40,54,.6), 0 0 0 10px rgba(122,40,54,0); }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-figure{ order:-1; max-width:280px; margin:0 auto 20px; }
  .checklist-layout{ grid-template-columns:1fr; gap:48px; }
  .checklist-figure{ order:-1; }
  .about-layout{ grid-template-columns:1fr; gap:40px; text-align:left; }
  .about-figure{ max-width:240px; margin:0 auto; }
  .doc-compare{ grid-template-columns:1fr; }
  .areas-grid{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; gap:36px; }
  .steps::before{ display:none; }
}

/* header nav switches to the mobile menu earlier than the content breakpoints:
   the 5 links + button start crowding around ~1000-1050px, well before 720px */
@media (max-width: 1060px){
  .main-nav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:72px; left:0; right:0;
    background: var(--paper); border-bottom:1px solid var(--paper-line);
    transform: translateY(-8px); opacity:0; visibility:hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    padding: 8px 22px 18px;
  }
  .main-nav.is-open{ opacity:1; transform:none; visibility:visible; }
  .main-nav a{ padding: 14px 0; border-bottom:1px solid var(--paper-line); }
  .main-nav a::after{ display:none; }
  .nav-toggle{ display:flex; position:relative; z-index:1; }
  .nav-toggle.is-active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  .nav-toggle span{ transition: transform .25s var(--ease), opacity .25s var(--ease); }
  .btn-nav{ display:none; }
  .header-inner{ height:72px; }
}

@media (max-width: 720px){
  .wrap{ padding:0 22px; }
  .hero{ padding: 44px 0 64px; }
  .section{ padding:76px 0; }
  .notes-grid{ grid-template-columns:1fr; }
  .areas-grid{ grid-template-columns:1fr; }
  .cta-inline{ flex-direction:column; align-items:flex-start; }
  .portrait-seal{ right:-14px; bottom:-18px; transform:scale(.8); }
}