/* Modern visual layer for Masinloc Connect.
   This file intentionally overrides presentation only; submission logic stays untouched. */

:root{
  /* Palette comes from tokens.css. Note that --ease here is a timing
     function; the editorial layer uses the same name for a full transition
     shorthand, so Masinloc Connect keeps its own definition. */
  --shadow:0 18px 55px rgba(3,17,47,.08);
  --shadow-hover:0 22px 65px rgba(3,17,47,.13);
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:var(--font-ui);
}

body{font-family:var(--sans);color:var(--ink);background:var(--white);text-rendering:optimizeLegibility}
button,input,textarea,select{font-family:var(--sans)}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(30,99,233,.24);outline-offset:3px}
::selection{background:rgba(30,99,233,.16);color:var(--navy)}

/* Landing navigation */
.overlay-nav{height:82px;padding:0 clamp(22px,4vw,58px);background:rgba(255,255,255,.92);border-bottom:1px solid rgba(17,24,39,.07);backdrop-filter:saturate(145%) blur(16px)}
.overlay-nav img{width:clamp(158px,14vw,194px)}
.overlay-nav nav{gap:clamp(18px,2.2vw,34px)}
.overlay-nav a{font-size:12px!important;letter-spacing:.01em;color:var(--ink)!important;position:relative;padding:12px 0!important}
.overlay-nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--blue);transition:right 220ms var(--ease)}
.overlay-nav nav a:hover::after{right:0}

/* Connect hero ------------------------------------------------------------
   The hero is a brand graphic rather than a photograph: the Masinloc mark on
   a deep navy field, circled by an orbit carrying the palette as nodes, with
   the left two-thirds left empty for the headline. It illustrates the tagline
   literally — the town at the centre, connected outward.

   Everything below follows from the ground being dark. The scrim runs navy to
   transparent so the type side is solid and the mark side stays clear, and
   every piece of type on it is light. Nothing here is a taste change: navy
   text on a navy field is invisible. */
/* Height is set against the graphic's 16:9. A shorter band crops the top
   points off the mark; a taller one pushes the choices below the fold. */
.landing-view .hero{height:clamp(430px,50vw,684px);min-height:430px;background:var(--navy-deep)}
.landing-view .hero picture{display:contents}
.landing-view .hero-img{object-position:center 44%;transform:scale(1.01);animation:connect-hero-in 1.05s var(--ease) both}
.landing-view .hero-fade{background:linear-gradient(90deg,
  rgba(3,17,47,.97) 0%,rgba(3,17,47,.93) 26%,rgba(3,17,47,.72) 44%,
  rgba(3,17,47,.24) 68%,rgba(3,17,47,0) 88%)}
.landing-view .hero-copy{left:clamp(28px,6vw,94px);top:50%;transform:translateY(-42%);max-width:560px}
.landing-view .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:8px}
.landing-view .hero-copy h1{font-size:clamp(58px,7.3vw,108px);line-height:.84;letter-spacing:-.055em;color:var(--white);font-weight:900}
/* CONNECT takes the yellow of the orbit. The identity blue is legible enough
   on this ground to pass as large text and no more; against the mark a few
   hundred pixels away it reads as a dim version of itself. */
.landing-view .connect{font-size:clamp(24px,2.8vw,38px);letter-spacing:.24em;color:var(--yellow);margin:12px 0 15px}
.landing-view .brand-rule{width:144px;height:3px;margin-bottom:19px}
/* The tagline. It sits directly under the MASINLOC CONNECT lockup and is the
   line that says what the place is for, so it carries more weight than the
   four-part manifesto it replaced. */
.landing-view .manifesto{font-size:clamp(16px,1.5vw,23px);line-height:1.32;letter-spacing:-.012em;color:var(--white);margin-bottom:12px;text-wrap:balance}
.landing-view .intro{font-size:13px;line-height:1.72;color:rgba(255,255,255,.78);max-width:490px}

/* Choice area -------------------------------------------------------------
   Three cards, and they are the whole point of the page: everything above
   them is introduction. They use the same material as the homepage's four
   doors — a translucent tinted sheet over the page, a solid chip for the
   icon, a hairline of light along the top edge — so somebody arriving here
   from the homepage recognises what they are looking at.

   The palette carries the meaning. Business is blue, story is red,
   professional is yellow; those pairings already existed in styles.css and
   are kept. What changes is that the colour now tints the whole card rather
   than only a small circle, so the three are told apart before any label is
   read. */
