/* ========== Base / Reset ========== */
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  img{display:block;max-width:100%;height:auto}
  a{text-decoration:none;color:inherit}
  button,input,select,textarea{font:inherit}

  /* ========== Theme Tokens (tuned to your comps) ========== */
  :root{
    --yellow:#ffea59;             /* pattern yellow (adjust if your asset differs) */
    --yellow-deep:#ffd400;        /* pill bg & accents */
    --black:#0b0b0b;              /* headline / CTA fill */
    --ink:#111;                   /* dark text */
    --ink-2:#4b4f54;              /* gray section text */
    --ink-3:#777c82;              /* lighter gray */
    --white:#fff;
    --pill-radius:4px;
    --card-radius:4px;
    --rule:#d6d8db;               /* section rule */
    --container:1500px;
    --shadow:0 10px 28px rgba(0,0,0,.18);
  }

@font-face {
    font-family: 'hurufatfont';
    src: url('/assets/hurufatfont_-_masif-regular-webfont.woff2') format('woff2'),
         url('/assets/hurufatfont_-_masif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hurufatfont-bold';
    src: url('/assets/hurufatfont_-_masif-bold-webfont.woff2') format('woff2'),
         url('/assets/hurufatfont_-_masif-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

  body{
    font-family: 'hurufatfont', Arial, sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.2;
  }

  .container{width:min(100%,var(--container));margin-inline:auto;padding:0; max-width: 94%;}

  /* ========== Top Nav (logo + pill nav) ========== */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
  .brand-logo{height:70px; width:auto}
  .nav{display:flex;gap:12px;flex-wrap:wrap; align-items: center;}
  .pill{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.2rem 1rem 0;border-radius:var(--pill-radius);
    background:var(--yellow-deep); color:#111;
    font-weight:400; letter-spacing:.15px;
    transition:transform .05s,filter .15s;
    max-height: 24px;
  }
  .pill--strong{
    max-height: 34px;
    padding:.2rem 1rem 0;font-size: 1.3rem;background:#000;color:var(--yellow-deep);    
    font-family: 'hurufatfont-bold';
}
  .pill:active{transform:translateY(1px)}
  .pill:hover{filter:brightness(1.05)}

  /* ========== HERO ========== */
  .hero{
    position:relative; overflow:hidden;
    background: var(--yellow) url('/assets/background.png') center/900px repeat; /* your doodle pattern */
  }
  .hero-inner{position:relative; z-index:2; padding:40px 0 100px}
  .hero h1{
    font-size: clamp(2.4rem, 1.6rem + 3.6vw, 5rem);
    font-family: 'hurufatfont-bold', Arial, sans-serif;
    line-height:1.05; margin:14px 0;
    color:#000;
  }
  .hero .sub{
    font-size:clamp(1rem, .95rem + .3vw, 1.25rem);
    color:#111;
    font-family: 'hurufatfont', Arial, sans-serif;
  }
  .hero .sub b{
    font-family: 'hurufatfont-bold', Arial, sans-serif;}
  .hero-cta{margin:22px 0 26px}
  .btn-black{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.75rem 1rem 0.5rem;border-radius:5px;background:#000;color:var(--yellow-deep);
    
    font-family: 'hurufatfont-bold', Arial, sans-serif;
    transition:transform .05s,filter .15s;
  }
  .btn-black:active{transform:translateY(1px)}
  .btn-black:hover{filter:brightness(1.05)}

  /* hero “store photo” card (lower-left) */
  .hero-photo{
    width:min(520px,100%); overflow:hidden;
  }

  /* foreground hands/wings (absolute, bottom-right cluster) */
  .hero-hands{
    position:absolute; inset:auto 0 0 auto; right:0; bottom:0;
    display:flex; align-items:flex-end; gap:clamp(10px,2vw,24px);
    padding-right:0;
    z-index:1;
    max-width: 900px;
  }
  .hand{max-height: 700px; width:100%; filter:drop-shadow(0 12px 30px rgba(0,0,0,.25))}
  .hero-fade{position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 90%); z-index:1}

  /* ========== Section Header (big gray title + rule) ========== */
  .section-head{
    text-align:center; margin:50px auto 15px; padding-top:18px;
  }
  .section-head h2{
    font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
    color:#6c7278; 
    font-family: 'hurufatfont-bold', Arial, sans-serif;
    text-transform:uppercase;
    margin: 10px 0 0 0;
  }
  .section-head .subline{
    margin-top:6px; color:#272525; 
    font-size: 1.6rem;
    font-family: 'hurufatfont', Arial, sans-serif;
  }
  .section-rule{height:1px; background:var(--rule); margin:14px auto 24px; width:100%}

  /* ========== Two-Column Content Blocks ========== */
  .block{margin:18px 0 48px}
  .block-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center}
  .block.reverse .block-inner{grid-template-columns:.8fr 1.2fr}
  .block-media{
    background: var(--yellow) url('/assets/background.png') center/860px repeat;
    border-radius:5px; padding:18px;
    max-width: 780px;
  }
  .block-copy h3{
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
    color:#6c7278; 
    font-family: 'hurufatfont-bold', Arial, sans-serif; margin:0 0 10px;
  }
  .block-copy p{color:var(--ink-2); margin:0 0 12px}
  .btn-gray{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.75rem 1.5rem 0.65rem;border-radius:5px;background:#8d9297;color:#fff;
    font-weight:400;border:0;
    text-transform: uppercase;
  }
  .linksblock {
    font-size: 0.8rem;
    margin: 0;
  }
  .linksblock ul {
    padding: 0;
    margin: 0 0 0 1rem;
  }
  .linksblock li {
    padding: 0 0 0.5rem;
  }
   .linksblock a {
    text-decoration: underline;
   }
  .block-inner {
    grid-template-columns: 1.0fr 1.0fr;
  }

  /* ========== Quick Info Form ========== */
  .form-wrap{margin:20px auto; display: block}
  .form-panel{
    background: var(--yellow) url('/assets/background.png') center/900px repeat;
    border-radius:5px; padding:24px;
  }
  .form-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:18px;
    max-width:1200px; margin:0 auto;
    background: rgba(255,255,255,.72);
     padding:7px 20px;
  }
  .field input{
    width:100%; border:0; outline:0; background:transparent;
    color:#111;
  }
  .form-note{max-width:1160px;margin:10px auto 0; color:#111; text-align: left;
    font-family: 'hurufatfont', Arial, sans-serif;}
  .form-actions{display:flex;justify-content:center;margin:16px 0 6px}
  .btn-next{comp:var(--yellow-deep)}
  .btn-next{cursor: pointer;text-transform: uppercase;background-color:#000;color:var(--yellow-deep);border-radius:5px;border: 0;padding:.85rem 2.2rem;
    font-family: 'hurufatfont-bold', Arial, sans-serif;}
  .btn-next:active{transform:translateY(1px)}

  /* ========== Our History (logo right) ========== */
  .history-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
  .pub-btn{background:#8d9297;color:#fff;border:2px solid #6c7177;border-radius:12px;padding:.7rem 1rem;
    font-family: 'hurufatfont-bold', Arial, sans-serif;display:inline-flex}
    .history-grid .block-media {
      background: none;
    }

  /* ========== Footer ========== */
  footer{margin:36px 0 0}
  .footer-nav{
    display:flex;justify-content:center;gap:12px;margin:50px auto 0px;
    border-top: 1px solid var(--rule);
    padding: 3rem 0;
    align-items: center;
  }
  .footer-banner{
    background: var(--yellow) url('/assets/background.png') center/900px repeat; padding:20px 0; position:relative;
  }
  .footer-banner .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .footer-logo{height:70px}
  .footer-copy{text-align:center;color:#6c7278;padding:15px 0 13px}

  #menuBoard {
    border: 13px solid #272525;
  }
  #quick-info .form-panel{
    text-align: center;
  }
  .tmsymbol {
    font-family: 'hurufatfont', Arial, sans-serif;
    font-weight: 400;
    font-size: 55%;
  }
