/* PHILLIPS CONTRACTING - full-site mockup design system (taste-skill pass) */
:root{
  --bg:#0e0c0a; --bg2:#15110c; --panel:#1b160f; --panel2:#13100b;
  --line:rgba(214,184,120,.16); --line2:rgba(255,255,255,.08);
  --gold:#A3844B; --goldb:#EEC75E; --goldd:#7c6334; --ink:#14110a;
  --tx:#efe9dc; --mut:#b2aa98; --mut2:#8a8270;
  --f-d:'Archivo Black',sans-serif; --f-c:'Oswald',sans-serif; --f-b:'Inter',sans-serif; --f-s:'Caveat',cursive;
  --r:2px; --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* anchors: instant (smooth scrolling through deferred sections lands off target); clear the sticky nav */
[id]{scroll-margin-top:84px}
body{background:var(--bg);color:var(--tx);font-family:var(--f-b);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.d{font-family:var(--f-d);text-transform:uppercase;line-height:1.02;letter-spacing:.2px}
.eye{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.34em;font-size:12px;color:var(--gold);font-weight:600}
.gold-grad{background:linear-gradient(180deg,#F3D67E,#A3844B);-webkit-background-clip:text;background-clip:text;color:transparent}
.mut{color:var(--mut)}
.script{font-family:var(--f-s);text-transform:none;letter-spacing:0}
.btn{display:inline-block;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:13px;padding:15px 28px;border-radius:var(--r);border:1.5px solid transparent;transition:transform .15s,background .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-g{background:var(--gold);color:var(--ink)} .btn-g:hover{background:var(--goldb)}
.btn-o{border-color:rgba(214,184,120,.55);color:var(--tx)} .btn-o:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-k{background:var(--ink);color:var(--tx)}
.row{display:flex;gap:14px;flex-wrap:wrap}

/* topbar + nav */
.top{border-bottom:1px solid var(--line2);font-family:var(--f-c);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--mut2)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:14px}
.top a{color:var(--goldb);text-decoration:underline;text-underline-offset:3px}
.nav{position:sticky;top:0;z-index:40;background:rgba(14,12,10,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:11px}
.logo .pc{font-family:var(--f-d);font-size:26px;letter-spacing:-1.5px}
.logo .pcmark{height:34px;width:auto;display:block;flex:none}
.logo .logo-img{height:42px;width:auto;display:block;flex:none}
.footer .logo .logo-img,body>footer .logo .logo-img{height:36px}
.footer .logo .pcmark,body>footer .logo .pcmark{height:30px}
.logo .wm{font-family:var(--f-c);text-transform:uppercase;font-size:13px;letter-spacing:.16em;line-height:1.04}
.logo .wm b{display:block;color:var(--gold);font-weight:600}
.logo .wm i{display:block;font-style:normal;font-size:8px;letter-spacing:.36em;color:var(--mut2);margin-top:1px}
/* faq */
.faq{max-width:900px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.04em;font-size:16px;color:var(--tx);display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--goldb);font-size:24px;font-family:var(--f-d);line-height:1;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--mut);font-size:15px;max-width:78ch}
/* legal / prose page */
.legal{max-width:860px;margin:0 auto}
.legal p{color:var(--mut);margin-top:14px;font-size:15.5px}
.legal h2{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.05em;font-size:18px;margin-top:36px;color:var(--tx)}
.legal ul{margin-top:12px;padding-left:20px;color:var(--mut);font-size:15.5px}
.legal li{margin-top:8px}
.legal a{color:var(--goldb);text-decoration:underline;text-underline-offset:3px}
.menu{display:flex;gap:4px}
.menu a{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:#dcd6c8;padding:8px 11px}
.menu a:hover{color:var(--goldb)}
.menu a.on{color:var(--gold)}

/* hero - home full bleed */
.hero{position:relative;min-height:780px;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.92),rgba(10,8,6,.66) 42%,rgba(10,8,6,.34) 75%,rgba(10,8,6,.55))}
.hero .scrim2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.96),rgba(10,8,6,.4) 30%,transparent 62%)}
.hero .wrap{position:relative;padding-top:90px;padding-bottom:64px}
.hero h1{font-size:clamp(36px,4.4vw,64px)}
.hero .sub{margin-top:22px;max-width:46ch;font-size:18px;color:#e4ddcd}
.hero .row{margin-top:34px}

/* hero - inner page (shorter, image right or banner) */
.phero{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.phero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.phero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.92),rgba(10,8,6,.62) 55%,rgba(10,8,6,.4))}
.phero .wrap{position:relative;padding-top:70px;padding-bottom:54px}
.phero h1{font-size:clamp(38px,5vw,68px);max-width:16ch}
.phero .sub{margin-top:18px;max-width:52ch;font-size:18px;color:#e4ddcd}
.phero .row{margin-top:28px}

/* ribbon */
.ribbon{background:#0a0908;border-bottom:1px solid var(--line)}
.ribbon .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 32px}
.rb{padding:4px 30px;border-left:1px solid var(--line)}
.rb:first-child{border-left:0;padding-left:0}
.rb .n{font-family:var(--f-d);font-size:30px;line-height:1}
.rb .l{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--mut);margin-top:9px}