.quick-choices{padding:clamp(54px,6vw,88px) clamp(22px,5vw,72px) clamp(56px,6vw,84px);max-width:1320px;margin:0 auto}
.quick-choices h2{font-family:var(--font-editorial);font-weight:400;font-size:clamp(30px,3.2vw,48px);line-height:1.12;color:var(--navy);margin:0 auto 10px;max-width:730px}
.quick-intro{font-size:14px;line-height:1.6;color:var(--muted);max-width:640px;margin:0 auto 34px}
.quick-grid{gap:clamp(12px,1.4vw,18px)}

.quick-card{
  grid-template-columns:56px 1fr 24px;gap:16px;padding:clamp(20px,2vw,26px);min-height:178px;
  border-radius:22px;
  background:var(--wash);
  border:1px solid var(--edge);
  /* The inset hairline is what makes a translucent panel read as a sheet
     laid on the page rather than a flat block of pale colour. */
  box-shadow:0 18px 34px -22px rgba(6,26,70,.42),inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:transform 320ms var(--ease),box-shadow 320ms var(--ease),border-color 320ms var(--ease);
}
.quick-card:hover,.quick-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--chip);
  box-shadow:0 26px 44px -22px rgba(6,26,70,.34),inset 0 1px 0 rgba(255,255,255,.8);
}
.quick-card:active{transform:translateY(-1px) scale(.994)}

/* --wash is the translucent field, --edge its hairline, --chip the solid
   colour under the icon, --glyph what is drawn on it, --title the heading.
   Titles take the -ink variants rather than the identity colours: brand
   yellow fails contrast both as small text and behind white type, and brand
   red fails the moment it sits on a tinted ground rather than pure white.
   tokens.css carries both stand-ins and the measurements behind them. */
.quick-card.business{--wash:rgba(13,59,158,.09);--edge:rgba(13,59,158,.22);
  --chip:var(--blue);--glyph:var(--white);--title:var(--blue)}
.quick-card.story{--wash:rgba(230,30,37,.08);--edge:rgba(230,30,37,.22);
  --chip:var(--red);--glyph:var(--white);--title:var(--red-ink)}
.quick-card.professional{--wash:rgba(255,199,0,.16);--edge:rgba(255,199,0,.42);
  --chip:var(--yellow);--glyph:var(--navy-deep);--title:var(--yellow-ink)}

