/* May Lawn & Home Care — demonstration rebuild, Trueline Web.
   ARCHETYPE H: card stack. NO GRID ANYWHERE. Every element is a full-width
   card in a single column at every breakpoint.

   Chosen deliberately. maylawn.com is XHTML 1.0 Transitional with no viewport
   meta tag and a fixed width="820" layout, so a phone renders the desktop page
   and crops it. The structural answer is a page that has only ever had one
   column, so there is nothing left to break when the screen narrows. The
   desktop view is simply the same stack, centred, with more air. */

:root{
  --ink:#1A2117;
  --ink-2:#4E5A48;
  --bark:#1F2A1C;
  --bark-2:#141C12;
  --moss:#6E8B4E;
  --moss-l:#A8C285;
  --lime:#C9DE4E;
  --paper:#FFFDF8;
  --card:#fff;
  --board:#EDEAE0;
  --line:#DAD5C7;
  --rust:#A8532B;
  --sans:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --disp:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--board);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  padding-bottom:60px;
}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:6px}

/* ---- THE STACK. One column. Always. ---- */
.stack{
  max-width:620px;      /* a comfortable reading column, not a desktop canvas */
  margin:0 auto;
  padding:14px 14px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* every block is a card, full width of the column, no exceptions */
.card{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:26px 24px;
  margin:0;
}

/* ---- identity ---- */
.card-id{
  background:var(--bark);color:#F0EEE4;border-color:var(--bark-2);
  text-align:center;padding:30px 24px 26px;
}
.tree{color:var(--lime);display:block;margin:0 auto 10px}
.id-name{
  margin:0;font-family:var(--disp);font-weight:600;
  font-size:2.05rem;line-height:1.05;letter-spacing:-.018em;color:var(--lime);
}
.id-name span{display:block;font-size:1.25rem;color:#DCE6C9;font-weight:400;margin-top:2px}
.id-sub{margin:12px 0 0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#9BB07E;font-weight:700}

/* ---- lede ---- */
.card-lede h1{
  margin:0 0 14px;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.75rem,6vw,2.3rem);line-height:1.1;letter-spacing:-.02em;
}
.card-lede p{margin:0 0 12px;color:var(--ink-2)}
.serving{margin:16px 0 0 !important;padding-top:14px;border-top:1px solid var(--line);font-size:.97rem}
.serving b{color:var(--ink)}

/* ---- call cards: whole card is the tap target ---- */
.card-call{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;text-align:center;
  padding:20px 20px 18px;
  border:0;
}
.call-maint{background:var(--moss);color:#fff}
.call-land{background:var(--rust);color:#fff}
.card-call:hover{filter:brightness(1.07)}
.call-k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.88}
.call-n{font-size:2rem;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.call-x{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:3px}

/* ---- section heading card ---- */
.card-h{background:transparent;border:0;padding:16px 4px 0}
.card-h h2{
  margin:0;font-family:var(--disp);font-weight:600;
  font-size:1.55rem;letter-spacing:-.012em;
}

/* ---- service cards ---- */
.card-svc{padding:22px 24px}
.svc-n{
  margin:0 0 4px;font-size:.72rem;letter-spacing:.2em;font-weight:800;
  color:var(--moss);font-variant-numeric:tabular-nums;
}
.card-svc h3{margin:0 0 8px;font-family:var(--disp);font-weight:600;font-size:1.32rem;letter-spacing:-.01em}
.card-svc p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ---- gallery: still one column. no masonry, no grid. ---- */
.card-gallery h2{margin:0 0 8px;font-family:var(--disp);font-weight:600;font-size:1.5rem}
.g-note{margin:0 0 20px;font-size:.9rem;color:#7C8676}
.ph{margin:0 0 16px}
.ph:last-child{margin-bottom:0}
.ph-box{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;border-radius:5px;
  border:2px dashed #C2BBA8;
  background:repeating-linear-gradient(135deg,#EFECE3 0 13px,#E7E3D8 13px 26px);
}
.ph-box span{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:#8B8474}
.ph figcaption{margin-top:7px;font-size:.84rem;color:#7C8676}

/* ---- contact ---- */
.card-contact{background:var(--bark);color:#E4E7DA;border-color:var(--bark-2)}
.card-contact h2{margin:0 0 10px;font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--lime)}
.card-contact > p{margin:0 0 20px;color:#B3BFA2;font-size:.96rem}
.line{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.14);
}
.line:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.line-k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#9BB07E}
.line a{color:#fff;font-weight:700;font-size:1.12rem;text-decoration:none;border-bottom:1px solid rgba(201,222,78,.45);align-self:flex-start}
.line a:hover{color:var(--lime)}
.line-plain span:not(.line-k){color:#B3BFA2;font-size:.98rem}

/* ---- form ---- */
.card-form h2{margin:0 0 16px;font-family:var(--disp);font-weight:600;font-size:1.5rem}
.card-form form{display:flex;flex-direction:column;gap:13px}
.card-form label{display:flex;flex-direction:column;gap:5px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.card-form input,.card-form select,.card-form textarea{
  font:inherit;font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--ink);
  padding:12px;border:1px solid #C7C0AE;border-radius:4px;background:var(--paper);
}
.card-form textarea{resize:vertical}
.card-form input:focus,.card-form select:focus,.card-form textarea:focus{outline:2px solid var(--moss);outline-offset:1px;border-color:var(--moss)}
.card-form button{
  font:inherit;font-size:1.08rem;font-weight:700;
  background:var(--moss);color:#fff;border:0;border-radius:4px;
  padding:15px 20px;cursor:pointer;width:100%;
}
.card-form button:hover{background:#5d7742}

/* ---- footer ---- */
.card-foot{background:var(--bark-2);color:#9DAA8C;border-color:var(--bark-2);font-size:.9rem}
.card-foot p{margin:0 0 6px}
.card-foot b{color:#DCE6C9}
.foot-brand{font-family:var(--disp);font-size:1.18rem;color:#fff}
.demo-mark{margin-top:14px !important;font-size:.74rem;color:#6E7C60}

/* ---- persistent call bar on phones ---- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--rust);color:#fff;text-decoration:none;
  text-align:center;padding:16px 12px;font-weight:800;font-size:1.04rem;
  box-shadow:0 -3px 14px rgba(0,0,0,.22);
}
.callbar:hover{background:#934825}

/* Desktop is the SAME stack with more air — nothing reflows into columns. */
@media (min-width:700px){
  .stack{padding:26px 14px 34px;gap:16px}
  .card{padding:30px 32px}
  .card-id{padding:36px 32px 30px}
  .id-name{font-size:2.4rem}
  .call-n{font-size:2.25rem}
  .callbar{display:none}
  body{padding-bottom:0}
}

@media (max-width:400px){
  .card{padding:20px 17px}
  .call-n{font-size:1.75rem}
}