/* ============================================================
   MagicMyData — Originally rebuilt by Claude.ai (!in a sort of one-shot to begin!) from original Squarespace theme values
   Measured tokens:
   bg #F4F3FA · headings/footer #2F2C7F · body text #1A1A1A
   nav #2D2A7B (hover #EF3BCD, active #A0258A) · rules #EF3BCD
   buttons #2D2A7B/#FFF radius 8px · Poppins (100/400/600/700)
   h1 62px w100 ls-0.02em · h2 50px (35px ≤640px) · body 17.5px
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,600;0,700;1,400;1,700&display=swap');

:root{
  --bg:        #F4F3FA;
  --indigo:    #2D2A7B;   /* headings, footer text */
  --nav:       #2D2A7B;   /* nav links, buttons */
  --pink:      #EF3BCD;   /* hairline rules, hovers */
  --active:    #A0258A;   /* active nav item */
  --demo-nav:  #0E7A82;   /* Job Search Demo App nav item */
  --demo-nav-hover: #13A3AD;
  --demo-nav-active: #0B5A61;
  --text:      #1A1A1A;   /* body copy */
  --focus-blue:#85B1F2;   /* form field hover/focus */
  --gutter: 4vw;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',sans-serif;
  font-weight:400;
  font-size:17.5px;
  line-height:1.4;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--indigo);}
p{margin:0 0 1em;}
ul{margin:0 0 1em;padding-left:40px;}
li{margin-bottom:.45em;}
strong{font-weight:700;}

h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:100;color:var(--indigo);margin:0 0 .5em;}
h1{font-size:62px;line-height:1.056;letter-spacing:-0.02em;}
.hero-2{margin-top:-0.2em;}
h2{font-size:50px !important;line-height:1.12;}
@media only screen and (max-width:640px){
  h1{font-size:42px;}
  h2{font-size:35px !important;}
}

/* ---------- Header (min 72px, grows if nav wraps; hairline pink rule) ---------- */
header.header{
  background:var(--bg);
  border-bottom:1px solid var(--pink);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);min-height:72px;gap:1rem;
}
.header-title{flex-shrink:0;}
.header-title img{height:70px;width:auto;}
.header-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem 2rem;list-style:none;margin:0;padding:0;}
.header-nav-item a{
  font-size:22px !important;font-weight:bold;
  text-decoration:none !important;color:#2d2a7b !important;
}
.header-nav-item a:hover{color:#ef3bcd !important;}
.header-nav-item--active a{color:#a0258a !important;}
.header-nav-item--demo a{color:var(--demo-nav) !important;}
.header-nav-item--demo a:hover{color:var(--demo-nav-hover) !important;}
.header-nav-item--demo.header-nav-item--active a{color:var(--demo-nav-active) !important;}

.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:"";display:block;width:24px;height:3px;background:var(--nav);position:relative;
}
.nav-burger span::before{position:absolute;top:-8px;}
.nav-burger span::after{position:absolute;top:8px;}
@media (max-width:900px){
  .nav-burger{display:block;}
  .header-nav{
    display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--pink);
    padding:.5rem var(--gutter) 1rem;
  }
  .header-nav.open{display:flex;}
  .header-nav-item{width:100%;}
  .header-nav-item a{display:block;padding:.6rem 0;}
  .header-title img{height:52px;}
}

/* ---------- Layout ---------- */
main{padding:36px var(--gutter) 30px;}

/* Home: two columns (534 : 583, 60px gap measured). Named areas let the
   image sit beside all the text on desktop, but reorder to just below the
   hero lines on mobile, without duplicating markup or using JS. */
.home-grid{
  display:grid;grid-template-columns:534fr 583fr;
  column-gap:60px;row-gap:60px;align-items:start;
  grid-template-areas:"hero image" "rest image";
}
.home-hero{grid-area:hero;}
.home-rest{grid-area:rest;}
.home-image{grid-area:image;}
@media (min-width:901px){
  .home-grid{row-gap:0.5rem;}
}
@media (max-width:900px){
  .home-grid{
    row-gap:0.5rem;
    grid-template-columns:1fr;
    grid-template-areas:"hero" "image" "rest";
  }
}

