/* ==========================================================================
   AKIN MOW & GO   ·   site C   ·   "CLASSIC"
   A traditional local lawn-service site. Reference object: a Kentucky farm
   co-op enamel sign. Bottle-green board, off-white lettering, one amber
   signal. Slab serif does the talking, the photographs do the proving.

   Colour strategy: full palette, three roles.
     field  (deep green)  carries the structure  ~35% of surface
     amber  (signal)      carries every call-to-action, nothing else
     ground (off-white)   carries the reading

   Contrast, computed in OKLCH -> sRGB -> WCAG (not eyeballed):
     ink    on ground    16.13:1        ink   on panel     15.05:1
     body   on ground    10.22:1        body  on panel      9.53:1
     muted  on ground     6.43:1        muted on panel2     5.52:1
     onfield on field    11.40:1        onfield-m on field  7.51:1
     amber  on field      5.59:1        amber on field-dk   7.08:1
     ink    on amber      7.53:1        field on ground    11.96:1
   White on amber is 2.25:1 and is therefore never used.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* surfaces */
  --ground:    #f7faf6;
  --panel:     #eef3ed;
  --panel2:    #e3eae1;
  --field:     #0f3b25;
  --field-dk:  #042817;
  --field-lt:  #23593d;
  /* type */
  --ink:       #102016;
  --body:      #334138;
  --muted:     #525e56;
  --onfield:   #eff6ee;
  --onfield-m: #bfcbbf;
  /* signal */
  --amber:     #ed9b30;
  --amber-dk:  #e18518;

  --rule:        rgba(16, 32, 22, 0.14);
  --rule-soft:   rgba(16, 32, 22, 0.08);
  --rule-on:     rgba(239, 246, 238, 0.22);
  --rule-on-soft:rgba(239, 246, 238, 0.12);

  --font-slab: "Hepta Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --mx: clamp(20px, 5vw, 56px);          /* page gutter */
  --shell: 1220px;                       /* content shell */
  --sec: clamp(56px, 7.2vw, 116px);      /* section padding block */
  --gap: clamp(14px, 1.5vw, 22px);

  --head-h: 74px;

  --z-base: 0;
  --z-raise: 1;
  --z-head: 20;
  --z-callbar: 30;
  --z-skip: 40;

  --out: cubic-bezier(.2, .8, .3, 1);
}

