:root { --black:#0d0d0d; --white:#f5f3ee; --yellow:#f5c400; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--black);font-family:'Barlow',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 48px;background:rgba(245,243,238,0.95);backdrop-filter:blur(8px);border-bottom:1px solid #d4d0c4;}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--black);text-decoration:none;}
.logo span{background:var(--yellow);color:var(--black);padding:0 4px;}
.nav-actions{display:flex;align-items:center;gap:16px;}
.nav-link{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.88rem;letter-spacing:0.08em;text-transform:uppercase;color:#5d5951;text-decoration:none;}
.nav-link:hover{color:var(--black);}
nav a.cta-nav{background:var(--yellow);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.95rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:10px 24px;}
footer .logo{color:var(--white);}
footer .logo span{background:var(--yellow);color:var(--black);padding:0 4px;}

.hero{min-height:100vh;display:grid;place-items:center;padding:80px 48px 60px;position:relative;overflow:hidden;}
.hero-inner{max-width:900px;width:100%;}
.hero-tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.85rem;letter-spacing:0.15em;text-transform:uppercase;color:#5d5951;border:1px solid #d4d0c4;padding:6px 14px;margin-bottom:32px;opacity:0;animation:fadeUp 0.6s ease forwards 0.2s;}
h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(3.5rem,9vw,7rem);line-height:0.95;text-transform:uppercase;opacity:0;animation:fadeUp 0.7s ease forwards 0.4s;}
h1 em{font-style:normal;background:var(--yellow);color:var(--black);padding:0 6px;display:inline;}
.hero-sub{margin-top:32px;font-size:1.15rem;color:#5d5951;max-width:540px;opacity:0;animation:fadeUp 0.7s ease forwards 0.6s;}
.hero-link{margin-top:32px;display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--black);background:none;border:none;font-size:1rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;opacity:0;animation:fadeUp 0.7s ease forwards 0.8s;}
.btn-primary{background:var(--yellow);color:var(--black);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;padding:16px 36px;display:inline-block;transition:transform 0.15s,box-shadow 0.15s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.btn-ghost{border:1px solid #d4d0c4;color:var(--black);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:16px 36px;display:inline-block;transition:border-color 0.15s,color 0.15s,background 0.15s;}
.btn-ghost:hover{border-color:var(--black);background:var(--black);color:var(--white);}

/* Trust bar */
.trust{display:flex;gap:48px;padding:36px 48px;border-top:1px solid #d4d0c4;border-bottom:1px solid #d4d0c4;flex-wrap:wrap;justify-content:center;}
.trust-item{display:flex;align-items:flex-start;gap:16px;}
.trust-icon{width:40px;height:40px;background:rgba(13,13,13,0.05);border:1px solid rgba(13,13,13,0.12);display:grid;place-items:center;flex-shrink:0;}
.trust-icon .material-icons-outlined{font-size:20px;line-height:1;color:var(--black);}
.trust-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:4px;}
.trust-desc{font-size:0.88rem;color:#5d5951;}
.trade-hub-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:#d4d0c4;}
@media(min-width:700px){.trade-hub-list{grid-template-columns:repeat(3,1fr);}}
.trade-hub-link{display:block;background:var(--white);color:var(--black);text-decoration:none;padding:24px 22px;border-top:3px solid transparent;transition:background 0.15s,border-color 0.15s;}
.trade-hub-link:hover{background:#eeecea;border-top-color:var(--yellow);}
.trade-hub-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;}
.trade-hub-copy{font-size:0.88rem;color:#5d5951;line-height:1.5;}
.home-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:#d4d0c4;}
.home-faq-item{background:var(--white);padding:24px 22px;}
.home-faq-item h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.2rem;line-height:1.05;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;color:var(--black);}
.home-faq-item p{font-size:0.94rem;line-height:1.55;color:#4f4b44;}

/* Sections */
.section{padding:60px 48px;max-width:1100px;margin:0 auto;}
.section-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.8rem;letter-spacing:0.18em;text-transform:uppercase;color:#5d5951;margin-bottom:16px;}
h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(2.2rem,5vw,3.8rem);text-transform:uppercase;line-height:1;margin-bottom:36px;}

/* Scroll offset for fixed nav (prevents focused elements being obscured) */
:target,[id]{scroll-margin-top:80px;}

/* Packages */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--yellow);}
.package{background:var(--white);padding:40px 30px;transition:background 0.2s;display:flex;flex-direction:column;color:var(--black);}
.package:hover{background:#eeecea;}
.package.featured{background:var(--yellow);border-top:3px solid var(--black);}
.package.tmpl{border-top:3px solid #d4d0c4;}
.pkg-tag{font-family:'Barlow Condensed',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#5d5951;margin-bottom:20px;display:block;}
.package.featured .pkg-tag{color:rgba(0,0,0,0.6);}
.tmpl .pkg-tag{color:#8a8480;}
.pkg-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.8rem;text-transform:uppercase;margin-bottom:6px;line-height:1.1;}
.pkg-price{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2.8rem;color:var(--black);line-height:1;margin-bottom:2px;}
.tmpl .pkg-price{color:#8a8480;}
.pkg-gst{font-size:0.75rem;color:#5d5951;margin-bottom:2px;}
.pkg-retainer{font-family:'Barlow Condensed',sans-serif;font-size:0.82rem;font-weight:600;color:#5d5951;margin-bottom:22px;letter-spacing:0.04em;}
.pkg-retainer strong{color:var(--black);}
.package.featured .pkg-retainer,.package.featured .pkg-gst,.package.featured .pkg-delivery{color:rgba(0,0,0,0.65);}
.package.featured .pkg-retainer strong{color:var(--black);}
.tmpl .pkg-retainer{color:#8a8480;}
.pkg-delivery{font-size:0.8rem;color:#5d5951;margin-bottom:24px;font-family:'Barlow Condensed',sans-serif;letter-spacing:0.06em;text-transform:uppercase;}
.pkg-divider{height:1px;background:#d4d0c4;margin-bottom:22px;}
.package.featured .pkg-divider{background:rgba(0,0,0,0.2);}
.pkg-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:8px;flex:1;}
.pkg-features li{font-size:0.88rem;color:#2a2a2a;padding-left:18px;position:relative;}
.package.featured .pkg-features li{color:var(--black);}
.pkg-features li::before{content:'\2192' / '';position:absolute;left:0;color:var(--black);font-size:0.78rem;}
.tmpl .pkg-features li::before{color:#8a8480;}
.pkg-limit{font-size:0.75rem;color:#5d5951;font-style:italic;margin:14px 0 28px;}
.pkg-cta{display:block;text-align:center;background:transparent;border:1px solid #d4d0c4;color:var(--black);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;padding:13px;transition:all 0.15s;margin-top:auto;}
.pkg-cta:hover{background:var(--black);border-color:var(--black);color:var(--white);}
.package.featured .pkg-cta{background:var(--black);border-color:var(--black);color:var(--white);}
.package.featured .pkg-cta:hover{background:#333;border-color:#333;}

/* Templates showcase */
#templates{padding:0 0 80px;max-width:none;}
.template-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d4d0c4 var(--white);}
.template-scroll::-webkit-scrollbar{height:4px;}
.template-scroll::-webkit-scrollbar-track{background:var(--white);}
.template-scroll::-webkit-scrollbar-thumb{background:#d4d0c4;}
.template-grid{display:flex;gap:3px;background:#e0ddd6;}
.template-card{background:#0a0a0a;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:background 0.15s;flex:0 0 calc(20vw - 2.4px);min-width:220px;scroll-snap-align:start;}
.template-thumb{overflow:hidden;}
.template-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top;display:block;transition:transform 0.3s ease;}
.template-content{padding:20px 22px 24px;}
.template-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.4rem;line-height:1.05;text-transform:uppercase;color:#fff;margin-bottom:6px;}
.template-meta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#f5c400;margin-bottom:10px;}
.template-copy{font-size:0.85rem;color:#bbb;line-height:1.5;margin-bottom:16px;}
.template-link{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;color:#cfcfcf;transition:color 0.15s;}
.template-card:hover{background:#111;}
.template-card:hover .template-thumb img{transform:scale(1.04);}
.template-card:hover .template-link{color:var(--yellow);}
/* Retainer block */
.retainer-block{background:#0d0d0d;color:var(--white);border:1px solid #222;border-left:4px solid var(--yellow);padding:32px;margin-top:2px;}
.retainer-block h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.8rem;text-transform:uppercase;margin-bottom:24px;color:var(--white);}
.retainer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:#1a1a1a;}
.retainer-item{background:#0a0a0a;padding:24px 20px;}
.retainer-tier{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;color:#aaa;margin-bottom:8px;}
.retainer-price{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:2rem;color:var(--yellow);line-height:1;margin-bottom:4px;}
.retainer-desc{font-size:0.82rem;color:#aaa;}
.retainer-note{margin-top:20px;font-size:0.85rem;color:#aaa;font-style:italic;}

/* Why grid */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#d4d0c4;}
.why-item{background:var(--white);padding:32px 28px;}
.why-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:4rem;color:rgba(13,13,13,0.07);line-height:1;margin-bottom:16px;}
/* purely decorative large numbers, aria-hidden added in HTML */
.why-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:12px;}
.why-body{font-size:0.92rem;color:#5d5951;line-height:1.65;}

/* CTA / Form section */
.cta-section{background:var(--yellow);padding:70px 48px;}
.cta-inner{max-width:760px;margin:0 auto;}
.cta-section h2{color:var(--black);margin-bottom:12px;}
.cta-section .cta-sub{color:rgba(0,0,0,0.78);font-size:1.05rem;margin-bottom:48px;max-width:500px;}
.cta-contact-note{color:rgba(0,0,0,0.78);font-size:0.95rem;margin:-28px 0 32px;max-width:620px;}
.cta-contact-note a{color:inherit;font-weight:700;text-decoration:underline;}

.enquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(0,0,0,0.78);}
.field-help{font-weight:400;text-transform:none;letter-spacing:0;}
.form-field input,
.form-field select,
.form-field textarea{background:rgba(0,0,0,0.07);border:1px solid rgba(0,0,0,0.15);color:var(--black);font-family:'Barlow',sans-serif;font-size:0.95rem;padding:12px 14px;outline:2px solid transparent;outline-offset:1px;transition:border-color 0.15s,outline-color 0.15s;width:100%;-webkit-appearance:none;appearance:none;}
.form-field input:not([type="file"]),
.form-field select{height:48px;}
.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(0,0,0,0.55);}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:rgba(0,0,0,0.8);outline:3px solid rgba(0,0,0,0.8);outline-offset:1px;}
.form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.form-field textarea{resize:vertical;min-height:90px;}
.form-field input[type="file"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.file-upload{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;background:rgba(0,0,0,0.07);border:1px solid rgba(0,0,0,0.15);padding:0 10px;height:48px;overflow:hidden;}
.file-upload-btn{display:inline-flex;align-items:center;height:32px;background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.2);color:rgba(0,0,0,0.9);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;padding:0 12px;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;white-space:nowrap;flex-shrink:0;}
.file-upload-btn:hover{background:rgba(0,0,0,0.14);border-color:rgba(0,0,0,0.35);color:#000;}
.file-upload-btn:focus-visible{outline:3px solid rgba(0,0,0,0.8);outline-offset:2px;}
.file-upload-name{font-size:0.88rem;line-height:1.2;color:rgba(0,0,0,0.7);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.form-field:focus-within .file-upload{border-color:rgba(0,0,0,0.8);outline:3px solid rgba(0,0,0,0.8);outline-offset:1px;}
.btn-dark{background:var(--black);color:var(--yellow);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;letter-spacing:0.1em;text-transform:uppercase;border:none;cursor:pointer;padding:18px 44px;display:inline-block;transition:transform 0.15s;}
.btn-dark:hover{transform:translateY(-2px);}
.form-submit{margin-top:8px;grid-column:1/-1;}
.form-note{font-size:0.8rem;color:rgba(0,0,0,0.70);margin-top:10px;}
.form-status{margin-top:10px;font-size:0.82rem;color:#7a0000;font-weight:600;}
.form-status[hidden]{display:none;}
.retainer-block-spaced{margin-top:48px;}
.section-label-dark{color:rgba(0,0,0,0.8);}

footer{background:#080808;border-top:1px solid #1a1a1a;padding:40px 48px 0;}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:28px;}
footer .logo{font-size:1.2rem;}
.footer-top p{font-size:0.82rem;color:#aaa;}
.footer-contact{font-size:0.82rem;color:#aaa;}
.footer-contact a{color:#d6d6d6;text-decoration:none;}
.footer-contact a:hover{color:#f5c400;}
.footer-bottom{border-top:1px solid #1a1a1a;padding:14px 0 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-links{display:flex;align-items:center;gap:24px;}
.footer-links a{font-size:0.78rem;color:#666;text-decoration:none;transition:color 0.15s;}
.footer-links a:hover{color:#f5c400;}
.footer-resources{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.footer-resources span{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:#666;}
.footer-resources a{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:#808080;text-decoration:none;}
.footer-resources a:hover{color:#f5c400;}
.footer-legal{font-size:0.78rem;color:#444;}

/* Lost Jobs Calculator */
.calc-card{background:#eeecea;border:1px solid #d4d0c4;padding:40px;margin-top:40px;}
.calc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px;}
.calc-field{display:flex;flex-direction:column;gap:8px;}
.calc-field label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:#5d5951;}
.calc-field select,
.calc-field input[type="number"]{background:var(--white);border:1px solid #d4d0c4;color:var(--black);font-family:'Barlow',sans-serif;font-size:0.95rem;padding:12px 14px;height:48px;width:100%;outline:2px solid transparent;outline-offset:1px;transition:border-color 0.15s,outline-color 0.15s;-webkit-appearance:none;appearance:none;}
.calc-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230d0d0d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.calc-field select:focus,
.calc-field input[type="number"]:focus{border-color:#555;outline:2px solid rgba(245,196,0,0.6);}
.calc-field input[type="number"]::placeholder{color:rgba(13,13,13,0.35);}
.calc-result{border-top:1px solid #d4d0c4;padding-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;}
.calc-figure{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:3.2rem;color:var(--black);line-height:1;}
.calc-figure.calc-empty{color:#d4d0c4;font-size:2rem;}
.calc-sub{font-size:0.88rem;color:#5d5951;margin-top:6px;}
.calc-note{font-size:0.82rem;color:#8a8480;line-height:1.6;margin:20px 0 0;padding-top:20px;border-top:1px solid #d4d0c4;}
.calc-note strong{color:#5d5951;font-weight:600;}

/* Scroll reveal */
.reveal{opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity 0.55s ease,transform 0.55s ease,visibility 0.55s ease;}
.reveal.visible{opacity:1;visibility:visible;transform:none;}
.reveal-delay-1{transition-delay:0.1s;}
.reveal-delay-2{transition-delay:0.2s;}
.reveal-delay-3{transition-delay:0.3s;}
.reveal-delay-4{transition-delay:0.4s;}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* Skip link */
.skip-link{position:absolute;top:-100%;left:0;z-index:999;background:var(--black);color:var(--yellow);padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--yellow);}
.skip-link:focus{top:0;}

/* Focus styles */
:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.cta-section :focus-visible{outline-color:var(--black);}
footer :focus-visible{outline-color:var(--yellow);}

@media(max-width:768px){
nav{padding:16px 24px;}
.hero{padding:80px 24px 60px;}
.trust{padding:40px 24px;gap:20px;display:grid;grid-template-columns:1fr;justify-items:center;}
.trust-item{width:min(100%,280px);margin:0;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start;}
.section{padding:70px 24px;}
#templates{padding-bottom:48px;}
.template-card{flex:0 0 calc(45vw - 2px);}
.template-content{padding:22px 18px 20px;}
.template-name{font-size:1.25rem;line-height:1.15;}
.why-grid{grid-template-columns:1fr;}
.cta-section{padding:70px 24px;}
.enquiry-form{grid-template-columns:1fr;}
footer{padding:32px 24px 0;}
.footer-top{flex-direction:column;text-align:center;padding-bottom:24px;}
.footer-bottom{flex-direction:column;text-align:center;padding-bottom:16px;}
}
@media(max-width:480px){
nav{padding:14px 16px;}
:target,[id]{scroll-margin-top:90px;}
.template-card{flex:0 0 calc(80vw - 2px);}
.template-content{padding:18px 18px 20px;}
.template-name{font-size:1.6rem;line-height:1.12;}
.file-upload{flex-wrap:wrap;height:auto;padding:10px;}
.file-upload-name{white-space:normal;overflow:visible;text-overflow:clip;}
}