/* "Getting Started is Simple" + the final booking button are normally just
   part of .home-rest's flow, stacked below "Common Projects" (unchanged
   from the original design - .home-grid's own "hero image"/"rest image"
   template above is never touched, so "rest" always starts right after
   "hero" exactly as before). On widths where the (portrait) hero image
   ends above "Common Projects" - leaving blank space under the image -
   main.js moves #gs-block to become the last child of .home-image itself
   (right after the <img>) and sets an explicit margin-top (measured
   against "Common Projects") so it starts level with it, at the image's
   own column width - no grid-area math needed for it at all. The final
   button is detached into a direct child of .home-grid and given the
   "btn" area (added below "rest"/"image" as a 3rd row) so it spans both
   columns, centred underneath everything. #final-btn-row's grid-area rule
   is inert while it's still nested inside .home-rest. */
.home-grid.is-split{grid-template-areas:"hero image" "rest image" "btn btn";}
#final-btn-row{grid-area:btn;}

/* Testimonials */
.testimonials{margin:2.4em 0;}
.testimonials-heading{margin-bottom:.6em;}
.testimonial{
  margin:0;padding:1.4rem 1.6rem;
  background:#fff;border-left:4px solid var(--pink);
  border-radius:4px;
}
.testimonial-quote{
  font-style:italic;font-size:19px;line-height:1.45;
  margin:0 0 .7em;color:var(--indigo);
}
.testimonial-attribution{font-size:15.5px;color:var(--text);}
.testimonial-attribution a{color:var(--indigo);font-weight:600;}
.testimonial-attribution a:hover{color:var(--pink);}

/* Buttons — exact .my-blue-btn from original custom CSS */
.my-blue-btn{
  display:inline-block;background-color:#2d2a7b;color:#fff;
  text-decoration:none;font-weight:600;padding:12px 28px;
  border-radius:8px;transition:all .2s ease;font-size:17.5px;
}
.my-blue-btn:hover{background-color:#2d2a7b;color:#ef3bcd;}
.btn-row{text-align:center;margin:1.6em 0;}

/* Services: 4 columns, 11px gaps (measured) */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:2rem;}
.svc-col img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.svc-title{font-size:22.1px;text-align:center;margin:1.5em 0 .8em;}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:24px;}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr;}}

/* Pricing/protection block: spans the two middle svc-grid columns exactly,
   by reusing the same grid-template-columns + gap so the tracks line up.
   Vertical position (just under the taller of those two columns) is set at
   runtime by adjustWideCenterPosition() in main.js. */
.wide-center{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:3.5rem;}
.wide-center-inner{padding-top:4.5em;grid-column:2 / span 2;}
@media (max-width:1000px){
  .wide-center{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:2rem;}
  .wide-center-inner{grid-column:1 / -1;}
}
@media (max-width:600px){.wide-center{grid-template-columns:1fr;}}
.center{text-align:center;}

/* Policy pages: narrow readable column, headings spaced from the text above */
.policy-wrap{max-width:760px;margin:0 auto;}
.policy-wrap h3{margin-top:2em;}

/* About: content narrowed to 2/3 width + centred; heading on top;
   photo floats left with a single wrapped text column beside it;
   below the photo, text splits into 2 equal columns */
.about-wrap{max-width:66.6667%;margin:0 auto;}
.about-h1{text-align:center;margin-bottom:0.8em;}
.about-photo{float:left;width:270px;max-width:100%;margin:0 30px 20px 0;}
.about-lead p:not(:last-child){margin-bottom:0;}
.about-star{
  display:block;overflow:hidden;text-align:center;
  color:var(--pink);line-height:1;
  margin:calc(0.5em + var(--about-extra-gap, 0px) * 0.5) 0;
  font-size:clamp(14px, 1.4vw, 24px);
}
.about-cols{clear:left;column-count:2;column-gap:60px;}
.about-cols p{break-inside:avoid;}
@media (max-width:900px){
  .about-wrap{max-width:100%;}
  .about-photo{float:none;width:100%;max-width:360px;margin:0 auto 1.5rem;}
  .about-cols{column-count:1;}
}

