/* Paw Passport intro. Load after theme.css, home-c.css, story.css.
   Design C: #0b1719 / #d9b765. No ad slots in .intro.
   ≤980px: logo → image → Begin your trip → story.
   ≥1100px: logo on top, image left, story right, Begin centered under both columns.
   #map stays after .intro. */

html{scroll-padding-top:0}
#map,#trip-map{scroll-margin-top:0}

.intro{position:relative}
.intro .hdr-band,.intro .home-bottom-ad,.intro ins.adsbygoogle{display:none}

.brandbar{display:flex;justify-content:center;align-items:center;gap:22px;padding:30px 0 6px}
.brandbar img{height:112px;width:auto;filter:drop-shadow(0 8px 20px #000a)}
.brandbar>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.brandbar h1{font-size:clamp(3rem,5vw,4.4rem);line-height:1;letter-spacing:.015em;color:#f4efe2;text-shadow:0 2px 18px #d9b76522}
.brandbar h1 span{color:#d9b765}
.brandbar .brand-sub{margin:10px 0 0;font:600 .86rem/1.3 var(--text);letter-spacing:.3em;text-transform:uppercase;color:#cfc6b0}

.intro-rule{display:flex;justify-content:center;margin:10px auto 0}
.intro-rule svg{width:22px;height:18px;fill:#d9b765}

.vas-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:30px 0 60px}
.vas-art{position:static;display:flex;flex-direction:column;align-items:center;width:100%;max-width:720px;margin:0 auto}
.va-hero{position:relative;margin:0;max-width:900px}
.va-hero.glow::before{content:"";position:absolute;left:6%;right:6%;top:10%;bottom:6%;background:radial-gradient(ellipse at center,#d9b76533,transparent 70%);filter:blur(8px);z-index:0;pointer-events:none}
.va-hero picture,.va-hero img{display:block;width:100%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 30px 40px #000b)}
.vas-enter{display:flex;justify-content:center;margin:22px 0 10px}

.intro-story{background:none;box-shadow:none;border-radius:0;color:#e3c27a;padding:6px 0 0 34px;border-left:1px solid #d9b76540}
.intro-story h2{position:relative;margin:0 0 22px;padding-bottom:12px;color:#f3dc98;font-size:clamp(2rem,3vw,2.6rem);line-height:1.1}
.intro-story h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:1px;background:linear-gradient(90deg,#d9b765,transparent)}
.intro-story .body p{margin:0 0 .75em;color:#e3c27a;font-size:1.05rem;line-height:1.82}
.intro-story .body p:first-child::first-letter{float:left;font-family:var(--disp);font-size:2.9em;line-height:.78;padding:4px 8px 0 0;color:#d9b765}
.intro-story .sig{margin-top:4px;font-family:"Caveat",cursive;font-size:1.7rem;line-height:1;color:#f3dc98}
.intro-story .sig svg{width:16px;height:14px;fill:#d9b765;vertical-align:-1px;margin-left:3px}

.intro-id{margin:0;padding:20px 0 26px;border-top:1px solid #d9b76526;background:linear-gradient(180deg,#0b171900,#07101299);font-size:.78rem;color:#8f978b}
.intro-id .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;align-items:center}
.intro-id a{color:#c9b37a;text-decoration:none}
.intro-id a:hover{color:#f3dc98}
.intro-id .as-fbrand{font-family:var(--disp);font-size:.95rem;color:#d9b765;letter-spacing:.03em}
.intro-id .dot{opacity:.5}

.paw.paw-real{width:124px;height:118px;padding:0 0 19px;border-radius:45%}
.paw.paw-real .paw-in{min-height:0;gap:0}
.paw.paw-real .paw-t{font-size:13.5px;line-height:1.06;max-width:5.4em;letter-spacing:0;color:#1a1608}
.paw.paw-real .paw-bg{stroke:#f3dc98;stroke-width:2.5;filter:drop-shadow(0 6px 12px #d9b76540) drop-shadow(0 1px 0 #8a6524)}

/* Marc: desktop = image LEFT | story RIGHT, Begin centered under the left image.
   Mobile (<=980) unchanged: logo→image→Begin→story stack. Live selectors prefixed .intro. */
@media (min-width:1100px){
 .intro .brandbar{padding:clamp(8px,1.4vh,18px) 0 0;gap:14px}
 .intro .brandbar img{height:clamp(72px,8.5vh,92px)}
 .intro .brandbar h1{font-size:clamp(2.7rem,5vh,3.5rem)}
 .intro .brandbar .brand-sub{margin-top:4px;font-size:.74rem}
 .intro .intro-rule{margin-top:4px}
 .intro .wrap{max-width:1360px}
 .intro .vas-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:"art story";
  column-gap:40px;row-gap:10px;
  align-items:start;
  margin-top:clamp(4px,1vh,12px);margin-bottom:28px;
 }
 .intro .vas-art{grid-area:art;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;max-width:none;width:100%;margin:0;gap:clamp(6px,1.2vh,14px);position:static}
 .intro .va-hero{margin:0;width:100%}
 .intro .va-hero img{max-height:calc(100vh - 300px);width:auto;max-width:100%;margin:0 auto;object-fit:contain;display:block}
 .intro .vas-enter{display:flex;justify-content:center;margin:0;padding:0;background:none;position:static}
 .intro .intro-story{
  grid-area:story;width:100%;max-width:none;margin:0;
  border-top:0;border-left:0;padding:0 0 0 30px;
  background:linear-gradient(#d9b76500,#d9b76555 18%,#d9b76555 82%,#d9b76500) left/1px 100% no-repeat;
 }
 .intro .intro-story h2{font-size:clamp(1.55rem,2.8vh,1.95rem);margin-bottom:8px;padding-bottom:8px}
 .intro .intro-story .body p{font-size:clamp(.86rem,1.7vh,1.0rem);line-height:1.52;margin:0 0 .42em}
 .intro .intro-story .body p:first-child::first-letter{font-size:2.6em;padding-top:3px}
 .intro .intro-story .sig{font-size:1.3rem;margin-top:2px}
}

@media (max-width:980px){
 .vas-grid{grid-template-columns:1fr;gap:26px}
 .vas-art{position:relative;top:0;max-width:760px;margin:0 auto}
 .intro-story{padding:26px 0 0;border-left:0;border-top:1px solid #d9b76540}
}
@media (max-width:700px){
 .brandbar{flex-direction:column;gap:6px;padding:26px 0 0}
 .brandbar img{height:86px}
 .brandbar h1{font-size:2.7rem}
 .brandbar .brand-sub{font-size:.7rem;letter-spacing:.2em}
 .vas-grid{margin-top:12px}
 .va-hero{margin-top:14px}
 .intro-id .wrap{flex-direction:column;gap:2px}
 .intro-id .dot{display:none}
 .intro-story h2{font-size:2rem}
}

/* ==== LAYOUT (Marc [t424u] 30/10 22:42 KST) — copy into intro-a.css ====
   Desktop >=1100px: logo+title; image LEFT | story RIGHT; Begin centered BELOW both columns.
   Mobile <=980: logo+title -> image -> Begin -> story (stack). NO story-first sticky.
   1st page = intro only (#map after .intro). Live body is intro-home, so selectors use .intro.
   .brand-sub / .intro-rule / .intro-story stand in for .sub / .rule / .vb-panel+.story.bare.
   .mock-map is not copied. */
.intro{position:relative}
.intro{flex:0 0 auto;display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;min-height:100dvh;min-height:max(100vh,100dvh,100svh,100lvh)}
.intro-spacer{flex:1 1 auto;width:100%;min-height:0}
.intro>main{flex:1 0 auto}
@media (max-width:980px){
 .intro .vas-grid{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:8px;margin-bottom:36px}
 .intro .vas-art{display:flex;flex-direction:column;align-items:center;position:relative;top:0;max-width:560px;margin:0 auto;width:100%}
 .intro .va-hero{margin:0 auto;max-width:100%;width:100%}
 .intro .va-hero img{width:100%;height:auto;max-height:min(42vh,340px);object-fit:contain}
 .intro .vas-enter{position:static;margin:14px 0 4px;padding:0;background:none}
 .intro .intro-story{order:unset;border-top:1px solid #d9b76540;padding-top:22px}
}
@media (max-width:700px){
 .intro .brandbar{flex-direction:row;gap:12px;padding:14px 0 0}
 .intro .brandbar img{height:66px}
 .intro .brandbar>div{align-items:flex-start;text-align:left}
 .intro .brandbar h1{font-size:2.15rem}
 .intro .brandbar .brand-sub{font-size:.62rem;letter-spacing:.16em;margin-top:6px}
 .intro .intro-rule{max-width:240px;margin-top:4px}
 .intro .vas-grid{margin-top:4px;margin-bottom:28px;gap:14px}
 .intro .va-hero img{max-height:min(38vh,300px)}
 .intro .vas-enter{margin:10px 0 2px}
 .intro .intro-story{padding:18px 2px 0}
 .intro .intro-story h2{font-size:1.75rem;margin-bottom:12px;padding-bottom:10px}
 .intro .intro-story .body p{font-size:.97rem;line-height:1.62;margin:0 0 .7em}
 .intro .intro-story .sig{font-size:1.4rem;margin-top:2px}
}

/* Page 1 lock is only html.intro-lock. Removed for #map and other in-page links. */
html:not(.intro-lock) .mapcard{min-height:min(640px, calc(100dvh - 120px));margin-top:0;box-sizing:border-box}

/* ==== Marc [t435u] 30/10 ~23:20 KST — 1st page WITHOUT scroll on mobile/tablet ====
   SCOPE: no-scroll ONLY while html.intro-lock (the intro). #map and the rest scroll after Begin.
   <=1099px: logo+title -> image -> Begin -> FULL story + signature inside the first viewport.
   Live body is intro-home: body.vA-side -> .intro, .sub -> .brand-sub, .rule -> .intro-rule,
   .story.bare / .vb-panel -> .intro-story. .mock-map is not copied. Desktop >=1100 untouched. */
@media (max-width:1099px){
 .intro .wrap{padding:0 14px}
 .intro .brandbar{flex-direction:row;justify-content:center;gap:10px;padding:clamp(6px,1.2vh,12px) 0 0;padding:clamp(6px,1.2svh,12px) 0 0}
 .intro .brandbar img{height:clamp(34px,5.4vh,52px);height:clamp(34px,5.4svh,52px)}
 .intro .brandbar>div{align-items:flex-start;text-align:left}
 .intro .brandbar h1{font-size:clamp(1.4rem,3.4vh,2rem);font-size:clamp(1.4rem,3.4svh,2rem)}
 .intro .brandbar .brand-sub{font-size:.56rem;letter-spacing:.16em;margin-top:3px}
 .intro .intro-rule{max-width:200px;margin-top:2px}
 .intro .intro-rule svg{width:10px;height:10px}
 .intro .vas-grid{display:flex;flex-direction:column;gap:0;margin:clamp(2px,.6vh,6px) 0 0;margin:clamp(2px,.6svh,6px) 0 0}
 .intro .vas-art{max-width:560px}
 .intro .va-hero img{width:auto;max-width:100%;height:auto;max-height:clamp(70px,18vh,220px);max-height:clamp(70px,18svh,220px);margin:0 auto;object-fit:contain}
 .intro .vas-enter{margin:clamp(2px,.5vh,6px) 0 0;margin:clamp(2px,.5svh,6px) 0 0}
 .intro .paw.paw-real{width:clamp(78px,10.4vh,96px);width:clamp(78px,10.4svh,96px);height:clamp(74px,9.9vh,91px);height:clamp(74px,9.9svh,91px);padding:0 0 clamp(12px,1.6vh,15px);padding:0 0 clamp(12px,1.6svh,15px)}
 .intro .paw.paw-real .paw-t{font-size:clamp(9.5px,1.3vh,11.5px);font-size:clamp(9.5px,1.3svh,11.5px)}
 .intro .intro-story{max-width:720px;margin:clamp(4px,.8vh,10px) auto 0;margin:clamp(4px,.8svh,10px) auto 0;width:100%;border-left:0;border-top:1px solid #d9b76540;padding:clamp(5px,.9vh,10px) 0 0;padding:clamp(5px,.9svh,10px) 0 0;overflow:visible}
 .intro .intro-story h2{font-size:clamp(1.05rem,2.3vh,1.5rem);font-size:clamp(1.05rem,2.3svh,1.5rem);line-height:1.1;margin-bottom:clamp(3px,.6vh,8px);margin-bottom:clamp(3px,.6svh,8px);padding-bottom:clamp(3px,.6vh,8px);padding-bottom:clamp(3px,.6svh,8px)}
 .intro .intro-story h2::after{width:56px}
 .intro .intro-story .body p{font-size:clamp(11px,min(1.56vh,3.1vw),14px);font-size:clamp(11px,min(1.56svh,3.1vw),14px);line-height:1.38;margin:0 0 .32em}
 .intro .intro-story .body p:first-child::first-letter{font-size:2.55em;padding:2px 5px 0 0}
 .intro .intro-story .sig{font-size:clamp(1rem,2.1vh,1.35rem);font-size:clamp(1rem,2.1svh,1.35rem);margin-top:0}
 .intro .intro-story .sig svg{width:11px;height:11px}
 .intro .vas-grid{margin-bottom:clamp(6px,1.2vh,14px);margin-bottom:clamp(6px,1.2svh,14px)}
}
@media (max-width:1099px) and (max-height:700px){
 .intro .va-hero img{max-height:clamp(64px,13vh,120px);max-height:clamp(64px,13svh,120px)}
 .intro .paw.paw-real{width:72px;height:68px;padding-bottom:11px}
 .intro .intro-story .body p{line-height:1.34}
}
/* ==== Marc 30/10 ~23:35 KST — compact desktop header so Begin stays inside the fold. Last so it beats generic brand sizes. ====
   Image stays on the left; the paw stays centered under that image. .mock-map is not copied. */
@media (min-width:1100px){
 .intro .brandbar{padding:clamp(6px,1.2vh,16px) 0 0;gap:16px}
 .intro .brandbar img{height:clamp(56px,8.2vh,96px)}
 .intro .brandbar h1{font-size:clamp(2.3rem,4.6vh,3.6rem)}
 .intro .brandbar .brand-sub{font-size:.72rem;margin-top:4px}
 .intro .intro-rule{margin-top:2px}
 .intro .vas-grid{margin-top:clamp(4px,1vh,12px);row-gap:clamp(6px,1.2vh,14px);margin-bottom:12px}
 .intro .va-hero img{max-height:calc(100vh - 290px)}
 .intro .intro-story h2{padding-bottom:8px}
}
@media (min-width:1100px) and (max-height:820px){
 .intro .brandbar img{height:clamp(50px,7.4vh,64px)}
 .intro .brandbar h1{font-size:clamp(2.1rem,4.4vh,2.6rem)}
 .intro .brandbar .brand-sub{font-size:.66rem;margin-top:2px}
 .intro .va-hero img{max-height:calc(100vh - 250px)}
 .intro .intro-story h2{font-size:clamp(1.35rem,2.8vh,1.6rem);margin-bottom:6px;padding-bottom:6px}
 .intro .intro-story .body p{font-size:clamp(.8rem,1.8vh,.9rem);line-height:1.46;margin:0 0 .36em}
 .intro .intro-story .sig{font-size:1.15rem}
 .intro .paw.paw-real{width:100px;height:95px;padding:0 0 15px}
 .intro .paw.paw-real .paw-t{font-size:11.5px}
}
/* ==== Marc 31/10 — phone passport ~328px at 390×844 (WD max PASS). Desktop ≥1100 untouched. ====
   --hh = max(90px, min(380px, 84vw, 100svh - 512px)). At 390×844 that is 84vw ≈ 328px.
   Width is height × 1.25, a few pixels past the screen edge, clipped. Begin stays ~96×90.
   Wider screens keep the previous larger passport (500 ≈ 373px, Fold ≈ 363px). */
@media (max-width:1099px){
 html.intro-lock,html.intro-lock body.intro-home{overflow:hidden !important}
 html.intro-lock body.intro-home > section.intro{overflow-x:clip !important;overflow-y:hidden !important;padding-bottom:0 !important}
 html.intro-lock body.intro-home > section.intro > div.wrap{display:flex !important;flex-direction:column !important;flex:1 1 auto !important;min-height:0 !important}
 html.intro-lock .vas-grid{flex:1 1 auto !important;justify-content:flex-start !important;min-height:0 !important;overflow-x:clip !important;overflow-y:hidden !important}
 .intro{overflow-x:clip;--hh:max(90px,min(380px,84vw,calc(100svh - 512px)))}
 .intro .wrap{padding:0 14px}
 .intro .brandbar{gap:6px;padding:1px 0 0}
 .intro .brandbar img{height:24px}
 .intro .brandbar h1{font-size:1.12rem}
 .intro .brandbar .brand-sub{font-size:.46rem;letter-spacing:.12em;margin-top:0}
 .intro .intro-rule{margin:0}
 .intro .intro-rule svg{width:10px;height:8px}
 .intro .vas-grid{flex:1 0 auto;justify-content:flex-start;margin:0 0 4px;gap:0}
 .intro .vas-art{max-width:none}
 .intro .va-hero{display:flex;justify-content:center;margin-left:-14px;margin-right:-14px;width:calc(100% + 28px);max-width:none}
 .intro .va-hero picture{display:flex;justify-content:center;width:100%;overflow:visible}
 .intro .va-hero img{width:calc(var(--hh) * 1.25);max-width:none;height:var(--hh);max-height:none;margin:0;object-fit:fill}
 .intro .vas-enter{margin:1px 0 0}
 .intro .paw.paw-real{width:clamp(96px,12svh,128px);height:clamp(90px,10.5svh,118px);min-width:96px;min-height:48px;padding:0 0 14px}
 .intro .paw.paw-real .paw-t{font-size:11px}
 .intro .intro-story{max-width:600px;padding:2px 0 0;margin-top:2px}
 .intro .intro-story h2{font-size:.92rem;line-height:1;margin:0 0 1px;padding-bottom:2px}
 .intro .intro-story h2::after{width:40px}
 .intro .intro-story .body p{font-size:11px;line-height:1.27;margin:0 0 .18em;color:#e0c07a}
 .intro .intro-story .body p:first-child::first-letter{font-size:1.7em;padding:0 3px 0 0}
 .intro .intro-story .sig{font-size:.92rem;margin-top:0}
 .intro .intro-story .sig svg{width:10px;height:9px}
}
/* Short phones keep the passport that already fits; do not drop to the 208px formula. */
@media (max-width:1099px) and (max-height:780px) and (min-height:701px){
 .intro .va-hero img{width:auto;max-width:100%;height:auto;max-height:min(34svh,248px)}
 .intro .intro-story .body p{font-size:10.5px;line-height:1.25}
}
@media (max-width:1099px) and (max-height:700px){
 .intro .va-hero img{width:auto;max-width:100%;height:auto;max-height:min(22svh,140px)}
 .intro .intro-story .body p{font-size:10.5px;line-height:1.25;margin-bottom:.16em}
}
/* 500-wide tall phones keep the larger passport. The open Fold is the next block. */
@media (min-width:480px) and (max-width:599px) and (min-height:781px){
 .intro .va-hero img{width:auto;max-width:100%;height:auto;max-height:min(46svh,380px)}
 .intro .intro-story{max-width:640px}
}
/* Open Fold / large mobile, bloc ~00:55. Phone ≤599 stays on the 328px passport. Desktop ≥1100 untouched.
   Story is 560px (~75 characters at 13px). Hero ~45svh so 906×986 is about 446px. Begin ~104×98.
   The gold mini-paw is recentered; max-width was pinning it to the left. */
@media (min-width:600px) and (max-width:1099px){
 .intro .intro-rule{display:flex;justify-content:center;align-self:center;max-width:none;width:auto;margin:2px auto 0}
 .intro .intro-story{max-width:560px;width:100%;margin-inline:auto;margin-left:auto;margin-right:auto}
 .intro .intro-story .body p{font-size:13px;line-height:1.35;margin:0 0 .22em}
 .intro .va-hero img{width:auto;max-width:min(92vw,720px);height:auto;max-height:min(45.2svh,520px)}
 .intro .paw.paw-real{width:104px;height:98px;min-width:96px;min-height:48px;padding:0 0 14px}
 .intro .paw.paw-real .paw-t{font-size:12px}
}
/* Shorter Folds (853×790) cannot hold a 45svh passport plus the 13px story. */
@media (min-width:600px) and (max-width:1099px) and (max-height:860px){
 .intro .va-hero img{max-height:min(36svh,340px)}
 .intro .intro-story .body p{line-height:1.28;margin-bottom:.16em}
}

/* ==== Fold clip fix 31/10 ~12:30 KST (Asia/Seoul) — paste at the END of intro-a.css ====
   Marc: « Réduire la police pour garder des proportions justes. »
   1) Smaller story type (h2 + body + signature) on phones and Fold.
   2) Safety net: when the full story still does not fit, the passport image shrinks
      (flex-shrink + object-fit:contain), never the story. No page scroll. Begin always whole.
   Every rule is inside max-width:1099px. Desktop >=1100 untouched. */

/* --- 1. Story type: phones <=599 --- */
@media (max-width:1099px){
 .intro .intro-story h2{font-size:.84rem;margin:0 0 1px;padding-bottom:2px}
 .intro .intro-story .body p{font-size:clamp(9.5px,3vw,10.5px);line-height:1.27;margin:0 0 .18em}
 .intro .intro-story .sig{font-size:.84rem}
}
@media (max-width:1099px) and (max-height:780px){
 .intro .intro-story .body p{font-size:clamp(9.5px,2.9vw,10px);line-height:1.25;margin-bottom:.16em}
}
/* --- 1b. Story type: open Fold / tablets 600-1099 (560px column) --- */
@media (min-width:600px) and (max-width:1099px){
 .intro .intro-story h2{font-size:.9rem}
 .intro .intro-story .body p{font-size:12px;line-height:1.32;margin:0 0 .2em}
 .intro .intro-story .sig{font-size:.9rem}
}
@media (min-width:600px) and (max-width:1099px) and (max-height:900px){
 .intro .intro-story .body p{font-size:11.5px;line-height:1.28;margin-bottom:.16em}
}
@media (min-width:600px) and (max-width:1099px) and (max-height:760px){
 .intro .intro-story .body p{font-size:10.5px;line-height:1.26}
}

/* --- 2. Safety net: the image gives way, the story never does --- */
@media (max-width:1099px){
 html.intro-lock .vas-grid{display:flex !important;flex-direction:column !important}
 html.intro-lock .vas-art{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
 html.intro-lock .va-hero{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
 html.intro-lock .va-hero picture{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center}
 html.intro-lock .va-hero img{flex:0 1 auto;min-height:64px;object-fit:contain}
 html.intro-lock .vas-enter,html.intro-lock .intro-story{flex:0 0 auto}
}

/* --- 3. Last resort, landscape phones only (height <=480px, e.g. 653x280):
   the story alone gets its own scroll inside the page. Page 1 still does not scroll.
   No Galaxy Fold portrait size (folded or open) reaches this rule. --- */
@media (max-width:1099px) and (max-height:480px){
 html.intro-lock .intro-story{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
/* ==== END Fold clip fix 31/10 ==== */

/* intro vertical balance desk — 2026-11-04 Marc OK */
@media (min-width:1100px){
 html.intro-lock body.intro-home > section.intro{padding-bottom:0!important;justify-content:center!important;align-items:stretch!important}
 html.intro-lock body.intro-home > section.intro > div.wrap{flex:0 1 auto!important;height:auto!important;max-height:100%!important;min-height:0!important;width:100%!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
 html.intro-lock .vas-grid{flex:0 0 auto!important;overflow:visible!important}
 .intro .vas-grid{align-items:center!important;margin-top:0!important;margin-bottom:0!important}
 .intro .brandbar{padding-top:0!important}
 .intro .intro-rule{margin-top:0!important}
}