/* Wiley Water Well Service — demo rebuild
   Archetype: full-bleed job frames opening straight into the work, because
   the live site has only four lifestyle/stock-style images and zero photos
   of an actual well job. This page assumes real photos will replace the
   three placeholder frames the moment the owner supplies them. */

:root{
  --ink:#0e1f26;
  --paper:#f6f4ee;
  --paper-2:#eae4d6;
  --deep:#0b2530;
  --deep-2:#123342;
  --rail-txt:#eef3f4;
  --mut:#4d5c62;
  --rule:#d9d2bf;
  --act:#b0651a;
  --act-lit:#e78c33;
  font-synthesis-weight:none;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}

img,svg{max-width:100%;}
img{height:auto;display:block;}

h1,h2,h3{font-family:Georgia,"Times New Roman",serif; line-height:1.15; margin:0 0 .5em;}

a{color:var(--act);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--act-lit);
  outline-offset:2px;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--act);color:#fff;padding:10px 16px;text-decoration:none;
}
.skip:focus{left:0;}

.ph{
  font:600 .9em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--paper-2);
  border-bottom:2px solid var(--act);
  padding:1px 5px;
  white-space:nowrap;
}

/* ============================ THE PLATE ============================ */

.plate{
  background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%);
  color:var(--rail-txt);
  padding:56px 20px 28px;
}
.plate-in{max-width:640px; margin:0 auto;}
.kicker{
  margin:0 0 14px;
  font:700 .78em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9fc2cf;
}
.plate h1{font-size:clamp(1.7rem,6vw,2.5rem); color:#fff;}
.heritage{
  font-family:Georgia,serif;
  font-style:italic;
  color:#cfe3e9;
  margin:.2em 0 1em;
  font-size:1.05em;
}
.lede{color:#c3d3d8; max-width:46ch; margin:0 0 26px;}

.ring{
  display:flex; align-items:center; gap:14px;
  background:var(--act);
  color:#fff;
  text-decoration:none;
  padding:14px 18px;
  border-radius:10px;
  max-width:340px;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.ring-ic{width:26px;height:26px;flex:0 0 auto;}
.ring-t{display:flex; flex-direction:column; line-height:1.25;}
.ring-k{font-size:.78em; text-transform:uppercase; letter-spacing:.05em; opacity:.9;}
.ring-n{font-size:1.35em; font-weight:700;}

.plate-alt{margin:16px 0 0; font-size:.95em;}
.plate-alt a{color:#bfe0ea;}

.plate-cap{
  max-width:640px; margin:22px auto 0;
  font-size:.82em; color:#8fa8b0; font-style:italic;
}

/* ============================ SECTION NAV ============================ */

.strip{
  display:flex; overflow-x:auto; gap:4px;
  background:var(--deep-2);
  padding:0 12px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none;}
.strip a{
  flex:0 0 auto;
  color:#bcd3da;
  text-decoration:none;
  font-size:.85em;
  padding:12px 14px;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.strip a:hover, .strip a:focus-visible{border-bottom-color:var(--act-lit); color:#fff;}

main{display:block;}

/* ============================ JOB FRAMES ============================ */

.frame{
  margin:0;
  border-bottom:1px solid var(--rule);
}
.ph-box{
  position:relative;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 12px,#e0d8c4 12px,#e0d8c4 24px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  gap:8px;
}
.ph-box.ph-b{background:
    repeating-linear-gradient(135deg,#e6e0d0,#e6e0d0 12px,#dcd3bc 12px,#dcd3bc 24px);}
.ph-box.ph-c{background:
    repeating-linear-gradient(135deg,#e0dccd,#e0dccd 12px,#d5cbb0 12px,#d5cbb0 24px);}
.ph-tag{
  align-self:flex-start;
  font:700 .72em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--act); color:#fff;
  padding:4px 8px; border-radius:4px;
}
.ph-brief{font-size:.85em; color:var(--mut); max-width:52ch;}

.frame figcaption{padding:20px 20px 26px; max-width:640px; margin:0 auto;}
.fc-n{
  display:inline-block;
  font:700 .8em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--act);
  margin-bottom:6px;
}
.fc-t{display:block; font-family:Georgia,serif; font-size:1.25em; margin-bottom:6px;}
.fc-d{display:block; color:var(--mut); max-width:56ch;}

/* ============================ WHAT WE DO ============================ */

.does{padding:36px 20px; max-width:640px; margin:0 auto;}
.does h2{font-size:1.5em;}
.doeslist{list-style:none; margin:20px 0; padding:0;}
.doeslist li{padding:16px 0; border-top:1px solid var(--rule);}
.doeslist li:first-child{border-top:none;}
.doeslist h3{font-size:1.08em; margin-bottom:.3em;}
.doeslist p{margin:0; color:var(--mut);}
.does-note{font-size:.85em; color:var(--mut); font-style:italic;}
.does-cta{margin-top:18px;}
.does-cta a{font-weight:700; text-decoration:none; border-bottom:2px solid var(--act);}

/* ============================ THE AQUIFER ============================ */

.under{background:var(--paper-2); padding:36px 20px;}
.under-in{max-width:640px; margin:0 auto;}
.under h2{font-size:1.5em;}
.under p{color:var(--mut); margin:0 0 1em;}
.under p:last-child{margin-bottom:0;}

/* ============================ LICENSING ============================ */

.lic{padding:36px 20px; max-width:640px; margin:0 auto;}
.lic h2{font-size:1.5em;}
.liclist{list-style:none; margin:18px 0; padding:0; border-top:1px solid var(--rule);}
.liclist li{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--rule);
  font-size:.95em;
}
.lic-k{color:var(--mut);}
.lic-v{font-weight:700; text-align:right;}
.lic-note{font-size:.85em; color:var(--mut); font-style:italic;}

/* ============================ REACH US ============================ */

.reach{background:var(--deep); color:var(--rail-txt); padding:40px 20px 56px;}
.reach h2{font-size:1.5em; color:#fff; max-width:640px; margin:0 auto .8em;}

.bigcall{
  display:block; max-width:640px; margin:0 auto 28px;
  background:var(--act); color:#fff; text-decoration:none;
  padding:20px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.bc-k{display:block; font-size:.78em; text-transform:uppercase; letter-spacing:.05em; opacity:.9;}
.bc-n{display:block; font-size:1.8em; font-weight:700; margin:.1em 0;}
.bc-d{display:block; font-size:.9em; opacity:.92;}

.reach-grid{
  max-width:640px; margin:0 auto;
  display:grid; gap:28px;
}
.rh{font-size:.92em; text-transform:uppercase; letter-spacing:.04em; color:#9fc2cf; margin:1.2em 0 .3em;}
.rh:first-child{margin-top:0;}
.reach-grid p{color:#c3d3d8; margin:0 0 .3em;}
.tl{color:#bfe0ea;}

.form{background:rgba(255,255,255,.06); padding:18px; border-radius:10px;}
.f-row{margin:0 0 12px; display:flex; flex-direction:column; gap:4px;}
.f-row label{font-size:.85em; color:#bcd3da;}
.f-row input, .f-row textarea{
  font:inherit; padding:10px 12px; border-radius:6px; border:1px solid #3a4c55;
  background:#0e2530; color:#eef3f4;
}
.submit{
  font:700 1em/1 inherit; padding:12px 18px; border:none; border-radius:8px;
  background:var(--act-lit); color:#1a0f00; cursor:pointer;
}
.f-note{font-size:.78em; color:#8fa8b0; margin-top:10px;}

/* ============================ FOOTER ============================ */

.foot{background:#081820; color:#8fa8b0; padding:28px 20px 40px;}
.foot-in{max-width:640px; margin:0 auto;}
.foot-name{color:#dfe9ea; font-weight:700; margin:0 0 .4em;}
.foot-l{margin:.2em 0; font-size:.9em;}
.foot-l a{color:#bfe0ea;}
.foot-cr{font-size:.82em; margin-top:14px;}
.foot-demo{font-size:.8em; font-style:italic; margin-top:10px; color:#6d8189;}

/* ============================ WIDE SCREENS ============================ */

@media (min-width:820px){
  .frame{display:grid; grid-template-columns:1.3fr 1fr; align-items:stretch; border-bottom:1px solid var(--rule);}
  .frame:nth-child(even){grid-template-columns:1fr 1.3fr;}
  .frame:nth-child(even) .ph-box{order:2;}
  .ph-box{aspect-ratio:auto; height:100%;}
  .frame figcaption{display:flex; flex-direction:column; justify-content:center; margin:0; padding:32px 44px;}
  .reach-grid{grid-template-columns:1fr 1fr;}
}