/* Contact: left content | form (633:485 measured) */
.contact-grid{display:grid;grid-template-columns:633fr 485fr;gap:60px;align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.small-note{font-size:14.4px;}

/* Form */
.form{display:grid;gap:1.4rem;}
.field label{
  display:block;font-weight:300;font-size:18px;color:var(--text);
  margin-bottom:.4rem;
}
.field-required{font-weight:400;font-size:15.5px;color:#8a8a8a;}
.field input,.field textarea{
  width:100%;font-family:'Poppins',sans-serif;font-size:17.5px;
  padding:.85rem 1.1rem;border:1px solid var(--text);
  background:transparent;color:var(--text);border-radius:26px;
  transition:border-color .15s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#9a9a9a;opacity:1;}
.field textarea{min-height:400px;border-radius:24px;resize:vertical;}
.field input:hover,.field textarea:hover,
.field input:focus,.field textarea:focus{border-color:var(--indigo);outline:none;}
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.4rem;}
.field-label-row label{margin-bottom:0;}
.field-counter{font-size:14.4px;color:#8a8a8a;}
.field--hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* Submit button sits close under the fields when the status line is empty;
   once it holds real text (after a submit attempt), drop the button below
   it instead of overlapping. */
#contact-form-status:empty + .form-submit-row{margin-top:-3.5rem;}
#contact-form-status:not(:empty) + .form-submit-row{margin-top:.6rem;}
.submit-btn{
  display:inline-block;background:#111;color:#fff;
  text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:.03em;
  padding:14px 32px;border:0;border-radius:999px;cursor:pointer;
  transition:background-color .2s ease;
}
.submit-btn:hover{background:var(--indigo);}
#contact-form-status{min-height:1.2em;}
#contact-form-status.is-error{color:#c0245c;}
#contact-form-status.is-success{color:var(--indigo);font-weight:600;}

/* Floating "Book Free Consultation" button (opens Calendly popup) */
.book-fab{
  position:fixed;right:24px;bottom:24px;z-index:999;
  display:inline-flex;align-items:center;
  background:var(--nav);color:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:999px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:background-color .2s ease,color .2s ease;
}
.book-fab:hover{background-color:#2d2a7b;color:#ef3bcd;}
@media (max-width:480px){
  .book-fab{right:16px;bottom:16px;padding:12px 20px;font-size:14.5px;}
}

/* Cookie notice bar — shown once per browser (see main.js). Pushes the
   floating book button up by its own measured height so they never overlap. */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:var(--indigo);color:#fff;
  font-size:14.5px;line-height:1.4;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;
  box-shadow:0 -4px 14px rgba(0,0,0,.2);
}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{margin:0;max-width:640px;}
.cookie-banner a{color:#fff;}
.cookie-banner a:hover{color:var(--pink);}
.cookie-banner-ok{
  background:#fff;color:var(--indigo);border:0;border-radius:999px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  padding:9px 22px;cursor:pointer;flex-shrink:0;
  transition:background-color .2s ease,color .2s ease;
}
.cookie-banner-ok:hover{background:var(--pink);color:#fff;}
body.has-cookie-banner .book-fab{bottom:calc(24px + var(--cookie-banner-h, 0px));}
@media (max-width:480px){
  .cookie-banner{padding:12px 16px;font-size:13.5px;}
  body.has-cookie-banner .book-fab{bottom:calc(16px + var(--cookie-banner-h, 0px));}
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--pink);
  color:var(--indigo);
  text-align:center;
  padding:20px var(--gutter) 10px;
  font-size:14.4px;
}
footer.site-footer p{max-width:1000px;margin:0 auto .8em;}
.footer-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:.6em 0 1em;flex-wrap:wrap;}
.footer-row img{height:16px;width:auto;}
.footer-row a svg{width:20px;height:20px;fill:var(--indigo);display:block;}
.footer-row a:hover svg{fill:var(--pink);}

a:focus-visible,button:focus-visible{outline:2px solid var(--nav);outline-offset:2px;}