.quick-card .icon-circle{
  width:52px;height:52px;border-radius:15px;
  background:var(--chip);color:var(--glyph);
  box-shadow:0 12px 22px -12px var(--chip);
}
.quick-card .icon-circle svg{
  width:25px;height:25px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.quick-card strong{font-size:12px;letter-spacing:.07em;color:var(--title)}
.quick-card p{font-size:13.5px;line-height:1.62;margin-top:9px;color:var(--text)}
.quick-card>b{
  align-self:center;display:inline-flex;color:var(--chip);
  transition:transform 300ms var(--ease);
}
.quick-card.story>b{color:var(--red-ink)}
.quick-card.professional>b{color:var(--yellow-ink)}
.quick-card>b svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.quick-card:hover>b{transform:translateX(5px)}

/* What happens after you choose, said once and before the choice rather than
   discovered on the last step. */
.quick-assure{
  margin:clamp(24px,3vw,34px) auto 0;max-width:620px;
  font-size:12.5px;line-height:1.6;color:var(--muted);
}

/* In-app page transitions. */
.view.active{animation:connect-view-in 380ms var(--ease) both}
@keyframes connect-view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes connect-hero-in{from{opacity:.55;transform:scale(1.045)}to{opacity:1;transform:scale(1.015)}}

/* Mission and vision -------------------------------------------------------
   This copy used to sit on a separate screen that nothing on the page linked
   to, so nobody ever read it. It now closes the landing page, which is where
   somebody deciding whether to submit anything would look for it.

   The band is a pale navy field rather than another white one: it ends the
   page instead of letting it trail off into the footer, and it lets the two
   panels use the same translucent material as the cards above without
   competing with them. */
.connect-purpose{
  padding:clamp(56px,6.5vw,92px) clamp(22px,5vw,72px) clamp(64px,7vw,100px);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(13,59,158,.09) 0%,rgba(13,59,158,0) 62%),
    radial-gradient(90% 80% at 100% 100%,rgba(255,199,0,.13) 0%,rgba(255,199,0,0) 60%),
    var(--soft);
  border-top:1px solid var(--line);
  text-align:center;
}
.purpose-label{font-size:11px;letter-spacing:.16em;color:var(--blue);margin:0 0 10px}
.connect-purpose h2{
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-.02em;
  color:var(--navy);margin:0 0 clamp(28px,3.4vw,40px);
}
.purpose-grid{
  display:grid;gap:clamp(12px,1.4vw,18px);
  max-width:940px;margin:0 auto;text-align:left;
  grid-template-columns:1fr;
}
@media (min-width:760px){.purpose-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.purpose-card{
  padding:clamp(24px,2.4vw,32px);border-radius:22px;
  background:var(--wash);border:1px solid var(--edge);
  box-shadow:0 18px 34px -22px rgba(6,26,70,.42),inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.purpose-blue{--wash:rgba(255,255,255,.78);--edge:rgba(13,59,158,.20);--tag:var(--blue)}
.purpose-yellow{--wash:rgba(255,255,255,.78);--edge:rgba(255,199,0,.46);--tag:var(--yellow-ink)}
.purpose-tag{display:block;font-size:11px;letter-spacing:.14em;color:var(--tag);margin-bottom:12px}
.purpose-card h3{
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(19px,1.7vw,23px);line-height:1.24;letter-spacing:-.012em;
  color:var(--navy);margin:0 0 12px;
}
.purpose-card p{font-size:13.5px;line-height:1.68;color:var(--text);margin:0}
.purpose-closing{
  font-family:var(--font-editorial);font-size:clamp(15px,1.5vw,19px);line-height:1.5;
  color:var(--navy);margin:clamp(30px,3.4vw,42px) auto clamp(20px,2vw,26px);max-width:560px;
}
.connect-purpose .primary-button{display:inline-flex}

/* Form shell */
.form-view{background:linear-gradient(180deg,#fff 0,#fff 64px,var(--soft) 64px,var(--soft) 100%);min-height:100svh}
.form-tools{max-width:980px;margin:20px auto 0;padding:0 24px}
.form-tools button,.form-tools span{font-size:11px}
/* Was an inline style on the element, carrying a hex that existed nowhere
   else in the palette. */
.form-privacy{max-width:1100px;margin:0 auto 18px;padding:0 24px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.form-privacy a{color:var(--blue);font-weight:700;text-underline-offset:3px}

.progress-rail{max-width:680px;margin:22px auto 42px}
.progress-rail:before{top:16px}
.step-node span{width:33px;height:33px;font-size:11px;box-shadow:0 0 0 5px var(--soft)}
.step-node strong{font-size:10px}
.form-grid{max-width:980px;grid-template-columns:160px minmax(0,1fr);gap:34px;padding:0 24px 78px}
.category-aside{padding-top:18px}
.side-icon{width:64px;height:64px;font-size:26px;margin-bottom:16px}
.category-aside h3{font-size:15px;color:var(--navy);margin-bottom:10px}
.category-aside p{font-size:12px;line-height:1.58;max-width:145px;color:var(--muted)}
.form-card{border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(26px,4vw,42px);min-height:380px;background:#fff}
.step-kicker{font-size:10px;letter-spacing:.12em;margin-bottom:10px}
.form-card h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.025em;color:var(--navy);margin-bottom:10px}
.step-help{font-size:13px;line-height:1.62;color:var(--muted);margin-bottom:26px;max-width:680px}
.field-grid{gap:18px}
.field label{font-size:11px;letter-spacing:.02em;margin-bottom:7px;color:var(--ink)}
.form-card input,.form-card textarea,.form-card select{min-height:48px;border:1px solid #D9DEE8;border-radius:11px;padding:13px 14px;font-size:var(--control-font);color:var(--ink);transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease}
.form-card textarea{min-height:130px;line-height:1.55}
.form-card input:hover,.form-card textarea:hover,.form-card select:hover{border-color:#BFC8D8}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--blue-bright);box-shadow:0 0 0 4px rgba(30,99,233,.10)}
.error,.option-error,.consent-error{font-size:11px;margin-top:6px}
.option-grid{gap:14px}
.option-card{border-radius:13px;padding:18px;transition:transform 220ms var(--ease),border-color 180ms ease,box-shadow 180ms ease}
.option-card:hover{transform:translateY(-2px);border-color:#BFC8D8}
.option-card small{font-size:19px}
.option-card strong{font-size:12px}
.option-card p{font-size:11px;line-height:1.5}
.file-box{border-radius:12px;padding:17px;background:#FAFBFD}
.review-list{gap:12px}.review-row{padding-bottom:12px}
.review-row span{font-size:11px}.review-row strong{font-size:12px}
.consent{gap:10px;padding-top:18px;margin-top:18px;border-top:1px solid #e9ebf0}.consent label{font-size:11px;line-height:1.55}
.form-actions{gap:12px;margin-top:26px}
.prev,.next{min-height:46px;border-radius:999px;padding:0 18px;font-size:11px;letter-spacing:.03em;transition:transform 220ms var(--ease),box-shadow 220ms ease}
.prev:hover,.next:hover{transform:translateY(-2px)}
.next:hover{box-shadow:0 12px 28px rgba(13,59,158,.18)}
.save-later{font-size:11px;margin-top:15px}

/* Resume / modal / success */
.resume-bar{top:18px;border-radius:16px;padding:14px 16px;box-shadow:0 22px 65px rgba(3,17,47,.16)}
.resume-bar strong{font-size:12px}.resume-bar span{font-size:10px}.resume-bar button{border-radius:999px;padding:9px 13px;font-size:10px}
.resume-modal{backdrop-filter:blur(10px)}
.resume-modal-card{border-radius:20px;padding:38px;box-shadow:0 30px 90px rgba(3,17,47,.24)}
.modal-kicker{font-size:10px}.resume-modal-card h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:34px;color:var(--navy)}
.resume-modal-card>p:not(.modal-kicker){font-size:13px;line-height:1.65}.modal-actions button{border-radius:999px;padding:13px 16px;font-size:11px}
.success-view{background:var(--soft);padding:96px 22px}.success-panel{max-width:640px;border-radius:22px;box-shadow:var(--shadow);padding:54px}.success-mark{width:68px;height:68px;font-size:28px}.success-panel h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:42px;color:var(--navy)}.success-panel>p{font-size:14px}.ref-box{width:230px;border-radius:12px;padding:15px}.ref-box small{font-size:11px}.ref-box strong{font-size:17px}.success-small{font-size:12px!important;line-height:1.6}.success-buttons button{border-radius:999px;padding:12px 16px;font-size:10px}

@media(max-width:800px){
  /* Mobile navigation for both headers belongs to connect-shell.css, which
     loads after this file. Nothing about the header bar is set here. */
  .landing-view .hero-copy h1{font-size:clamp(52px,17vw,76px)}
  .landing-view .manifesto{font-size:19px}.landing-view .intro{font-size:12px;max-width:340px}
  .quick-choices{padding:50px 18px 74px}
  .quick-grid{grid-template-columns:1fr;gap:12px}
  .quick-card{min-height:0;padding:20px;grid-template-columns:54px 1fr 24px}
  .form-grid{grid-template-columns:1fr;padding:0 16px 62px}.category-aside{display:grid;grid-template-columns:54px 1fr;gap:13px;align-items:center;padding:0}.side-icon{width:54px;height:54px;margin:0}.category-aside h3{margin:0 0 4px}.category-aside p{max-width:none}
  .progress-rail{margin:20px 14px 34px}.step-node strong{font-size:11px}
  .form-card{border-radius:18px;padding:24px 18px}.field-grid,.option-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .form-actions{grid-template-columns:1fr}.prev,.next{width:100%}
  .resume-modal-card{padding:30px 22px}.success-panel{padding:40px 22px}
}

/* Phones only. Above this the viewport is wide enough for the graphic to sit
   behind the type the way it does on a desktop; below it, it cannot.

   Overlaying does not survive the rotation. The mark sits in the middle of its
   own frame, which is exactly where the headline has to go, so any scrim dark
   enough to keep the type readable also turns the mark to mud — and the
   version without a scrim put "Connecting Masinloqueños" across a red diamond.
   Stacked, both are themselves: the type on flat navy, then the mark and its
   orbit uncropped at full width. The 4:5 crop that <picture> serves here is
   built for exactly this (see scripts/build-connect-hero.py). */
@media(max-width:600px){
  .landing-view .hero{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}
  .landing-view .hero-img{position:static;order:2;width:100%;height:auto;
    object-fit:contain;transform:none;animation:none}
  .landing-view .hero-fade{display:none}
  /* The navigation is absolutely positioned over the top of the page, so the
     copy has to clear it itself once it is no longer positioned too. */
  .landing-view .hero-copy{position:static;order:1;left:auto;top:auto;right:auto;
    padding:110px 22px 26px;transform:none;max-width:none}
}

@media(max-width:520px){
  /* No fixed height here: the stacked hero above is sized by its contents.
     Pinning one made the graphic overflow and the first choice card sit on
     top of it. */
  .quick-card{grid-template-columns:48px 1fr 20px}.icon-circle{width:46px;height:46px}
  .form-tools{padding:0 16px}.progress-rail{grid-template-columns:repeat(4,1fr)}
  .step-node strong{font-size:11px;line-height:1.2}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Tablet range ------------------------------------------------------------
   Between the 800px mobile breakpoint and the desktop layout, the three-column
   choice grid could not shrink below its content and pushed 18px past the
   viewport at iPad-portrait width. minmax(0,1fr) lets the columns actually
   shrink; two columns keep the cards readable at this size. */
@media(min-width:801px) and (max-width:980px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-card{grid-template-columns:52px minmax(0,1fr) 24px;padding:20px}
  .quick-choices{padding-left:24px;padding-right:24px}
  .form-grid{grid-template-columns:132px minmax(0,1fr);gap:26px}
}

/* A flexible grid column defaults to min-content, which long unbroken words
   can force wider than the viewport. Scoped above the mobile breakpoint so it
   cannot override the single-column phone layout declared earlier. */
@media(min-width:981px){
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field-grid,.option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.quick-card p,.purpose-card p,.category-aside p{overflow-wrap:anywhere}

/* Legibility floors -------------------------------------------------------
   The minified Connect base sets several labels at 7-9px, which is below what
   anyone can comfortably read. */
.form-tools button,.form-tools span,.save-later{font-size:12px}
.review-row span,.ref-box small{font-size:10px;letter-spacing:.1em}
.review-row strong{font-size:13px}
.consent label,.error,.option-error,.consent-error{font-size:12px}
.purpose-label,.step-kicker{font-size:11px}
.primary-button,.success-buttons button,.prev,.next,.modal-actions button,
.resume-bar button{font-size:12px}
.success-small{font-size:13px!important}
.site-footer .footer-brand p{font-size:12px;line-height:1.7}
.site-footer .footer-item span{font-size:10px}
.site-footer .footer-item strong,.site-footer .footer-item a{font-size:13px}
.site-footer .footer-bottom{font-size:11px}

/* The Marketplace band. Masinloc Connect is where somebody goes to submit a
   business; this is the one place on that page that answers the opposite
   question — I want to FIND a business — so it sits directly under the
   chooser rather than competing with it. */
.mk-band{
  max-width:1150px;margin:0 auto;
  padding:26px 42px 34px;
  display:flex;flex-wrap:wrap;gap:20px 34px;
  align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);
}
.mk-band-copy{max-width:620px}
.mk-band-label{
  margin:0 0 8px;color:var(--blue);
  font:800 10px/1 var(--sans);letter-spacing:.13em;
}
.mk-band h2{
  margin:0 0 8px;color:var(--navy);
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(22px,2.4vw,32px);line-height:1.14;
}
.mk-band p{margin:0;font-size:11px;line-height:1.65;color:#56617d}
.mk-band-cta{
  flex:0 0 auto;
  background:var(--blue);color:#fff;border-radius:5px;
  padding:13px 18px;font-size:11px;font-weight:800;letter-spacing:.02em;
}
.mk-band-cta:hover{background:var(--navy)}
.mk-band-cta:focus-visible{outline:3px solid rgba(13,59,158,.45);outline-offset:3px}

@media(max-width:800px){
  .mk-band{padding:22px 17px 28px}
  .mk-band-cta{width:100%;text-align:center}
}