/* ============================================================
   LAKELAND GRAPHICS — page-specific styles
   About · Request a Quote · FAQ
   Layered on top of styles.css
   ============================================================ */

/* ---------- shared inner-page bits ---------- */
.prose p{font-size:17px;line-height:1.62;color:var(--wg700);}
.prose p + p{margin-top:16px;}
.prose b,.prose strong{color:var(--ink);font-weight:600;}

.badges{display:flex;flex-wrap:wrap;gap:10px;}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--wg700);background:var(--white);
  border:1px solid var(--wg300);border-radius:100px;padding:9px 15px;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent);}
.badge--c::before{background:var(--lg-cyan);}
.badge--m::before{background:var(--lg-magenta);}
.badge--g::before{background:var(--lg-green);}

/* section number tag used down the left of magazine sections */
.secmark{
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--wg500);display:flex;align-items:center;gap:9px;
}
.secmark::before{content:"";width:26px;height:2px;background:var(--accent);flex:none;}

/* ============================================================
   ABOUT PAGE
   Three layout variants driven by [data-about] on <main>.
   Base markup stays identical; CSS rearranges it.
   ============================================================ */

/* --- opening --- */
.ab-open{padding-top:clamp(30px,3.5vw,48px);padding-bottom:clamp(30px,4vw,48px);}
.ab-open__grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center;}
.ab-open h1{font-size:clamp(42px,6.2vw,74px);margin-top:16px;}
.ab-open h1 .accentword{color:var(--accent);}
.ab-open .lead{margin-top:22px;max-width:520px;}
.ab-open .prose{margin-top:20px;max-width:520px;}
.ab-open__badges{margin-top:28px;}
.ab-open__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;}
.ab-open__visual{position:relative;}
.ab-open__visual .shot{height:100%;min-height:clamp(260px,28vw,360px);}

/* --- feature row (craft / who we serve) --- */
.ab-row{padding-block:clamp(38px,5vw,64px);}
.ab-row__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.ab-row__copy{max-width:520px;}
.ab-row h2{margin-top:14px;}
.ab-row .prose{margin-top:18px;}
.ab-row__visual{position:relative;}
.ab-row__visual .shot{min-height:clamp(240px,25vw,320px);height:100%;}

/* markets chips inside "who we serve" */
.markets{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.market{
  font-family:var(--mono);font-size:12px;letter-spacing:0.04em;
  color:var(--wg700);border:1px solid var(--wg300);border-radius:var(--radius);
  padding:10px 14px;background:var(--white);display:inline-flex;align-items:center;gap:9px;
  transition:border-color .18s ease,color .18s ease;
}
.market:hover{border-color:var(--accent);color:var(--ink);}
.market i{width:7px;height:7px;border-radius:1px;flex:none;background:var(--pc,var(--accent));}

/* pull statement */
.ab-pull{padding-block:clamp(26px,3.5vw,44px);}
.ab-pull__inner{max-width:940px;margin-inline:auto;text-align:center;}
.ab-pull blockquote{
  font-family:var(--display);font-weight:700;letter-spacing:-0.01em;line-height:1.06;
  font-size:clamp(30px,4.4vw,50px);color:var(--ink);text-wrap:balance;
}
.ab-pull blockquote .accentword{color:var(--accent);}
.ab-pull__by{margin-top:20px;}

/* -------- VARIANT A: EDITORIAL (default) -------- */
[data-about="editorial"] .ab-open__grid{grid-template-columns:1.06fr 0.94fr;}
[data-about="editorial"] .ab-row:nth-of-type(even) .ab-row__visual{order:-1;}

/* -------- VARIANT B: CENTERED / MINIMAL -------- */
[data-about="centered"] .ab-open__grid{
  grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto;
}
[data-about="centered"] .ab-open .lead,
[data-about="centered"] .ab-open .prose{margin-inline:auto;}
[data-about="centered"] .ab-open__badges,
[data-about="centered"] .ab-open__cta{justify-content:center;}
[data-about="centered"] .ab-open .eyebrow{justify-content:center;}
[data-about="centered"] .ab-open__visual{width:100%;margin-top:8px;}
[data-about="centered"] .ab-open__visual .shot{min-height:clamp(300px,34vw,420px);aspect-ratio:21/9;}
[data-about="centered"] .ab-row__grid{
  grid-template-columns:1fr;max-width:720px;margin-inline:auto;text-align:center;justify-items:center;
}
[data-about="centered"] .ab-row .secmark{justify-content:center;}
[data-about="centered"] .ab-row .prose{margin-inline:auto;}
[data-about="centered"] .ab-row .markets{justify-content:center;}
[data-about="centered"] .ab-row__visual{order:-1;width:100%;}
[data-about="centered"] .ab-row__visual .shot{aspect-ratio:21/9;min-height:0;}

/* -------- VARIANT C: STACKED / INDEXED -------- */
[data-about="stacked"] .ab-open__grid{grid-template-columns:1fr;max-width:900px;}
[data-about="stacked"] .ab-open__visual{margin-top:10px;}
[data-about="stacked"] .ab-open__visual .shot{aspect-ratio:21/8;min-height:0;}
[data-about="stacked"] .ab-row__grid{grid-template-columns:220px 1fr;gap:clamp(28px,4vw,56px);align-items:start;}
[data-about="stacked"] .ab-row__index{
  position:sticky;top:120px;display:flex;flex-direction:column;gap:14px;
}
[data-about="stacked"] .ab-row__index .n{
  font-family:var(--display);font-weight:800;font-size:64px;line-height:0.9;color:var(--wg300);
}
[data-about="stacked"] .ab-row__visual{margin-top:28px;grid-column:1 / -1;}
[data-about="stacked"] .ab-row__visual .shot{aspect-ratio:21/8;min-height:0;}
/* hide the index column when not in stacked mode */
.ab-row__index{display:none;}
[data-about="stacked"] .ab-row__index{display:flex;}

/* ============================================================
   REQUEST A QUOTE
   ============================================================ */
.quote-hero{padding-top:clamp(40px,5vw,60px);padding-bottom:clamp(24px,3vw,36px);}
.quote-hero h1{font-size:clamp(40px,6vw,68px);margin-top:16px;}
.quote-hero h1 .accentword{color:var(--accent);}
.quote-hero .lead{margin-top:18px;max-width:560px;}

.quote-grid{
  display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,4vw,64px);
  align-items:start;padding-bottom:clamp(64px,8vw,110px);
}

