/* Groundline: excavation concept. Daylight site palette: crushed gravel, asphalt, equipment yellow, soil. */
@font-face{font-family:"Barlow Condensed";src:url(/examples/fonts/barlow-cond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/examples/fonts/barlow-cond-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(/examples/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/examples/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/examples/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}

.gl{
  --gravel:#e3e1da; --paper:#f2f1ec; --asphalt:#24262a; --steel:#5b5f66; --rule:#c6c3b9;
  --yellow:#f2b705; --yellow-d:#c99400; --topsoil:#4f3725; --subsoil:#86613e; --clay:#a98a5e; --rock:#77797c;
  --gut:clamp(18px,4.6vw,72px);
  background:var(--gravel); color:var(--asphalt); font:400 17px/1.6 "Barlow",system-ui,sans-serif;
}
.gl ::selection{background:var(--yellow);color:var(--asphalt)}
.gl :focus-visible{outline:3px solid var(--asphalt);outline-offset:3px}
.gl h1,.gl h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
.gl h3{font:600 1.45rem/1.15 "Barlow Condensed",sans-serif;letter-spacing:.005em}
.gl p{max-width:62ch}

.gl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--yellow);color:var(--asphalt);text-decoration:none;font:600 1.1rem/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;border:2px solid var(--yellow);transition:background .2s,border-color .2s}
.gl-btn:hover{background:var(--yellow-d);border-color:var(--yellow-d)}
.gl-btn-dark{background:var(--asphalt);color:var(--yellow);border-color:var(--asphalt)}
.gl-btn-dark:hover{background:#000;border-color:#000}
.gl-link{font-weight:600;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--asphalt)}

.gl-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gut);background:var(--asphalt);color:var(--paper)}
.gl-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 1.75rem/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.01em}
.gl-brand svg{width:40px;height:24px;color:var(--yellow)}
.gl-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-weight:500}
.gl-nav a:not(.gl-btn){text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.gl-nav a:not(.gl-btn):hover{border-bottom-color:var(--yellow)}
.gl-nav .gl-btn{min-height:42px}
.gl-menu{display:none;min-height:42px;padding:0 16px;background:transparent;color:inherit;border:2px solid var(--yellow);font-weight:600;cursor:pointer}
.gl-header :focus-visible{outline-color:var(--yellow)}

/* hero: photo with a decal-yellow card */
.gl-hero{position:relative;padding:0 0 clamp(40px,6vw,80px)}
.gl-hero-img{position:relative}
.gl-hero-img img{width:100%;height:min(76vh,760px);min-height:420px;object-fit:cover;object-position:50% 40%}
.gl-hero-img figcaption{position:absolute;right:var(--gut);top:16px;padding:4px 10px;background:rgba(36,38,42,.78);color:#fff;font-size:.8rem}
.gl-hero-card{position:relative;margin:calc(-1 * clamp(140px,18vw,260px)) var(--gut) 0;max-width:min(860px,calc(100% - 2 * var(--gut)));padding:clamp(28px,4vw,52px);background:var(--yellow)}
.gl-hero-card h1{font-size:clamp(3rem,7.4vw,7rem)}
.gl-hero-card p{margin-top:20px;font-size:1.15rem;font-weight:500}
.gl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}

.gl-section{padding:clamp(56px,7vw,104px) var(--gut)}
.gl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 6vw;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.gl-head h2{font-size:clamp(2.8rem,6vw,5.4rem)}
.gl-head p{color:var(--steel);font-size:1.05rem}

.gl-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--asphalt)}
.gl-jobs article{padding:24px 24px 30px 0;border-bottom:1px solid var(--rule)}
.gl-jobs article:not(:nth-child(3n)){border-right:1px solid var(--rule)}
.gl-jobs article:not(:nth-child(3n+1)){padding-left:24px}
.gl-jobs p{margin-top:8px;color:var(--steel)}