/* sections */
section{padding:96px 0}
.head{max-width:64ch}
.head h2{font-size:clamp(28px,3.4vw,46px);margin-top:14px}
.head p{margin-top:18px;color:var(--mut);font-size:17px;max-width:56ch}
.lead{font-size:18px;color:#e0d9c9}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.tile{position:relative;min-height:330px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end}
.tile.big{grid-column:span 2}
.tile.full{grid-column:1/-1}
.tile .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s}
.tile:hover .ph{transform:scale(1.04)}
.tile .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,4,.92) 4%,rgba(8,6,4,.2) 60%,rgba(8,6,4,.45))}
.tile .c{position:relative;padding:26px;width:100%}
.tile .k{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--goldb)}
.tile h3{font-family:var(--f-d);text-transform:uppercase;font-size:24px;margin:8px 0 6px}
.tile p{color:#d4ccba;font-size:14px;max-width:44ch}
.tile .go{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--goldb);margin-top:14px;display:inline-block}
.tile.gold{background:var(--gold);border-color:var(--gold)}
.tile.gold .c,.tile.gold h3,.tile.gold .go{color:var(--ink)} .tile.gold .k{color:var(--ink)} .tile.gold p{color:var(--ink)}

/* band / e2e / supergraphic */
.band{background:var(--bg2);position:relative;overflow:hidden}
.band.alt{background:var(--bg)}
.super{position:relative;overflow:hidden}
.super:before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(214,184,120,.07),transparent 52%);pointer-events:none}
.social{display:flex;gap:13px;margin-top:12px}
.social a{display:inline-flex;color:#cfc7b6;transition:color .25s ease,transform .25s var(--ease)}
.social a:hover{color:var(--goldb);transform:translateY(-2px)}
.social svg{display:block}
.split{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split h2{font-size:clamp(28px,3.6vw,50px)}
.split p{color:var(--mut);margin-top:18px;font-size:17px;max-width:48ch}
.ticks{list-style:none}
.ticks li{position:relative;padding:15px 0 15px 34px;border-top:1px solid var(--line);font-size:16px;color:#e0d9c9}
.ticks li:first-child{border-top:0}
.ticks li:before{content:"";position:absolute;left:2px;top:20px;width:13px;height:13px;background:var(--gold);clip-path:polygon(0 0,100% 50%,0 100%)}
.ticks li b{display:block;font-weight:500;color:var(--tx)} .ticks li span{color:var(--mut);font-size:14.5px}

/* sectors / icon rows */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:42px}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px}
.ic{display:flex;gap:16px;align-items:flex-start}
.ic .dot{flex:0 0 50px;height:50px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);color:var(--goldb);font-size:18px}
.ic h3{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.06em;font-size:16px;font-weight:600;margin-bottom:5px}
.ic p{color:var(--mut);font-size:14.5px}