@supports (color: oklch(0.5 0.1 200)){
  :root{
    --ground:    oklch(0.982 0.006 140);
    --panel:     oklch(0.958 0.010 140);
    --panel2:    oklch(0.930 0.014 138);
    --field:     oklch(0.315 0.062 158);
    --field-dk:  oklch(0.245 0.052 158);
    --field-lt:  oklch(0.420 0.075 158);
    --ink:       oklch(0.225 0.030 155);
    --body:      oklch(0.360 0.024 155);
    --muted:     oklch(0.470 0.020 155);
    --onfield:   oklch(0.965 0.012 140);
    --onfield-m: oklch(0.830 0.022 145);
    --amber:     oklch(0.755 0.150 68);
    --amber-dk:  oklch(0.700 0.155 62);
  }
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after{ box-sizing: border-box; }

html{
  overflow-x: clip;
  scroll-padding-top: calc(var(--head-h) + 14px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

body{
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
picture{ display: block; }
h1, h2, h3{ margin: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure, blockquote{ margin: 0; padding: 0; }
li{ list-style: none; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--field); color: var(--onfield); }

:where(a, button):focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 3px;
}
.head :where(a):focus-visible,
.topbar :where(a):focus-visible{ outline-color: var(--field-lt); }
.price :where(a):focus-visible,
.foot :where(a):focus-visible,
.hero-panel :where(a):focus-visible{ outline-color: var(--amber); }

/* ---------------------------------------------------------------- shared */
.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--mx);
}

.sec-h{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.16rem + 2.2vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sec-lede{
  margin-top: 0.85rem;
  max-width: 52ch;
  font-size: clamp(1.1rem, 1.04rem + 0.42vw, 1.35rem);
  line-height: 1.5;
  color: var(--muted);
}
.sec-head{ margin-bottom: clamp(34px, 4vw, 60px); }
@media (min-width: 1000px){
  .services > .shell > .sec-head,
  .work > .shell > .sec-head,
  .price > .shell > .sec-head,
  .area > .shell > .sec-head{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: end;
  }
  .services > .shell > .sec-head .sec-lede,
  .work > .shell > .sec-head .sec-lede,
  .price > .shell > .sec-head .sec-lede,
  .area > .shell > .sec-head .sec-lede{ margin-top: 0; padding-bottom: 0.35rem; }
}
.sec-head-on .sec-h{ color: var(--onfield); }
.sec-head-on .sec-lede{ color: var(--onfield-m); }

/* ---------------------------------------------------------------- buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.82em 1.35em;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  min-height: 46px;
  cursor: pointer;
  transition: background-color .18s var(--out), border-color .18s var(--out),
              color .18s var(--out), transform .18s var(--out);
}
.btn .ico{ flex: none; }
.btn-lg{ font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem); padding: 0.95em 1.55em; }

.btn-amber{ background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover{ background: var(--amber-dk); border-color: var(--amber-dk); }

.btn-field{ background: var(--field); color: var(--onfield); border-color: var(--field); }
.btn-field:hover{ background: var(--field-lt); border-color: var(--field-lt); }

.btn-ghost{ background: transparent; color: var(--onfield); border-color: var(--rule-on); }
.btn-ghost:hover{ background: rgba(239,246,238,0.10); border-color: var(--onfield-m); }

.btn-outline{ background: transparent; color: var(--onfield); border-color: var(--onfield-m); }
.btn-outline:hover{ background: rgba(239,246,238,0.10); }

@media (prefers-reduced-motion: no-preference){
  .btn:active{ transform: translateY(1px); }
}

.cta-row{ display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-row-c{ justify-content: center; }

/* ---------------------------------------------------------------- skip */
.skip{
  position: absolute;
  left: 14px;
  top: -84px;
  z-index: var(--z-skip);
  padding: 0.75rem 1.15rem;
  background: var(--field);
  color: var(--onfield);
  font-weight: 700;
  border-radius: 4px;
  transition: top .16s var(--out);
}
.skip:focus{ top: 14px; }

/* ---------------------------------------------------------------- topbar */
.topbar{
  background: var(--field-dk);
  color: var(--onfield-m);
  border-top: 9px solid transparent;
  border-image: repeating-linear-gradient(
    104deg, var(--field-lt) 0 22px, var(--field-dk) 22px 44px) 9;
}
.topbar-in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 50px;
}
.topbar-where{
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  color: var(--onfield-m);
}
.topbar-tel{
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-block: 0.9rem;
  font-size: 0.875rem;
  color: var(--onfield-m);
  white-space: nowrap;
}
.topbar-tel-num{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--amber);
  letter-spacing: -0.01em;
}
.topbar-tel:hover .topbar-tel-num{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- header */
.head{
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  background: var(--ground);
  border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow .2s var(--out), background-color .2s var(--out);
}
.head.is-stuck{ box-shadow: 0 6px 22px -14px rgba(16,32,22,0.55); }

.head-in{
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-height: var(--head-h);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--field);
}
.brand-mark{ display: block; flex: none; }
.brand-mark svg{ display: block; }
.brand-type{ display: grid; }
.brand-name{
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-transform: uppercase;
}
.brand-sub{
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.nav{ display: none; }
.nav a{
  display: inline-block;
  padding: 0.7rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--body);
  border-bottom: 2px solid transparent;
  transition: color .16s var(--out), border-color .16s var(--out);
}
.nav a:hover{ color: var(--field); border-bottom-color: var(--amber); }