/* calculator: the signature */
.gl-calc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);grid-template-areas:"head head" "form out";gap:clamp(24px,3.5vw,48px);padding:clamp(56px,7vw,104px) var(--gut);background:var(--asphalt);color:var(--paper)}
.gl-calc-head{grid-area:head;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 6vw;align-items:end}
.gl-calc-head h2{font-size:clamp(2.8rem,6vw,5.4rem);color:var(--yellow)}
.gl-calc-head p{color:#b9bcc2}
.gl-calc-form{grid-area:form;display:grid;gap:22px;align-content:start}
.gl-presets{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gl-presets legend{margin-bottom:10px;color:#b9bcc2;font-size:.95rem}
.gl-presets button{min-height:46px;border:2px solid #4a4d53;background:transparent;color:inherit;font:600 1.1rem/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.gl-presets button:hover{border-color:var(--yellow)}
.gl-presets button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--asphalt)}
.gl-calc :focus-visible{outline-color:var(--yellow)}
.gl-units{display:inline-grid;grid-template-columns:1fr 1fr;border:2px solid #4a4d53;width:max-content}
.gl-units label{position:relative}
.gl-units input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.gl-units span{display:flex;align-items:center;min-height:40px;padding:0 18px;font-weight:600}
.gl-units input:checked+span{background:var(--paper);color:var(--asphalt)}
.gl-units input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.gl-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gl-dims label,.gl-select{display:grid;gap:6px;color:#b9bcc2;font-size:.95rem}
.gl-num{display:flex;align-items:center;border:2px solid #4a4d53;background:#2e3035}
.gl-num:focus-within{border-color:var(--yellow)}
.gl-num input{width:100%;min-width:0;min-height:48px;padding:0 4px 0 12px;border:0;background:transparent;color:#fff;font:600 1.35rem/1 "Barlow Condensed",sans-serif;outline:0}
.gl-num i{padding-right:12px;font-style:normal;color:#b9bcc2}
.gl-select select{min-height:48px;padding:0 12px;border:2px solid #4a4d53;background:#2e3035;color:#fff}
.gl-calc-out{grid-area:out;align-self:start}
.gl-section-svg{width:100%;height:auto;background:#c9dbe6}
.gl-section-svg *{transition:all .35s cubic-bezier(.2,.7,.1,1)}
.gl-results{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #4a4d53}
.gl-results div{padding:18px 16px 18px 0}
.gl-results div+div{padding-left:16px;border-left:1px solid #4a4d53}
.gl-results dt{color:#b9bcc2;font-size:.92rem}
.gl-results b{font:800 clamp(2.4rem,4.6vw,3.6rem)/1 "Barlow Condensed",sans-serif}
.gl-results span{color:#b9bcc2;font-weight:600}
.gl-loads b{color:var(--yellow)}
.gl-trucks{display:flex;flex-wrap:wrap;gap:6px 4px;padding:16px 0 4px;min-height:40px}
.gl-trucks svg{width:28px;height:16px;color:var(--yellow)}
.gl-trucks span{align-self:center;margin-left:6px;color:#b9bcc2;font-size:.9rem}
.gl-fine{margin-top:10px;color:#9a9ea5;font-size:.88rem}

.gl-table-wrap{overflow-x:auto;border-top:3px solid var(--asphalt)}
.gl-table{width:100%;min-width:680px;border-collapse:collapse}
.gl-table th,.gl-table td{padding:16px 16px 16px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.gl-table thead th{font-weight:600;color:var(--steel);font-size:.92rem;padding-top:12px}
.gl-table tbody th{font:600 1.3rem/1.15 "Barlow Condensed",sans-serif}
.gl-table td{color:var(--steel)}
.gl-table td:nth-child(2){color:var(--asphalt);font-weight:600;white-space:nowrap}

.gl-locate{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 28px;align-items:start;margin:0 var(--gut);padding:clamp(24px,3vw,36px);background:var(--paper);border-left:8px solid var(--yellow)}
.gl-locate svg{width:44px;height:44px;color:var(--asphalt)}
.gl-locate h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.gl-locate p{margin-top:10px;color:var(--steel)}

.gl-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:st;border-top:3px solid var(--asphalt)}
.gl-steps li{counter-increment:st;padding:20px 20px 0 0}
.gl-steps li+li{padding-left:20px;border-left:1px solid var(--rule)}
.gl-steps li::before{content:counter(st);display:block;font:800 3.4rem/1 "Barlow Condensed",sans-serif;color:var(--yellow-d);margin-bottom:10px}
.gl-steps p{margin-top:6px;color:var(--steel);font-size:.98rem}

.gl-faq-wrap{padding-top:0}
.gl-faq{max-width:980px;border-top:3px solid var(--asphalt)}
.gl-faq details{border-bottom:1px solid var(--rule)}
.gl-faq summary{display:flex;justify-content:space-between;gap:20px;padding:18px 0;cursor:pointer;list-style:none;font:600 1.45rem/1.2 "Barlow Condensed",sans-serif}
.gl-faq summary::-webkit-details-marker{display:none}
.gl-faq summary::after{content:"+";font-weight:800;transition:transform .25s}
.gl-faq details[open] summary::after{transform:rotate(45deg)}
.gl-faq details p{padding-bottom:20px;color:var(--steel)}

.gl-dispatch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 6vw;align-items:center;padding:clamp(56px,7vw,104px) var(--gut);background:var(--yellow)}
.gl-dispatch h2{font-size:clamp(2.8rem,6vw,5.4rem)}
.gl-dispatch>div>p{margin-top:14px;font-weight:500}
.gl-ticket{padding:clamp(22px,3vw,32px);background:var(--paper);border:2px solid var(--asphalt);box-shadow:8px 8px 0 var(--asphalt)}
.gl-ticket-h{font:800 1.4rem/1 "Barlow Condensed",sans-serif;text-transform:uppercase;padding-bottom:12px;margin-bottom:12px;border-bottom:2px dashed var(--rule)}
.gl-ticket [data-ticket]{font-size:1.15rem;font-weight:500;margin-bottom:20px}
.gl-ticket .gl-btn{background:var(--asphalt);color:var(--yellow);border-color:var(--asphalt)}
.gl-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;padding:28px var(--gut);background:var(--asphalt);color:#b9bcc2;font-size:.9rem}
.gl-brand-sm{font:800 1.4rem/1 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--yellow)}

/* SVG cross-section colours */
.gl-section-svg .s-top{fill:var(--topsoil)}.gl-section-svg .s-sub{fill:var(--subsoil)}.gl-section-svg .s-clay{fill:var(--clay)}.gl-section-svg .s-rock{fill:var(--rock)}
.gl-section-svg .s-cut{fill:#c9dbe6}
.gl-section-svg .s-edge{fill:none;stroke:var(--asphalt);stroke-width:2.5;stroke-dasharray:7 5}
.gl-section-svg .s-dim{stroke:var(--asphalt);stroke-width:1.5}
.gl-section-svg .s-t{fill:var(--asphalt);font:600 15px "Barlow Condensed",sans-serif}
.gl-section-svg .s-tl{fill:#f2f1ec;font:500 12px "Barlow",sans-serif}
.gl-section-svg .s-pile{fill:var(--subsoil);stroke:var(--topsoil);stroke-width:1}
.gl-section-svg .s-grass{fill:#5f7d3f}

@media (max-width:1100px){
  .gl-calc{grid-template-columns:1fr;grid-template-areas:"head" "form" "out"}
  .gl-steps{grid-template-columns:1fr 1fr}
  .gl-steps li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:860px){
  .gl-menu{display:block}
  .gl-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 20px;background:var(--asphalt)}
  .gl-nav.open{display:flex}
  .gl-nav a:not(.gl-btn){padding:14px 0;border-bottom:1px solid #3c3f45}
  .gl-nav .gl-btn{margin-top:14px}
  .gl-head,.gl-calc-head,.gl-dispatch{grid-template-columns:1fr}
  .gl-jobs{grid-template-columns:1fr}
  .gl-jobs article{border-right:0!important;padding-left:0!important}
  .gl-hero-card{margin-top:-80px}
}
@media (max-width:560px){
  .gl-dims{grid-template-columns:1fr 1fr}
  .gl-dims label:last-child{grid-column:1/-1}
  .gl-results{grid-template-columns:1fr 1fr}
  .gl-results .gl-loads{grid-column:1/-1;border-left:0!important;padding-left:0!important;border-top:1px solid #4a4d53}
  .gl-steps{grid-template-columns:1fr}
  .gl-steps li{border-left:0!important;padding-left:0!important;border-bottom:1px solid var(--rule);padding-bottom:16px}
  .gl-locate{grid-template-columns:1fr}
}