/* work cards */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.wc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.wc .bar{width:38px;height:4px;background:var(--gold);margin-bottom:20px}
.wc h3{font-family:var(--f-d);text-transform:uppercase;font-size:18px;margin-bottom:14px}
.wc ul{list-style:none}
.wc li{padding:10px 0;border-top:1px solid var(--line2);color:var(--mut);font-size:14.5px}
.wc li:first-child{border-top:0}

/* project split + grid */
.proj{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:44px}
.proj .img{background-size:cover;background-position:center;min-height:440px}
.proj .body{padding:50px;background:var(--panel)}
.proj h3{font-size:clamp(24px,2.6vw,36px);margin:12px 0 16px}
.proj .big{font-family:var(--f-d);font-size:54px;line-height:1;margin:24px 0 6px}
.proj .blab{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--mut)}
.proj .meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.proj .meta span{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--mut2);display:block}
.proj .meta b{font-weight:500;font-size:15px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.pcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);display:block}
.pcard .img{height:210px;background-size:cover;background-position:center}
.pcard .c{padding:22px}
.pcard .cat{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--goldb)}
.pcard h3{font-family:var(--f-d);text-transform:uppercase;font-size:18px;margin:8px 0 8px}
.pcard p{color:var(--mut);font-size:14px}

/* product grid (sand & metal) */
.band-gold{background:var(--gold);color:var(--ink);text-align:center;padding:14px 16px;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:600}
.band-gold span{padding:0 10px;white-space:nowrap}
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.prod{border:1px solid var(--line);background:var(--panel);padding:18px;border-radius:var(--r)}
.prod b{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.05em;display:block;font-size:15px}
.prod span{font-size:13px;color:var(--mut2)}

/* careers split */
.careers{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.careers .panel{background:var(--gold);color:var(--ink);padding:84px 56px 84px max(32px,calc((100vw - var(--max))/2 + 32px))}
.careers .panel h2{font-family:var(--f-d);text-transform:uppercase;font-size:clamp(30px,3.6vw,50px);margin-bottom:18px;line-height:1.02}
.careers .panel .hire{font-family:var(--f-s);text-transform:none;font-size:1.15em;letter-spacing:0}
.careers .panel p{font-size:16.5px;max-width:42ch;color:var(--ink)}
.careers .panel .row{margin-top:26px}
.careers .img{background-size:cover;background-position:center;min-height:440px}

/* role cards / form */
.roles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:42px}
.role{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:30px}
.role .tag{display:inline-block;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding:4px 11px;border-radius:var(--r);margin-bottom:14px}
.tag-open{background:var(--gold);color:var(--ink)} .tag-soon{background:rgba(214,184,120,.18);color:var(--goldb);border:1px solid var(--line)}
.role h3{font-family:var(--f-d);text-transform:uppercase;font-size:20px;margin-bottom:10px}
.role p{color:var(--mut);font-size:14.5px}
.form{max-width:760px;margin-top:36px}
.form .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin:16px 0 6px;color:var(--mut)}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #3a342a;background:#201d17;color:var(--tx);font-family:var(--f-b);font-size:15px;border-radius:var(--r)}
textarea{min-height:120px}

/* cross-sell band */
.xsell{background:var(--gold);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding:34px 0}
.xsell p{font-weight:500;max-width:52ch}

/* final cta */
.fcta{position:relative;text-align:center;background:#0a0908;overflow:hidden}
.fcta:before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(163,132,75,.16),transparent 60%)}
.fcta .wrap{position:relative}
.fcta h2{font-size:clamp(30px,4.4vw,60px)}
.fcta p{color:var(--mut);margin:18px auto 0;max-width:50ch;font-size:17px}
.fcta .row{justify-content:center;margin-top:32px}