.head-cta{ flex: none; font-size: 0.95rem; padding: 0.72em 1.05em; }

/* ---------------------------------------------------------------- hero */
.hero{
  display: grid;
  background: var(--field);
  color: var(--onfield);
}
.hero-photo{
  position: relative;
  background: var(--field-dk);
  width: 100%;
  height: min(122vw, 47vh);
  overflow: hidden;
}
.hero-photo picture, .hero-photo img{ width: 100%; height: 100%; }
.hero-photo img{ object-fit: cover; object-position: center 58%; }

.hero-panel{
  display: grid;
  align-content: center;
  padding: clamp(38px, 6vw, 84px) var(--mx) clamp(42px, 6vw, 84px);
}
.hero-copy{ max-width: 34rem; }

.hero h1{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(2.05rem, 1.34rem + 2.5vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--onfield);
}
.said{
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--font-slab);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  color: var(--amber);
  letter-spacing: -0.012em;
}
.hero-lede{
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.01rem + 0.34vw, 1.22rem);
  line-height: 1.55;
  color: var(--onfield-m);
}
.hero .cta-row{ margin-top: clamp(24px, 3vw, 34px); }
.hero .cta-row .btn{ padding-inline: 1.2em; }
.hero-fine{
  margin-top: clamp(18px, 2vw, 24px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule-on-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--onfield-m);
}

/* ---------------------------------------------------------------- facts */
.facts{
  background: var(--ground);
  padding-block: clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--rule-soft);
}
.facts-list{
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.facts-list li{ padding-top: 1.1rem; border-top: 3px solid var(--field); }
.facts-list h2{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.facts-list p{
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------- services */
.services{ background: var(--panel); padding-block: var(--sec); }

.svc{ display: grid; }
.svc-item{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid var(--rule);
}
.svc-item:last-child{ border-bottom: 1px solid var(--rule); }

.svc-mark{
  width: clamp(66px, 9vw, 124px);
  height: clamp(52px, 7vw, 96px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2px;
}
.svc-mark img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0.88;
}
.svc-body h3{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.svc-body p{
  margin-top: 0.6rem;
  max-width: 62ch;
  color: var(--body);
}

.takeon{
  margin-top: clamp(34px, 4vw, 56px);
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.takeon-h{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  letter-spacing: -0.014em;
  color: var(--ink);
}
.takeon-list{
  margin-top: 1rem;
  display: grid;
  gap: 0.65rem 2.5rem;
}
.takeon-list li{
  position: relative;
  padding-left: 1.6rem;
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.takeon-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 4px;
  background: var(--amber);
}

/* ---------------------------------------------------------------- band */
.band{
  position: relative;
  background: var(--field-dk);
}
.band-img{
  width: 100%;
  height: clamp(200px, 27vw, 360px);
  object-fit: cover;
  object-position: center 28%;
}
.plate{
  position: absolute;
  left: var(--mx);
  bottom: clamp(20px, 3.4vw, 46px);
  max-width: min(24ch, calc(100% - var(--mx) * 2));
  padding: clamp(14px, 1.8vw, 22px) clamp(18px, 2.4vw, 30px);
  background: var(--field);
  color: var(--onfield);
  border-radius: 4px;
  border-bottom: 5px solid var(--amber);
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  box-shadow: 0 18px 40px -22px rgba(4, 40, 23, 0.9);
}
@media (min-width: 1000px){
  .plate{
    left: max(var(--mx), calc((100% - var(--shell)) / 2 + var(--mx)));
  }
}

/* ---------------------------------------------------------------- work */
.work{ background: var(--ground); padding-block: var(--sec); }

.gal{ display: grid; gap: var(--gap); align-items: start; }
.gal figure{ min-width: 0; }
.gal picture{
  overflow: hidden;
  border-radius: 5px;
  background: var(--panel2);
  min-height: 0;
}
.gal img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--out);
}
@media (prefers-reduced-motion: no-preference){
  .gal figure:hover img{ transform: scale(1.035); }
}
.gal figcaption{
  padding-top: 0.7rem;
  min-height: 3em;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------------------------------------------------------------- price */
.price{
  background: var(--field);
  color: var(--onfield);
  padding-block: var(--sec);
}
.steps{ display: grid; gap: 0; }
.steps li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 30px);
  row-gap: 0.4rem;
  align-items: start;
  padding-block: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--rule-on);
}
.steps li:last-child{ border-bottom: 1px solid var(--rule-on); }
.step-n{
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.4vw, 54px);
  height: clamp(40px, 4.4vw, 54px);
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1;
}
.steps h3{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.016em;
  color: var(--onfield);
  align-self: center;
}
.steps p{
  grid-column: 2;
  max-width: 58ch;
  color: var(--onfield-m);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.bignum{
  margin-top: clamp(38px, 4.6vw, 64px);
  text-align: center;
}
.bignum-lbl{
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onfield-m);
}
.bignum-tel{
  display: block;
  margin-top: 0.5rem;
  padding-block: 0.4rem;
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--amber);
}
.bignum-tel:hover{ color: var(--onfield); }
.bignum .cta-row{ margin-top: clamp(22px, 2.6vw, 32px); }