.zoomable-image {
  max-width: none !important;
}
/* ---------- QUICK INFO FORM LAYOUT & RESET ---------- */
#quick-info *, #quick-info *::before, #quick-info *::after { box-sizing: border-box; }

#quick-info .form-panel{
  margin: 0 auto;
  /* readable over the patterned yellow bg */
    background: var(--yellow) url(/assets/background.png) center / 860px repeat;
    border-radius: 5px;
    padding: 18px;
  backdrop-filter: saturate(1.1);
}

#quick-info .section-head h2{ margin: 0 0 6px; }
#quick-info .section-head .subline{ opacity:.85; }

/* Two-column grid that collapses on small screens */
#quick-info .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}

/* Make any item go full width if you already applied inline grid-column OR just add .full */
#quick-info .form-grid .field[style*="grid-column"],
#quick-info .form-grid .field.full{
  grid-column: 1 / -1;
}

/* ---------- INPUTS, SELECTS, TEXTAREAS ---------- */
#quick-info .field{ display:block; }

#quick-info .field input,
#quick-info .field select,
#quick-info .field textarea{
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 16px;
  line-height: 1.25;
  outline: none;
  text-align: left;               /* prevents weird centered text from theme defaults */
}
/* Default disabled option styling */
#quick-info select:invalid,
#quick-info select option[disabled] {
  color: #6b7280;
}

/* Ensure real selections look normal (black text) */
#quick-info select option {
  color: #111;
}
/* Focus state */
#quick-info .field input:focus,
#quick-info .field select:focus,
#quick-info .field textarea:focus{
  border-color: #111;
}

/* Textarea sizing */
#quick-info textarea{ min-height: 140px; resize: vertical; }

/* Placeholder contrast */
#quick-info ::placeholder{ color: #6b7280; } /* slate-500-ish */

/* Selects: full width + native arrow replacement so themes don’t squash them */
#quick-info select{
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;           /* room for the arrow */
}