/* footer */
body>footer{background:#080706;border-top:1px solid var(--line);padding:62px 0 28px;font-size:14px;color:var(--mut)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:30px}
body>footer h3{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--tx);margin-bottom:14px;font-weight:600}
body>footer a{display:block;padding:5px 0;color:var(--mut)} body>footer a:hover{color:var(--goldb)}
.fleg{border-top:1px solid var(--line2);margin-top:46px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--mut2);font-family:var(--f-c);text-transform:uppercase;letter-spacing:.1em}

.pend{display:inline-block;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.08em;font-size:10px;background:rgba(124,99,52,.28);color:var(--goldb);border:1px solid rgba(214,184,120,.3);padding:2px 8px;border-radius:var(--r);vertical-align:middle}

/* competency blocks (Connekt core-competencies depth) */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:42px}
.comp{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px}
.comp .ico{width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--goldb);font-family:var(--f-d);font-size:16px;margin-bottom:18px}
.comp h3{font-family:var(--f-d);text-transform:uppercase;font-size:19px;margin-bottom:12px}
.comp p{color:var(--mut);font-size:14.5px;margin-bottom:14px}
.comp ul{list-style:none}
.comp li{padding:9px 0 9px 24px;border-top:1px solid var(--line2);color:#d9d2c2;font-size:13.5px;position:relative}
.comp li:before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;background:var(--gold);clip-path:polygon(0 0,100% 50%,0 100%)}