/* ---------------------------------------------------------------- quote */
.quote{
  background: var(--panel2);
  padding-block: clamp(52px, 6.4vw, 100px);
}
.quote-in{ display: grid; }
.quote figure{
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote p{
  font-family: var(--font-slab);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.02rem + 1.35vw, 2.05rem);
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.quote figcaption{
  margin-top: clamp(18px, 2.2vw, 26px);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.quote figcaption::before{
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 0 auto clamp(16px, 2vw, 22px);
  background: var(--amber);
}
.cite-grp{ font-weight: 700; color: var(--body); }

/* ---------------------------------------------------------------- rig */
.rig{ background: var(--ground); padding-block: var(--sec); }
.rig-in{ display: grid; gap: clamp(34px, 4vw, 60px); }

.spec{ margin-top: clamp(26px, 3vw, 38px); }
.spec-row{ padding-block: 1.05rem; border-top: 1px solid var(--rule); }
.spec-row:last-child{ border-bottom: 1px solid var(--rule); }
.spec dt{
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--field);
}
.spec dd{
  margin-top: 0.3rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.52;
  color: var(--body);
}

.rig-shots{ display: grid; gap: var(--gap); align-items: start; }
.rig-shots figure{ min-width: 0; }
.rig-shots picture{ overflow: hidden; border-radius: 5px; background: var(--panel2); min-height: 0; }
.rig-shots img{ width: 100%; height: 100%; object-fit: cover; }
.rig-shots figcaption{
  padding-top: 0.65rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- area */
.area{ background: var(--panel); padding-block: var(--sec); }
.area-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.area-list li{
  padding: 0.62rem 1.05rem;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--font-slab);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.area-note{
  margin-top: clamp(24px, 2.8vw, 34px);
  max-width: 54ch;
  color: var(--body);
}
.lnk{
  display: inline;
  padding-block: 0.8rem;
  color: var(--field);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--amber);
}
.lnk:hover{ color: var(--field-lt); text-decoration-color: var(--field-lt); }

/* ---------------------------------------------------------------- contact */
.contact{ background: var(--ground); padding-block: var(--sec); }
.contact-in{ display: grid; gap: clamp(32px, 4vw, 60px); align-items: center; }

.contact-list{ margin-top: clamp(24px, 3vw, 36px); }
.contact-list li{
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule);
}
.contact-list li:last-child{ border-bottom: 1px solid var(--rule); }
.contact-lbl{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-val{
  display: inline-block;
  justify-self: start;
  padding-block: 0.64rem;
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--field);
  border-bottom: 2px solid transparent;
  transition: color .16s var(--out), border-color .16s var(--out);
}
.contact-val-sm{ font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); overflow-wrap: anywhere; }
.contact-val:hover{ color: var(--ink); border-bottom-color: var(--amber); }