/* Fix Safari/Chrome autofill yellow washout */
#quick-info input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #111 !important;
}

/* ---------- CONSENT ROW ---------- */
#quick-info .form-grid .field input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 4px 8px 0 0;
}

#quick-info .form-grid .field span{
  display: inline-block;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

/* Flex the consent line so checkbox and text align */
#quick-info .form-grid .field[style*="display:flex"],
#quick-info .consent-row{
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
}

/* ---------- FOOTER / BUTTON ---------- */
#quick-info .form-note{
  font-size: 12px;
  color: #333;
  margin-top: 8px;
}

#quick-info .form-actions{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

#quick-info .btn-next{
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  background: #111;
  color: #fff;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease;
}
#quick-info .btn-next:hover{ opacity: .92; }
#quick-info .btn-next:active{ transform: translateY(1px); }


  /* ===== SCOPED ONLY TO .fe-fdd ===== */
  .fe-fdd { max-width: 1300px; margin: 25px auto 40px; padding: 0 20px; text-align:center; font: inherit; }
  .fe-fdd__title { margin: 0 0 5px; text-align: center; font-family: 'hurufatfont-bold'; line-height: 1.25;font-size: 1.2rem;color: #6c7278; }
  .fe-fdd__note { font-style: italic; font-family: 'hurufatfont-bold'; }
  .fe-fdd__center { text-align: center; }
  .fe-fdd__lead { margin: 0; font-size: 0.85rem;}
  .fe-fdd__para { margin: 10px 0; font-size: 0.85rem;}
  .fe-fdd__label { font-family: 'hurufatfont-bold'; }
  .fe-fdd__dot { padding: 0 6px; }
  .fe-fdd__subhead { margin: 14px 0 6px; font-family: 'hurufatfont-bold'; }
  .fe-fdd__tiers { margin: 0; font-size: 0.85rem;}
  .fe-fdd__sep { padding: 0 10px; display: inline-block; }
  .fe-fdd__rule { border: 0;  margin: 18px 0; }
  #fe-fdd-title-2 {
    margin-top: 20px;
  }
  /* Responsive tweaks inside scope */
  @media (max-width: 720px){
    .fe-fdd { margin-bottom: 40px; }
  }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  #quick-info .form-grid{ grid-template-columns: 1fr; }
  #quick-info .form-actions{ justify-content: stretch; }
  #quick-info .btn-next{ width: 100%; }
  #quick-info .field {
    margin-bottom: 10px;
  }
  .form-grid {
    padding: 0 20px;
  }
  .fe-fdd {
    padding: 0;
  }
}


/* ========== Responsive ========== */
@media (max-width:1600px){
  .hero-hands{
    width: 50%;
  }
}
@media (max-width:1080px){
    .hero-hands {
        width: 40%;
    }
}
@media (max-width:1020px){
  .block-inner, .block.reverse .block-inner{grid-template-columns:1fr;gap:22px}
  .history-grid{grid-template-columns:1fr}
  .linksblock .block-inner {
    display: block;
  }
}
@media (max-width:950px){
    .hero-hands {
        width: 30%;
    }
}
@media (max-width:801px){
  .hero-photo{max-width:420px}
}
@media (max-width:700px){
  .nav, .footer-nav{
    display: block;
    text-align: center;
  }
  .pill--strong {
    display: block;
    margin-top: 5px;
  }
  .form-grid{grid-template-columns:1fr}
  .topbar {
    display: block;
  }
  .brand-logo {
    height: 60px;
    margin: auto auto 10px;
  }
  .hero-inner {
      padding-bottom: 340px;
      text-align: center;
  }
  .hero-photo {
      margin: auto;
      max-width: none;
  }
  .hero-hands {
    width: 100%;
  }
  .hero-hands .hand {
    max-width: 400px;
    margin: auto;
  }
}
@media (max-width:551px){
  img {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .hero-inner {
    padding-top: 10px;
    text-align: center;
  }
  .hero h1 {
    font-size: 1.75rem;
  }
  .hero .sub {
    font-weight: 400;
  }
  .hero-photo {
    max-width: none;
  }
  .section-head {
    margin-top: 25px;
  }
  .section-head h2 {
    font-size: 1.7rem;
  }
  .section-head .subline {
    font-family: 'hurufatfont', Arial, sans-serif;
  }
  .block-copy, .history-grid div {
    text-align: center;
  }
  .footer-banner .btn-black {display: none;}
  .linksblock li {
    overflow:hidden; 
  }
  .section-head .subline {
    font-size: 1.2rem;
  }
}
@media (max-width:400px){
  .hero-hands .hand {
    max-width: 300px;
  }
  .hero-inner {
    padding-bottom: 250px;
  }
  .pill {
    margin-top: 3px;
  }
}


@media (min-width:551px){
  #menu .block-inner,
  #branding .block-inner,
  #trends .block-inner {
    grid-template-columns: 1.4fr 1.0fr;
  }
}