/* ============================================================
   PORTO 2027 — UPGRADE LAYER  ·  v1
   Drop-in stylesheet. Load it AFTER your existing style.css:
     <link rel="stylesheet" href="porto-upgrade.css?v=1" />
   Restyles: buttons, text panels, hover effects, section
   transitions. Touches nothing in the hero background.
   Palette: cobalt #0047AB · marigold #F5A623 · bone #F8F4ED
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn{border:3px solid #0047AB;border-radius:0;background:#F5A623;color:#0047AB;font-weight:800;font-size:.78rem;letter-spacing:.14em;padding:20px 30px;box-shadow:6px 6px 0 #0047AB;transition:transform .16s cubic-bezier(.22,.61,.18,1),box-shadow .16s cubic-bezier(.22,.61,.18,1),background .25s,color .25s}
.btn:hover{background:#0047AB;color:#F5A623;transform:translate(5px,5px);box-shadow:1px 1px 0 #0047AB}
.btn.dark,.btn.ghost{background:#FFFFFF;color:#0047AB;box-shadow:6px 6px 0 #F5A623}
.btn.dark:hover,.btn.ghost:hover{background:#0047AB;color:#FFFFFF;box-shadow:1px 1px 0 #F5A623}

/* ---------- TEXT PANELS ---------- */
.about-card{border:3px solid #0047AB;background:#FFFFFF;padding:26px 24px 30px;box-shadow:6px 6px 0 #0047AB;transition:transform .2s cubic-bezier(.22,.61,.18,1),box-shadow .2s cubic-bezier(.22,.61,.18,1)}
.about-card:hover{transform:translate(-5px,-5px);box-shadow:11px 11px 0 #F5A623}
.cdetail{border:4px solid #0047AB;border-radius:0;background:#FFFFFF;box-shadow:10px 10px 0 #0047AB}
.cph,.cdsq{border-color:#0047AB;border-radius:0}
.day{border:3px solid #F8F4ED;border-radius:0;box-shadow:7px 7px 0 rgba(255,255,255,.16);background:transparent;transition:transform .2s cubic-bezier(.22,.61,.18,1),box-shadow .2s,background .25s}
.day:hover{background:#F5A623;box-shadow:7px 7px 0 #F8F4ED;transform:translate(-3px,-3px)}
.day:hover .dd,.day:hover .ev,.day:hover .dw,.day:hover .ev small,.day:hover .di,.day:hover .daymore{color:#0047AB}
.pcell{border:3px solid #0047AB;border-radius:0;box-shadow:6px 6px 0 rgba(0,71,171,.18);transition:transform .2s cubic-bezier(.22,.61,.18,1),box-shadow .2s,background .25s,color .25s}
.pcell:hover{background:#F5A623;color:#0047AB;border-color:#0047AB;box-shadow:6px 6px 0 #0047AB;transform:translate(-3px,-3px)}
.colorwrap.cobalt .pcell{border-color:#F8F4ED;color:#F8F4ED;box-shadow:6px 6px 0 rgba(255,255,255,.18)}
.colorwrap.cobalt .pcell:hover{background:#F5A623;color:#0047AB;border-color:#F8F4ED;box-shadow:6px 6px 0 #F8F4ED}
.person .ph{border:3px solid #0047AB;border-radius:0;box-shadow:7px 7px 0 #F5A623}
.person:hover .ph{transform:translate(-4px,-4px);box-shadow:11px 11px 0 #F5A623}
.colorwrap.cobalt .person .ph{border-color:#F8F4ED}
.na{border-top:4px solid #0047AB;transition:transform .2s cubic-bezier(.22,.61,.18,1),box-shadow .2s,background .25s,padding .2s}
.na:hover{background:#F5A623;box-shadow:6px 6px 0 #0047AB;transform:translate(-4px,-4px);padding:20px 18px 18px}
.na:hover h3,.na:hover .more,.na:hover p,.na:hover .nm{color:#0047AB}

/* ---------- RULES + SIGNALS ---------- */
.shead .idx{border-top:4px solid #0047AB;color:#0047AB;font-weight:800}
/* Marigold underline that draws itself when the section scrolls in. The h2 is
   inline-block so it is exactly as wide as the word, and the bar is width:100%
   of that — it stops at the end of the word, never at the column edge.
   .shead carries .reveal, so app.js's IntersectionObserver adds .in. */
.shead h2{position:relative;display:inline-block}
.shead h2::after{content:"";display:block;height:clamp(8px,.9vw,13px);margin-top:clamp(9px,1vw,15px);background:#F5A623;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,.61,.18,1) .15s}
.reveal.in h2::after,.shead.in h2::after{transform:scaleX(1)}
.eyebrow{font-weight:800;color:#0047AB;background:#F5A623;padding:6px 12px}
.eyebrow::before{background:#0047AB}
.colorwrap.cobalt .eyebrow{background:#F5A623;color:#0047AB}
.colorwrap.cobalt .shead .idx{color:#F5A623;border-top-color:#F5A623}
.about-cols,.stats,.mgrid,.elems,.contact,.mast,.clist{border-top-width:3px;border-top-color:#0047AB}
.mcell{border-right-width:3px;border-right-color:rgba(0,71,171,.4)}
.mcell:hover{background:#F5A623}
.mcell:hover h4,.mcell:hover p,.mcell:hover .mn{color:#0047AB}
.elem{border-bottom:3px solid rgba(0,71,171,.4)}
.elem:hover .en{color:#F5A623}
.chan{border-right-width:3px;border-right-color:rgba(0,71,171,.4)}
.crow{border-bottom:3px solid rgba(0,71,171,.35)}
.crow:hover,.crow.on{background:#0047AB;padding-left:20px}
.crow:hover .cc,.crow.on .cc{color:#F5A623}
.crow:hover .ct,.crow.on .ct,.crow:hover .cn,.crow.on .cn{color:rgba(255,255,255,.9)}
.railx{height:5px;background:#F5A623}

/* ---------- SECTION TRANSITION: the marigold block ---------- */
:root{--pm-fill:#F5A623;--pm-band-h:80px;--pm-tile:52px;--pm-spin:30s}
.lbreak{position:relative;z-index:3;display:grid;place-items:center;height:var(--pm-band-h);padding:0;background:var(--pm-fill);border:0;overflow:hidden}
.lbreak .l,.lbreak .r{display:none}
.lbreak .tile{display:block;width:var(--pm-tile);height:auto;opacity:0;transform:rotate(-45deg) scale(.7);transition:opacity .8s cubic-bezier(.22,.61,.18,1) .15s,transform .95s cubic-bezier(.22,.61,.18,1) .15s}
.lbreak.in .tile{opacity:1;transform:none;animation:pmDrift var(--pm-spin) linear infinite .9s}
@keyframes pmDrift{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .btn{padding:16px 22px;box-shadow:5px 5px 0 #0047AB}
  .about-card,.na:hover{box-shadow:5px 5px 0 #0047AB}
}

/* ---------- partner logo cells keep their plate ---------- */.colorwrap.cobalt .pcell.plogo:hover{background:transparent;box-shadow:6px 6px 0 #F5A623}
.pcell.plogo.on-light,.colorwrap.cobalt .pcell.plogo.on-light{background:#FFFFFF;border-color:#F8F4ED}
.colorwrap.cobalt .pcell.plogo.on-light:hover{background:#FFFFFF;box-shadow:6px 6px 0 #F5A623}

/* ---------- final band before contact reads on the marigold CTA ---------- */
.lbreak[data-for="contact"]{background:#0047AB}
.cta .btn{background:#FFFFFF;color:#0047AB;box-shadow:6px 6px 0 #0047AB}
.cta h3{color:#FFFFFF}
.cta .btn:hover{background:#0047AB;color:#FFFFFF;box-shadow:1px 1px 0 #FFFFFF}
@media(prefers-reduced-motion:reduce){
  .shead h2::after{transform:scaleX(1)!important;transition:none!important}
  .lbreak .tile{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .lbreak .l,.lbreak .r{transform:scaleX(1)!important;transition:none!important}
}