/* team cards (initials, no photos per Todd) */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.tm{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.tm.lead{grid-column:span 2;background:var(--panel2)}
.tm .av{width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#F3D67E,#A3844B);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-size:17px;margin-bottom:14px}
.tm h3{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.04em;font-size:15px;font-weight:600}
.tm .rl{color:var(--goldb);font-family:var(--f-c);text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin:3px 0 9px}
.tm p{color:var(--mut);font-size:13.5px}

/* management / org structure */
.org{margin-top:42px}
.org .top{display:flex;justify-content:center}
.org .node{background:var(--gold);color:var(--ink);border-radius:var(--r);padding:14px 26px;text-align:center;min-width:200px}
.org .node b{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.08em;font-size:15px;display:block}
.org .node span{font-size:12px;color:var(--ink)}
.org .stem{width:1px;height:28px;background:var(--line);margin:0 auto}
.org .branches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.org .head{background:var(--panel);border:1px solid var(--line);text-align:center;padding:12px;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600;border-radius:var(--r);color:var(--goldb)}
.org ul{list-style:none;margin-top:10px}
.org li{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px;margin-top:8px;text-align:center;color:var(--mut);font-size:13px}

/* associations */
.assoc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.as{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:26px;text-align:center}
.as .b{font-family:var(--f-d);text-transform:uppercase;font-size:17px;margin-bottom:8px}
.as p{color:var(--mut);font-size:13.5px}

/* detailed process timeline */
.steps{margin-top:42px;counter-reset:st}
.steps .s{display:grid;grid-template-columns:66px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.steps .s:last-child{border-bottom:1px solid var(--line)}
.steps .s .n{font-family:var(--f-d);font-size:30px;background:linear-gradient(180deg,#F3D67E,#A3844B);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.steps .s .n:before{counter-increment:st;content:"0" counter(st)}
.steps .s h3{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.06em;font-size:17px;font-weight:600;margin-bottom:7px}
.steps .s p{color:var(--mut);font-size:14.5px;max-width:78ch}

/* multi-paragraph prose */
.prose p{color:var(--mut);font-size:16px;margin-top:15px;max-width:70ch}
.prose p:first-child{margin-top:0}
.prose p b{color:var(--tx);font-weight:500}
.prose.lead2 p{font-size:17px;color:#d9d2c2}

@media(max-width:980px){.cols2,.team,.org .branches,.assoc{grid-template-columns:1fr}.tm.lead{grid-column:span 1}}
@media(max-width:760px){.cols2,.team,.assoc{grid-template-columns:1fr}.steps .s{grid-template-columns:48px 1fr;gap:16px}}

@media(max-width:980px){
  .split,.proj,.careers,.cols3,.work{grid-template-columns:1fr}
  .cols4,.prodgrid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr} .roles{grid-template-columns:1fr}
  .proj .img{min-height:280px}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .menu{display:none}
  .ribbon .wrap{grid-template-columns:1fr 1fr;gap:22px 0}
  .rb{padding:4px 18px;border-left:0;padding-left:0}
  .bento,.pgrid,.cols4,.prodgrid,.form .frow{grid-template-columns:1fr}.tile.big{grid-column:span 1}
  .careers .panel{padding:54px 22px} section{padding:66px 0}
}

/* ============ media + photo components (2026 build pass) ============ */
/* parallax photo band to break up text-heavy pages */
.parallax{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;background-attachment:scroll;background-color:#1b1813}
.parallax::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,13,9,.55),rgba(15,13,9,.78))}
.parallax .wrap{position:relative;z-index:1;max-width:760px}
.parallax .eye{display:inline-block}
.parallax h2{margin-top:10px}
.parallax p{margin-top:14px;color:#e8e1d2}
@media(max-width:760px){.parallax{min-height:320px}}

/* horizontal 16:9 video placeholder */
.vidh{position:relative;aspect-ratio:16/9;width:100%;background-size:cover;background-position:center;background-color:#1b1813;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vidh::after{content:"";position:absolute;inset:0;background:rgba(8,7,5,.40)}
.play{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;background:rgba(163,132,75,.94);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.vlabel{position:absolute;left:16px;bottom:14px;z-index:1;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:6px 11px;border-radius:3px}

/* vertical 9:16 video placeholders (social reel) */
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.vidv{position:relative;width:100%;padding-bottom:177.78%;background-size:cover;background-position:center;background-color:#1b1813;border-radius:12px;overflow:hidden}
.vidv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vidv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(8,7,5,.3);transition:opacity .35s var(--ease)}
.vidv.playing::after{opacity:0}
.vidv .vlabel{z-index:3}
.vidv .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:60px;height:60px;font-size:20px;border:0;cursor:pointer;padding:0}
.vidv.playing .play{display:none}
@media(max-width:760px){.reel{grid-template-columns:repeat(3,1fr);gap:8px}}

/* team: lead feature (image left, text right) + square cards */
.tlead{display:grid;grid-template-columns:.82fr 1.18fr;gap:36px;align-items:center}
.tlead .ph{aspect-ratio:1/1;background-size:cover;background-position:center;border:1px solid var(--line);border-radius:var(--r);background-color:#211c15}
.tlead .rl{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--goldb);margin:8px 0 14px}
@media(max-width:760px){.tlead{grid-template-columns:1fr;gap:20px}.tlead .ph{max-width:320px}}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr 1fr}}
.tsq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.tsq .ph{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#211c15;display:flex;align-items:center;justify-content:center}
.tsq .ph span{font-family:var(--f-d);font-size:34px;color:#4a4339}
.tsq .c{padding:15px 16px}
.tsq h3{font-family:var(--f-d);text-transform:uppercase;font-size:15px;margin:0 0 3px}
.tsq .rl{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--goldb);margin-bottom:7px}
.tsq p{color:var(--mut);font-size:12.5px;line-height:1.5}

/* ============ craft + interaction layer (impeccable pass) ============ */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* surfaces lift + take a gold edge on hover */
.pcard,.wc,.tsq,.role,.vidh,.vidv{transition:transform .5s var(--ease),border-color .35s var(--ease),box-shadow .4s var(--ease)}
.pcard:hover,.wc:hover,.tsq:hover{transform:translateY(-4px);border-color:rgba(214,184,120,.45);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.role:hover{border-color:rgba(214,184,120,.38)}

/* image zoom inside cards (parents already overflow:hidden) */
.pcard .img{transition:transform .7s var(--ease)}
.pcard:hover .img{transform:scale(1.06)}
.proj{overflow:hidden}
.proj .img{transition:transform .9s var(--ease)}
.proj:hover .img{transform:scale(1.04)}

/* video placeholders: play button pulses, frame warms */
.vidh .play,.vidv .play{transition:transform .45s var(--ease),box-shadow .35s var(--ease)}
.vidh:hover,.vidv:hover{border-color:rgba(214,184,120,.5)}
.vidh:hover .play{transform:scale(1.1);box-shadow:0 12px 44px rgba(163,132,75,.5)}
.vidv:hover .play{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 44px rgba(163,132,75,.5)}

/* nav: gold underline grows from the left */
.menu a{position:relative}
.menu a:after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1.5px;background:var(--goldb);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:hover:after,.menu a.on:after{transform:scaleX(1)}

/* arrow links nudge forward */
.go{display:inline-block;transition:transform .35s var(--ease),color .25s ease}
.tile:hover .go,.pcard:hover .go,a.go:hover{transform:translateX(5px)}

/* buttons: smoother, slight lift, gold glow */
.btn{transition:transform .25s var(--ease),background .25s ease,color .25s ease,box-shadow .3s var(--ease)}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(163,132,75,.34)}
.btn-o:hover,.btn-k:hover{transform:translateY(-2px)}

/* sector dot fills as you hover its row */
.ic .dot{transition:background .3s var(--ease),color .3s ease}
.ic:hover .dot{background:var(--gold);color:var(--ink)}

/* tick rows ease open */
.ticks li{transition:padding-left .3s var(--ease)}
.ticks li:before{transition:transform .3s var(--ease)}
.ticks li:hover{padding-left:40px}
.ticks li:hover:before{transform:translateX(5px)}

/* footer links warm to gold */
body>footer .fgrid a,.legal a{transition:color .25s ease}
body>footer .fgrid a:hover{color:var(--goldb)}

/* keyboard focus is visible and on-brand */
a:focus-visible,.btn:focus-visible,summary:focus-visible,details:focus-visible{outline:2px solid var(--goldb);outline-offset:3px;border-radius:2px}

/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .pcard:hover,.wc:hover,.tsq:hover,.btn-g:hover,.btn-o:hover,.btn-k:hover{transform:none}
}

/* ============ STAGE 2 (2026-06-30): mobile nav, two-tone video, line icons, photo thumbs ============ */

/* hamburger + slide-in drawer */
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex:none;position:relative;padding:0}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s var(--ease),opacity .2s ease}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.no-scroll{overflow:hidden}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(8,7,5,.62);opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer.open{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--bg2);border-left:1px solid var(--line);padding:124px 26px 32px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;display:flex;flex-direction:column}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__menu{display:flex;flex-direction:column}
.drawer__menu a{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:#dcd6c8;padding:15px 2px;border-bottom:1px solid var(--line2)}
.drawer__menu a.on{color:var(--gold)}
.drawer__menu a:active{color:var(--goldb)}
.drawer__cta{margin-top:26px;text-align:center;padding:16px}
.drawer__call{margin-top:14px;text-align:center;font-family:var(--f-c);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--goldb);padding:6px}
@media(max-width:980px){
  .menu{display:none}
  .navcta{display:none}
  .burger{display:block}
}
/* keep the header (and the burger-as-X) above the open drawer so it can close */
body.no-scroll .nav{z-index:70}
/* topbar: drop the location line on small screens, centre the contact line */
@media(max-width:600px){
  .top .wrap{justify-content:center;height:auto;min-height:38px;padding-top:7px;padding-bottom:7px;text-align:center}
  .top .wrap span:first-child{display:none}
}