/* --- form --- */
.qform{background:var(--white);}
.qform__step{
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--wg500);display:flex;align-items:center;gap:9px;margin-bottom:22px;
}
.qform__step::before{content:"";width:26px;height:2px;background:var(--accent);}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field > label{
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;
}
.field .opt{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.04em;text-transform:uppercase;color:var(--wg500);}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid var(--wg300);border-radius:var(--radius);
  padding:13px 15px;width:100%;transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:104px;line-height:1.55;}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%234B4945' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:44px;}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.field input::placeholder,.field textarea::placeholder{color:var(--wg500);}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--lg-magenta);}
.field__err{font-size:12.5px;color:var(--lg-magenta);font-weight:500;display:none;}
.field--invalid .field__err{display:block;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* --- upload dropzones --- */
.uploads{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px;}
.drop{
  position:relative;border:1.5px dashed var(--wg300);border-radius:var(--radius);
  background:var(--wg100);padding:22px 18px;text-align:center;cursor:pointer;
  transition:border-color .16s ease, background .16s ease;display:flex;flex-direction:column;
  align-items:center;gap:10px;min-height:150px;justify-content:center;
}
.drop:hover{border-color:var(--accent);background:var(--accent-soft);}
.drop.is-drag{border-color:var(--accent);background:var(--accent-soft);}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.drop__ico{width:30px;height:30px;color:var(--wg500);}
.drop:hover .drop__ico,.drop.is-drag .drop__ico{color:var(--accent);}
.drop__t{font-size:14.5px;font-weight:600;color:var(--ink);}
.drop__h{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--wg500);line-height:1.5;}
.drop__tag{
  position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;letter-spacing:0.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:3px;background:var(--white);color:var(--wg700);border:1px solid var(--wg300);
}
.drop__tag.req{color:var(--accent);border-color:var(--accent);}