.contact-cta{ margin-top: clamp(24px, 3vw, 34px); }

.contact-shot picture{ overflow: hidden; border-radius: 5px; background: var(--panel2); }
.contact-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: center 38%; aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------- footer */
.foot{
  background: var(--field-dk);
  color: var(--onfield-m);
  padding-block: clamp(38px, 4.4vw, 60px);
  border-top: 9px solid transparent;
  border-image: repeating-linear-gradient(
    104deg, var(--field-lt) 0 22px, var(--field-dk) 22px 44px) 9;
}
.foot-in{ display: grid; gap: clamp(20px, 2.6vw, 34px); }
.foot-name{
  font-family: var(--font-slab);
  font-weight: 900;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: var(--onfield);
}
.foot-line{ margin-top: 0.35rem; font-size: 0.9375rem; color: var(--onfield-m); }
.foot-links{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; }
.foot-links a{
  display: inline-block;
  padding-block: 0.62rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--onfield);
  border-bottom: 2px solid transparent;
  transition: border-color .16s var(--out);
}
.foot-links a:hover{ border-bottom-color: var(--amber); }

/* ---------------------------------------------------------------- callbar */
.callbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-callbar);
  display: none;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--field-dk);
  border-top: 1px solid var(--rule-on);
  box-shadow: 0 -10px 26px -18px rgba(4, 40, 23, 0.95);
}
.callbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.callbar-call{ flex: 1 1 auto; background: var(--amber); color: var(--ink); }
.callbar-text{ flex: 0 0 auto; background: transparent; color: var(--onfield); border: 2px solid var(--rule-on); }

@media (max-width: 899px){
  .callbar{ display: flex; }
  .callbar[data-off]{ display: none; }
  body.has-callbar{ padding-bottom: 76px; }
}

/* ======================================================================
   BREAKPOINTS
   ====================================================================== */

/* ------- 560px and up: header cta gets its number back ------- */
@media (max-width: 719px){
  .tb-own{ display: none; }
  .topbar-where{ white-space: nowrap; }
}
@media (max-width: 479px){
  .topbar-tel-lbl{ display: none; }
}

/* ------- below 640px: the mark sits beside its heading, copy runs full width ------- */
@media (max-width: 639px){
  .svc-item{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mark title" "body body";
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
  }
  .svc-mark{ grid-area: mark; width: 58px; height: 46px; margin-top: 0; }
  .svc-body{ display: contents; }
  .svc-body h3{ grid-area: title; }
  .svc-body p{ grid-area: body; margin-top: 0; }
  .foot-links{ display: grid; gap: 0; }
}

@media (max-width: 559px){
  .head-cta span{ display: none; }
  .head-cta::after{ content: "Call"; }
  .head-cta{ padding-inline: 0.95em; }
  .brand-sub{ display: none; }
}