/* two-tone feature video band (About) - matches CHE/CAG format */
.videoband{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px);background:linear-gradient(180deg,#211a11 0 46%,var(--bg) 46% 100%)}
.vfeature{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:#100d09;cursor:pointer}
.vfeature video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#100d09}
.vfeature__ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,4,.82),rgba(8,6,4,.12) 54%,rgba(8,6,4,.42));transition:opacity .4s ease}
.vfeature__play{position:absolute;inset:0;margin:auto;width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px);border-radius:50%;background:var(--gold);color:var(--ink);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .4s var(--ease),box-shadow .35s var(--ease)}
.vfeature:hover .vfeature__play{transform:scale(1.08);box-shadow:0 14px 46px rgba(163,132,75,.5)}
.vfeature__play svg{margin-left:5px}
.vfeature__cap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,3vw,34px);color:#fff;max-width:48ch;pointer-events:none;transition:opacity .4s ease}
.vfeature__cap b{display:block;font-family:var(--f-d);text-transform:uppercase;font-size:clamp(19px,2.4vw,30px);margin-top:8px;letter-spacing:.2px;line-height:1.08}
.vfeature.playing .vfeature__ov,.vfeature.playing .vfeature__play,.vfeature.playing .vfeature__cap{opacity:0;pointer-events:none}

