/* Mason's Yard Care: the flag layer.
   Loaded last, so it is the last word on color, display type and the few
   components the flag changes. Mason asked for red, white and blue that
   "stands out and is not boring" (11-02). The earlier version of this file
   kept red to thin rules and used a salmon accent that read pink, which is
   exactly the timid take he ruled out.

   The idea is a lettered work truck, or a team jersey: color arrives as
   large flat fields of navy and red carrying white type, never as flag
   clip art. Rough area split on the homepage is navy 40, white and cotton
   45, red 15.

   Two rules that are not preferences:
   - Red text on navy measures 2.7:1 and fails. Accents on navy are white.
   - The stripe appears in exactly three places. It is a signature, not a
     texture to sprinkle on every section. */

:root{
  /* ground */
  --navy:#0e2147;          /* dominant field: header on dark, services, footer, overlay. white on it 15.8:1 */
  --navy-2:#1f3b73;        /* raised surface on navy; links on white. white on it 10.9:1 */
  --navy-deep:#091731;     /* deepest wash, photo viewer, overlay base */
  --navy-ink:#0e2147;
  /* action */
  --red:#b22234;           /* Old Glory Red. primary actions, the stripe, one band a page. white on it 6.6:1 */
  --red-deep:#9e0b24;      /* hover and pressed; red type on white 8.3:1 */
  --brick:#b22234;         /* legacy token names kept so existing rules follow along */
  --brick-deep:#9e0b24;
  --clay:#b22234;
  --moss:#1f3b73;
  /* paper */
  --cotton:#f4f1ea;        /* warm off-white alternate sections. navy on it 14.0:1 */
  --sand:#f4f1ea;
  --sand-deep:#e8e3d8;
  --line:#dcd7cb;
  --line-soft:#eae6dd;
  --line-strong:#8a97ad;
  /* type */
  --ink:#14202e;
  --body:#3a4556;
  --muted:#5e6b7e;
  /* the signature stripe, as one reusable image */
  --stripe:linear-gradient(180deg,var(--red) 0 8px,#fff 8px 12px,var(--red) 12px 20px);
  --stripe-h:20px;
}

/* ------------------------------------------------------------------ type */
/* Big Shoulders for headings only, 28px and up. Source Sans everywhere else.
   Georgia is gone: it was never loaded as a webfont, so Android fell back to
   a different serif and the headings changed face. */
h1,.hero-title,h2,.display,.brand-name,.svc-name,.season-when{
  font-family:'Big Shoulders Display','Big Shoulders Fallback','Arial Narrow',sans-serif-condensed,sans-serif;
  font-weight:800;
  letter-spacing:0;
  font-style:normal;
}
h1,.hero-title{line-height:.92;}
h2{line-height:.98;}
h3,h4{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;}
/* Headings lead, they do not shout. 116px at 1440 was the old home H1. */
.hero .hero-title,.home-cinema .hero .hero-title{font-size:clamp(2.9rem,6.2vw,5.5rem);line-height:.9;}
h1,.hero-title{font-size:clamp(2.6rem,5vw,4.25rem);}
h2{font-size:clamp(1.9rem,3.2vw,2.9rem);}
.section-head h2,.home-cinema .section-head h2{font-size:clamp(1.9rem,3.2vw,2.9rem);}
.brand-name{font-size:1.3rem;line-height:.95;}
.brand-name span{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:4px;}
.svc-name{font-size:1.75rem;line-height:.95;}
.season-when{font-style:normal;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;color:var(--red-deep);}
/* buttons were rendering at 400 because the old font file lied about 600 */
.btn{font-weight:700;}

/* ---------------------------------------------------------------- stripe */
/* Exactly three: under the header, along the bottom of the hero, on top of
   the footer. Decorative, so it is hidden from assistive tech. */
.masthead::after,.hero::before,.foot::before{
  content:'';position:absolute;left:0;right:0;height:var(--stripe-h);
  background:var(--stripe);pointer-events:none;
}
/* The stripe lives inside the sticky header and the header reserves its
   height, so it travels with the bar on scroll and never lies over the
   notice or the hero. An earlier version hung it below the box and it
   covered the notice text. */
.masthead{position:sticky;border-bottom:0;padding-bottom:var(--stripe-h);}
.masthead::after{bottom:0;}
.hero{position:relative;}
.hero::before{bottom:0;z-index:3;}
.foot{position:relative;border-top:0;padding-top:calc(var(--s8) + var(--stripe-h));}
.foot::before{top:0;}
@media(max-width:700px){
  :root{--stripe:linear-gradient(180deg,var(--red) 0 6px,#fff 6px 9px,var(--red) 9px 15px);--stripe-h:15px;}
}

/* ---------------------------------------------------------------- header */
/* D8: the phone was invisible in the header at every width, while all three
   reference sites put a call action there. */
.topbar{display:none;}
.masthead{background:#fff;}
.masthead .wrap{gap:var(--s4);}
.hdr-call{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);
  text-decoration:none;white-space:nowrap;font-size:1.02rem;}
.hdr-call:hover{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px;}
.hdr-call svg{flex:none;color:var(--red);}
.hdr-call-icon{display:none;}
.nav .btn--primary{padding:12px 20px;}
@media(max-width:1100px){
  .hdr-call{display:none;}
  /* a 44px call target next to Menu, which is the one thing a phone visitor wants */
  .hdr-call-icon{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
    border:1px solid var(--line);border-radius:3px;color:var(--navy);margin-left:auto;}
  .hdr-call-icon svg{width:21px;height:21px;}
  .nav-toggle{margin-left:0;}
}
/* the in-menu phone row only shows where the header link cannot */
.nav-call{display:none;}
@media(max-width:1100px){
  .nav-call{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);
    text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.1rem;}
}

/* ------------------------------------------------------------------ hero */
/* A navy gradient from the left, not a flat wash over the whole frame: the
   type edge stays dark enough to read while the photo keeps its depth. */
.hero-media::after{
  background:linear-gradient(90deg,rgba(14,33,71,.92),rgba(14,33,71,.72) 38%,rgba(14,33,71,.18) 72%,rgba(14,33,71,.08));
}
.home-cinema .hero::after{
  background:linear-gradient(0deg,rgba(9,23,49,.93) 2%,rgba(9,23,49,.82) 26%,rgba(9,23,49,.34) 58%,rgba(9,23,49,.10) 82%),
             linear-gradient(90deg,rgba(14,33,71,.72),rgba(14,33,71,.28) 52%,transparent 78%);
}
/* Phones (WCAG 1.4.3). The hero is 550px tall at 760 and below and its words
   run from 10% of the way down (the Spanish tagline at 320) to the bottom, so
   the shade has to hold from there, not only along the bottom edge. White text
   needs 4.5:1 over the brightest snow pixel, which takes about 64% navy over
   pure white, so the band holds .68 and only the top edge keeps the photo
   brighter. The old shade faded to .10 at the top and the tagline measured
   1.4 to 3.8:1 over the three scenes. */
@media(max-width:760px){
  .home-cinema .hero::after{
    background:linear-gradient(0deg,rgba(9,23,49,.93) 2%,rgba(9,23,49,.82) 26%,rgba(9,23,49,.68) 48%,rgba(9,23,49,.68) 90%,rgba(9,23,49,.42) 100%),
               linear-gradient(90deg,rgba(14,33,71,.5),rgba(14,33,71,.12) 60%,transparent 85%);
  }
}
.hero .lede{color:#eef2f9;}
.hero-points{color:#dfe6f4;}
.hero-actions .btn--outline-light{background:rgba(9,23,49,.28);border-color:rgba(255,255,255,.72);}
.hero-actions .btn--outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.home-cinema .hero-inner{padding-bottom:calc(42px + var(--stripe-h));}
.hero-inner{padding-bottom:calc(46px + var(--stripe-h));}
.scene-choices button{background:#17305e;border-color:rgba(255,255,255,.4);}
.scene-choices button::after{background:linear-gradient(0deg,rgba(9,23,49,.95),transparent);}
/* On a phone the thumbnail is only 55px tall, so a shade that fades out over
   the full height left the label on a half clear photo (2.5:1 over snow).
   Solid to halfway keeps the label, which now sits in the bottom half, at
   4.5:1 or better (1.4.3); the top half still shows the scene. */
@media(max-width:760px){
  .scene-choices button::after{background:linear-gradient(0deg,rgba(9,23,49,.95) 50%,rgba(9,23,49,.3));}
}
/* 320 to 380: "Landscapes" is wider than a 88px button minus 10px padding and
   ran into the frame. 6px each side gives it room without a smaller face. */
@media(max-width:380px){.scene-choices button{padding-inline:6px;}}
.scene-choices button[aria-pressed=true]{border-color:#fff;}
.scene-choices button[aria-pressed=true] span::after{background:var(--red);}
.scene-choices button:focus-visible,.comparison-choices button:focus-visible{outline-color:#fff;}

/* --------------------------------------------------------------- buttons */
.btn--primary{background:var(--red);color:#fff;border-color:var(--red);}
.btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn--light{background:#fff;color:var(--navy);}
.btn--light:hover{background:var(--cotton);}
.btn--ghost{color:var(--navy);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--navy);background:var(--cotton);}
/* a visible focus ring everywhere, not just where a browser happens to draw one */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:2px;
}
.hero :focus-visible,.band :focus-visible,.foot :focus-visible,
.transformation :focus-visible,.home-cinema .svc-card:focus-visible{outline-color:#fff;}
/* Same rule for every other dark ground. Red on navy is 2.39:1, under the
   3:1 a focus ring needs (1.4.11). The slider's ring is on its frame, because
   the range input itself is invisible. */
.transformation .ba:focus-within,.notice :focus-visible,.winter-scene :focus-visible,
.photo-viewer :focus-visible,.home-cinema .section--services :focus-visible{outline-color:#fff;}

/* ----------------------------------------------------------- notice bar */
/* D6: the link was sage green, left over from the old system. */
.notice{background:var(--navy);color:#dfe6f4;}
.notice a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.notice-dot{background:var(--red);box-shadow:0 0 0 3px rgba(178,34,52,.3);}

/* ------------------------------------------------------- services, home */
/* An asymmetric grid: landscaping is the high-ticket service and gets the
   double tile. Three identical rows of cards is the generated-layout tell. */
.home-cinema .section--services{background:var(--navy);color:#fff;}
.section--services .section-head h2,.section--services .svc-name{color:#fff;}
.section--services .section-head .lede{color:#c7d0e2;}
.section--services .svc-note{color:#b9c6dd;}
@media(min-width:900px){
  .home-cinema .svc-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .home-cinema .svc-grid>a:nth-child(1){grid-column:span 4;}
  .home-cinema .svc-grid>a:nth-child(2){grid-column:span 2;}
  .home-cinema .svc-grid>a:nth-child(3),
  .home-cinema .svc-grid>a:nth-child(4),
  .home-cinema .svc-grid>a:nth-child(5){grid-column:span 2;}
  .home-cinema .svc-grid>a:nth-child(6){grid-column:span 6;}
  .home-cinema .svc-grid>a:nth-child(1) .svc-shot{aspect-ratio:1.9;}
  /* Tile 2 shares a grid row with the wide landscaping tile, so the row is
     473px tall while its own picture was only 292. `.svc-note` is flex:1, so
     the difference showed up as 180px of empty navy under one line of text,
     which read as a hole in the layout rather than as space. A near-square
     crop fills the row and, on a square source photo, also throws away less
     of the picture than the 1.5 crop did. */
  .home-cinema .svc-grid>a:nth-child(2) .svc-shot{aspect-ratio:.925;}
  .home-cinema .svc-grid>a:nth-child(6) .svc-shot{aspect-ratio:3.4;}
  .home-cinema .svc-grid>a:nth-child(1) .svc-name{font-size:2.3rem;}
  .home-cinema .svc-grid>a:nth-child(6) .svc-name{font-size:2.1rem;}
}
@media(max-width:899px){
  .home-cinema .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;}
  .home-cinema .svc-grid>a:nth-child(1){grid-column:span 2;}
  /* Two columns at 390px give a 166px tile, and cinematic.css was cropping
     the photo inside it to 1.7, so 98px tall. The name sits on the picture at
     1.75rem, so "Tree & shrub work" and "Cleanups & hauling" wrapped to two
     and three lines and spilled out over the top edge of their own photos.
     A taller crop and a smaller name keep the label on the picture, and the
     yard is actually legible at 141px where it was not at 98. */
  .home-cinema .svc-shot{aspect-ratio:1.18;}
  .home-cinema .svc-grid>a:nth-child(1) .svc-shot{aspect-ratio:1.6;}
  .home-cinema .svc-name{font-size:1.15rem;line-height:1.0;}
  .home-cinema .svc-grid>a:nth-child(1) .svc-name{font-size:1.75rem;}
  /* Six tiles in two columns leave the sixth alone in a half-width row with a
     hole beside it. It is the full-bleed tile on desktop, so it runs full
     width here too and the grid is bookended by its two widest pictures. */
  .home-cinema .svc-grid>a:nth-child(6){grid-column:span 2;}
  .home-cinema .svc-grid>a:nth-child(6) .svc-shot{aspect-ratio:1.85;}
  .home-cinema .svc-grid>a:nth-child(6) .svc-name{font-size:1.75rem;}
}
.home-cinema .svc-shot::after{background:linear-gradient(0deg,rgba(9,23,49,.94),transparent 72%);}
.home-cinema .svc-go{background:var(--red);}
.home-cinema .svc-card:hover .svc-shot{box-shadow:0 3px var(--red);}
a.svc-card:hover{border-color:var(--navy-2);}

/* ------------------------------------------------------------- red band */
/* One per page, full width, white type. This is where the red earns its
   place: the moment the visitor is meant to act. */
.band{background:var(--red);color:#fff;}
.band h2{color:#fff;}
.band p{color:#ffe4e7;}
.home-cinema .band{background:var(--red);color:#fff;}
.home-cinema .band h2{color:#fff;}
.home-cinema .band p{color:#ffe4e7;}
.band .btn--light{background:#fff;color:var(--red-deep);}
.band .btn--light:hover{background:var(--cotton);color:var(--red-deep);}
.band .btn--outline-light,.home-cinema .band .btn--outline-light{
  color:#fff;border-color:rgba(255,255,255,.75);background:transparent;}
.band .btn--outline-light:hover,.home-cinema .band .btn--outline-light:hover{
  background:rgba(255,255,255,.14);border-color:#fff;}
.band-phone{font-family:'Big Shoulders Display','Big Shoulders Fallback','Arial Narrow',sans-serif;
  font-weight:800;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:.95;color:#fff;
  text-decoration:none;display:inline-block;margin:6px 0 2px;}
.band-phone:hover{text-decoration:underline;text-underline-offset:5px;}

/* ------------------------------------------------- the rest of the chrome */
.transformation,.home-cinema .transformation{background:var(--navy);}
.transformation .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);}
.transformation .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.section--sand{background:var(--cotton);}
.page-head{background:var(--cotton);}
.foot{background:var(--navy);color:#c7d0e2;}
.foot h2{color:#fff;}
.ba-tag{background:rgba(14,33,71,.88);}
.ba-tag--a{background:var(--red);}
.ba-handle svg{color:var(--navy);}
.photo-expand{background:rgba(14,33,71,.86);}
.photo-viewer,.photo-viewer::backdrop{background:#091731;}
.step-rule,.home-cinema .step-rule{background:var(--red);}
.step-rule::after{background:var(--line);}
.trust-item{border-top-color:var(--navy);}
.aside{border-top-color:var(--red);background:var(--cotton);}
.terms-row:first-child{border-top-color:var(--red);}
.eyebrow{color:var(--red-deep);}
.home-cinema .winter-scene .eyebrow{color:#fff;}
.home-cinema .winter-scene .split-media::after{
  background:linear-gradient(90deg,rgba(14,33,71,.9),rgba(14,33,71,.55) 45%,rgba(14,33,71,.12));}
@media(max-width:860px){.home-cinema .winter-scene .split-media::after{background:rgba(14,33,71,.72);}}
.season-when{color:var(--red-deep);}
.dz-line strong,.dz-item.is-done .dz-state{color:var(--navy-2);}
.dropzone:hover,.dropzone.is-over{border-color:var(--navy-2);background:#eef2f9;}
.dz-item.is-failed .dz-state,.dz-remove,.or-text a{color:var(--red-deep);}
.filter[aria-pressed=true]{background:var(--navy);}
.svc-more{color:var(--red-deep);}
.service-choices a::after{background:var(--red);}
.feature-link{color:#fff;}

/* The secondary hero action was a left hairline on phones and a faint outline
   on desktop, so it did not read as something you could press. */
.hero-actions .btn--outline-light{
  background:rgba(9,23,49,.42);border:1px solid rgba(255,255,255,.85);backdrop-filter:saturate(1.1) blur(2px);
}
@media(max-width:380px){
  .hero-actions .btn--outline-light{border:1px solid rgba(255,255,255,.85);border-radius:3px;
    padding:13px 18px;justify-content:center;}
}

/* The notice link is a deliberate call to action, not a link inside a
   paragraph, so it gets a real tap area on a phone. WCAG 2.5.8 exempts
   inline text links; this one is not really one. */
@media(max-width:760px){
  /* The negative margin takes the padding back out of the line box. Without
     it the padded link made its own line taller, and at 320 to 430 the notice
     showed a double gap between its two lines (D01 #8). The tap area keeps the
     padding: 10px each side makes it about 45px tall, the house 44px, and it
     still fits inside the bar's own 10px padding.
     The ring is drawn 3 to 6px inside that box: outside it, its top ran 6px
     under the sticky header whenever the notice is one line (430, and 640
     wide at 200% zoom), and over the line above when it is two (2.4.11). The
     8px side padding, also taken back by the margin, keeps that inset ring
     clear of the first and last letters. */
  .notice a{display:inline-block;padding:10px 8px;margin:-10px -8px;}
  .notice a:focus-visible{outline-offset:-6px;}
}

/* Optical typography. Free in bytes, and the detail that most reads as set by
   a person rather than poured into a template: headlines balanced across
   lines, body text with no one-word last line, and the phone number on
   tabular figures so it does not wobble between the header, the band and the
   footer. `text-wrap: balance` had been switched off on the hero back when
   the headline carried a hard <br>; the line breaks itself now. */
.hero .hero-title,.home-cinema .hero .hero-title{text-wrap:balance;}
p,li,figcaption,.lede,.hint{text-wrap:pretty;}
.hdr-call,.band-phone,.topbar a,.foot a[href^="tel:"],.callbar a{font-variant-numeric:tabular-nums;}

/* The home hero's H1 is the short line naming the services, and it keeps the
   look it had as a paragraph. The big line under it is .hero-title, which
   carries every rule the old H1 had. Without this reset the H1 would pick up
   the display face from the global heading rules. */
.hero h1.lede{font-family:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;}