/* preview thumbs */
.previews{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-top:4px;}
.thumb{position:relative;width:64px;height:64px;border-radius:4px;overflow:hidden;border:1px solid var(--wg300);background:var(--wg200);flex:none;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb__doc{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:0.04em;color:var(--wg700);text-transform:uppercase;padding:4px;text-align:center;line-height:1.3;}
.thumb__x{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(15,15,18,.78);color:#fff;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.thumb__x:hover{background:var(--lg-magenta);}

.qform__submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px;}
.qform__note{font-family:var(--mono);font-size:12px;color:var(--wg500);letter-spacing:0.03em;}

/* --- sidebar --- */
.qside{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px;}
.qcard{border:1px solid var(--wg300);border-radius:var(--radius);padding:26px 26px;background:var(--white);}
.qcard--dark{background:var(--ink);color:#C9C8CC;border-color:var(--ink);}
.qcard h4{font-size:19px;color:var(--ink);margin-bottom:14px;}
.qcard--dark h4{color:#fff;}
.qcard p{font-size:14.5px;color:var(--wg700);line-height:1.6;}
.qcard--dark p{color:#9C9BA1;}
.qcontact{display:flex;flex-direction:column;gap:14px;margin-top:4px;}
.qcontact a{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:15px;color:#fff;}
.qcontact a:hover{color:var(--lg-cyan);}
.qcontact svg{width:18px;height:18px;color:var(--lg-cyan);flex:none;}
.qcontact .big{font-size:22px;font-weight:600;letter-spacing:0.01em;}
.qsteps{list-style:none;display:flex;flex-direction:column;gap:16px;}
.qsteps li{display:flex;gap:13px;font-size:14.5px;color:var(--wg700);line-height:1.5;}
.qsteps .qn{
  font-family:var(--display);font-weight:800;font-size:15px;flex:none;
  width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.qsteps b{color:var(--ink);font-weight:600;}

/* --- success state --- */
.qsuccess{display:none;}
.qform.is-sent .qform__body{display:none;}
.qform.is-sent .qsuccess{display:block;animation:lg-rise .5s cubic-bezier(.2,.7,.2,1) both;}
.qsuccess__mark{
  width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;
}
.qsuccess__mark svg{width:32px;height:32px;}
.qsuccess h2{font-size:clamp(30px,4vw,42px);color:var(--ink);}
.qsuccess p{font-size:17px;color:var(--wg700);margin-top:14px;max-width:440px;line-height:1.6;}
.qsuccess .recap{
  margin-top:26px;border:1px solid var(--wg300);border-radius:var(--radius);
  background:var(--wg100);padding:20px 22px;max-width:440px;
}
.qsuccess .recap h5{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--wg500);margin-bottom:12px;font-weight:500;}
.qsuccess .recap dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14.5px;}
.qsuccess .recap dt{font-family:var(--mono);font-size:12px;letter-spacing:0.03em;text-transform:uppercase;color:var(--wg500);}
.qsuccess .recap dd{color:var(--ink);}
.qsuccess__act{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{
  display:grid;grid-template-columns:0.62fr 1fr;gap:clamp(36px,5vw,80px);
  align-items:start;padding-bottom:clamp(64px,8vw,110px);
}
.faq-aside{position:sticky;top:120px;}
.faq-aside h2{margin-top:14px;}
.faq-aside .lead{margin-top:16px;max-width:360px;}
.faq-aside__cta{margin-top:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.faq-aside__phone{font-family:var(--mono);font-size:14px;color:var(--wg700);letter-spacing:0.03em;}
.faq-aside__phone b{color:var(--ink);font-size:18px;font-weight:600;}

.faq-list{border-top:1px solid var(--wg300);}
.faq-item{border-bottom:1px solid var(--wg300);}
.faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:26px 4px;text-align:left;font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,26px);color:var(--ink);line-height:1.14;letter-spacing:-0.01em;
}
.faq-q:hover{color:var(--accent);}
.faq-sign{
  position:relative;flex:none;width:26px;height:26px;margin-top:4px;
}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--accent);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.faq-sign::before{width:16px;height:2.5px;}
.faq-sign::after{width:2.5px;height:16px;}
.faq-item.open .faq-sign::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq-a__inner{padding:0 44px 28px 4px;}
.faq-a__inner p{font-size:16px;line-height:1.62;color:var(--wg700);}
.faq-a__inner p + p{margin-top:12px;}
.faq-a__inner b{color:var(--ink);font-weight:600;}
.faq-item.open .faq-a{max-height:460px;}

@media (max-width:900px){
  .quote-grid{grid-template-columns:1fr;}
  .qside{position:static;flex-direction:row;flex-wrap:wrap;}
  .qside > *{flex:1 1 260px;}
  .faq-grid{grid-template-columns:1fr;}
  .faq-aside{position:static;}
  [data-about="stacked"] .ab-row__grid{grid-template-columns:1fr;}
  [data-about="stacked"] .ab-row__index{position:static;flex-direction:row;align-items:baseline;}
}
@media (max-width:600px){
  .field-row,.uploads{grid-template-columns:1fr;}
  .ab-row__grid{grid-template-columns:1fr !important;}
  .ab-open__grid{grid-template-columns:1fr !important;}
}

/* quote form: honeypot + error message */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formerr{margin:0 0 16px;padding:13px 16px;border:1px solid #e0b4b4;background:#fdf3f3;border-radius:var(--radius);font-size:14.5px;line-height:1.5;color:#8a2b2b;}