/* ------- 640px and up ------- */
@media (min-width: 640px){
  .facts-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .takeon-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in{ grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .foot-links{ justify-content: flex-end; }
}

/* ------- 700px and up: gallery goes two-up ------- */
@media (min-width: 700px){
  .gal{ grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
  .gal-a{ grid-column: span 6; }
  .gal-a picture{ aspect-ratio: 16 / 9; }
  .gal-b{ grid-column: span 3; }
  .gal-b picture{ aspect-ratio: 3 / 4; }
  .gal-c{ grid-column: span 3; }
  .gal-c picture{ aspect-ratio: 3 / 4; }
  .gal-d{ grid-column: span 3; }
  .gal-d picture{ aspect-ratio: 4 / 3; }
  .gal-e{ grid-column: span 3; }
  .gal-e picture{ aspect-ratio: 4 / 3; }

  .rig-shots{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rig-shots picture{ aspect-ratio: 4 / 5; }
}

/* ------- 760px and up ------- */
@media (min-width: 760px){
  .facts-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li{ grid-template-columns: auto minmax(0, 22ch) minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 40px); }
  .step-n{ grid-row: 1; }
  .steps h3{ grid-column: 2; grid-row: 1; }
  .steps p{ grid-column: 3; grid-row: 1; align-self: center; }
  .contact-in{ grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

/* ------- 900px and up: the split hero ------- */
@media (min-width: 900px){
  .hero{
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    align-items: stretch;
    min-height: min(72vh, 660px);
  }
  .hero-panel{
    order: 1;
    padding-inline-start: max(var(--mx), calc((100vw - var(--shell)) / 2 + var(--mx)));
    padding-inline-end: clamp(32px, 4vw, 68px);
    justify-items: start;
  }
  .hero-photo{ order: 2; height: auto; }
  .hero-photo img{ object-position: center 42%; }
}

/* ------- 940px and up: the desktop nav appears ------- */
@media (min-width: 940px){
  .nav{ display: flex; align-items: center; gap: clamp(2px, 0.8vw, 14px); }
}

/* ------- 1000px and up ------- */
@media (min-width: 1000px){
  .svc-item{
    grid-template-columns: auto minmax(0, 19ch) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 52px);
    align-items: start;
  }
  .svc-body{ display: contents; }
  .svc-body h3{ grid-column: 2; }
  .svc-body p{ grid-column: 3; margin-top: 0; max-width: 58ch; }

  .rig-in{ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
  .gal-a{ grid-column: span 4; }
  .gal-a picture{ aspect-ratio: 3 / 2; }
  .gal-b{ grid-column: span 2; }
  .gal-c{ grid-column: span 2; }
  .gal-c picture{ aspect-ratio: 4 / 3; }
  .gal-d{ grid-column: span 2; }
  .gal-e{ grid-column: span 2; }
}

/* ------- 1500px and up: hold the line, do not sprawl ------- */
@media (min-width: 1500px){
  :root{ --shell: 1300px; }
  .hero{
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    min-height: min(70vh, 720px);
  }
  .hero-copy{ max-width: 36rem; }
}

/* ======================================================================
   MOTION.  Everything below only exists once JS has confirmed the browser
   is running scripts and the visitor has not asked for reduced motion.
   Without JS, or with reduce set, the page is fully visible and static.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference){
  html.anim [data-rv]{
    opacity: 0;
    transform: translateY(16px);
  }
  html.anim [data-rv].rv-in{
    opacity: 1;
    transform: none;
    transition: opacity .62s var(--out), transform .62s var(--out);
    transition-delay: var(--rv-d, 0ms);
  }

  html.anim .hero-copy > *{ opacity: 0; transform: translateY(14px); }
  html.anim.ready .hero-copy > *{
    opacity: 1;
    transform: none;
    transition: opacity .68s var(--out), transform .68s var(--out);
  }
  html.anim.ready .hero-copy > :nth-child(1){ transition-delay: 60ms; }
  html.anim.ready .hero-copy > :nth-child(2){ transition-delay: 170ms; }
  html.anim.ready .hero-copy > :nth-child(3){ transition-delay: 250ms; }
  html.anim.ready .hero-copy > :nth-child(4){ transition-delay: 330ms; }
  html.anim.ready .hero-copy > :nth-child(5){ transition-delay: 410ms; }

  html.anim .hero-photo img{ transform: scale(1.06); }
  html.anim.ready .hero-photo img{
    transform: none;
    transition: transform 1.5s cubic-bezier(.16,.8,.28,1);
  }

  .callbar{ transform: translateY(105%); transition: transform .3s var(--out); }
  .callbar.is-on{ transform: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}