/* line-style gold icons (sit inside the existing .ico / .dot frames) */
svg.licon{width:24px;height:24px;display:block;stroke:var(--goldb);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dot svg.licon{width:25px;height:25px}
.ic:hover .dot svg.licon{stroke:var(--ink)}

/* photo icon-thumbnails (civil machines/trucks; replaces letter badge) */
.pico{width:66px;height:66px;flex:none;border-radius:var(--r);background-size:cover;background-position:center;border:1px solid var(--line);margin-bottom:18px;background-color:#211c15}

/* sand & metal: product thumbnail + text row */
.prod{display:flex;gap:14px;align-items:center;padding:12px}
.prod .pthumb{width:56px;height:56px;flex:none;border-radius:var(--r);background-size:cover;background-position:center;background-color:#211c15;border:1px solid var(--line2)}
.prod .pmeta{min-width:0}
.prod.note .pthumb{display:flex;align-items:center;justify-content:center;border-color:var(--gold);background:rgba(163,132,75,.12);color:var(--goldb);font-family:var(--f-d);font-size:22px}

/* suburb SEO tag row */
.suburbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.suburbs span{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:var(--r);padding:6px 11px;background:var(--panel2);transition:border-color .25s ease,color .25s ease}
.suburbs span:hover{border-color:rgba(214,184,120,.45);color:var(--tx)}

/* form submit status message + honeypot */
.formmsg{margin-top:16px;padding:13px 16px;border-radius:var(--r);font-size:14.5px;border:1px solid var(--line)}
.formmsg.ok{background:rgba(163,132,75,.14);border-color:rgba(214,184,120,.5);color:var(--goldb)}
.formmsg.warn{background:rgba(124,99,52,.16);border-color:rgba(214,184,120,.32);color:#e8dcc0}
.formmsg.err{background:rgba(150,60,40,.16);border-color:rgba(200,90,70,.4);color:#f0c9bd}
.formmsg.sending{color:var(--mut)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* branded parallax banner: lighter overlay so the truck's Phillips livery reads; heading stays legible via shadow */
.parallax.banner::before{background:linear-gradient(rgba(12,10,7,.30),rgba(12,10,7,.40) 45%,rgba(12,10,7,.66))}
.parallax.banner .eye{text-shadow:0 1px 14px rgba(0,0,0,.7)}
.parallax.banner h2{text-shadow:0 2px 26px rgba(0,0,0,.6)}

/* photo-top card: big image above heading+text (plumbing in-house plant, haulage fleet) */
.gcard .gimg{aspect-ratio:16/10;background-size:cover;background-position:center;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;background-color:#211c15;transition:border-color .35s var(--ease),transform .5s var(--ease)}
.gcard:hover .gimg{border-color:rgba(214,184,120,.45);transform:translateY(-3px)}
.gcard h3{font-family:var(--f-c);text-transform:uppercase;letter-spacing:.06em;font-size:16px;font-weight:600;margin-bottom:6px}
.gcard p{color:var(--mut);font-size:14.5px}
.gcard .ct{display:inline-block;font-family:var(--f-d);font-size:12px;color:var(--ink);background:linear-gradient(180deg,#F3D67E,#A3844B);padding:2px 9px;border-radius:var(--r);margin-bottom:10px;letter-spacing:.02em}

/* on-site photo gallery (careers) */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.gallery .g{aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--line);border-radius:var(--r);background-color:#211c15;transition:transform .5s var(--ease),border-color .35s var(--ease)}
.gallery .g.wide{grid-column:span 2;aspect-ratio:auto}
.gallery .g:hover{transform:translateY(-3px);border-color:rgba(214,184,120,.45)}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery .g.wide{grid-column:span 2}}

/* project photo gallery (project pages): whole photos in masonry columns, mixed portrait and landscape, no cropping */
.pgal{columns:3 260px;column-gap:12px;margin-top:36px}
.pgal figure{break-inside:avoid;margin:0 0 12px}
.pgal img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);background-color:#211c15}
@media(max-width:760px){.pgal{columns:2;column-gap:8px;margin-top:28px}.pgal figure{margin-bottom:8px}}

/* ============ audit defect fixes (2026-07-01) ============ */
/* footer collapses on small screens; long email wraps instead of forcing page overflow */
body>footer a{overflow-wrap:anywhere}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr;gap:34px 26px}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr;gap:28px}}
/* two-col detail grids (contact + project pages) collapse on small screens */
.dgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:46px}
.dgrid.proj2{grid-template-columns:1.55fr .95fr}
@media(max-width:900px){.dgrid,.dgrid.proj2{grid-template-columns:1fr;gap:34px}}
/* careers gallery wide tile keeps its height when it becomes a full-width row */
@media(max-width:760px){.gallery .g.wide{aspect-ratio:16/9}}

/* batch fixes (2026-07-01): ticker wraps on small screens; hero height adapts to phone viewports */
@media(max-width:600px){.band-gold{font-size:11px;letter-spacing:.12em;padding:12px 14px}.band-gold span{white-space:normal}}
@media(max-width:760px){.hero{min-height:88svh}}

/* sticky mobile call bar */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(14,12,10,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .callbar .btn{flex:1;text-align:center;padding:14px 8px;font-size:12.5px;letter-spacing:.1em;min-height:46px}
  body{padding-bottom:74px}
}
/* defer below-the-fold photo grids until they approach the viewport */
.gallery{content-visibility:auto;contain-intrinsic-size:auto 640px}
/* responsive hero: each page sets --hero (jpg), --hero-webp and --hero-m (phone) inline; old browsers keep the jpg */
.hero .bg,.phero .bg{background-image:var(--hero)}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero .bg,.phero .bg{background-image:var(--hero-webp)}
  @media(max-width:760px){.hero .bg,.phero .bg{background-image:var(--hero-m,var(--hero-webp))}}
}
/* skip rendering and image fetching for below-the-fold sections until they approach the viewport */
section:not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 800px}
@media(max-width:760px){.callbar{transform:translateY(110%);transition:transform .35s var(--ease)}.callbar.on{transform:none}}
/* responsive background photos: elements carry --pic (jpg), --pic-webp and --pic-m (phone) inline; old browsers keep the jpg */
[style*="--pic:"]{background-image:var(--pic)!important}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  [style*="--pic:"]{background-image:var(--pic-webp)!important}
  @media(max-width:760px){[style*="--pic:"]{background-image:var(--pic-m,var(--pic-webp))!important}}
}