/* Techify Me - Utility Olive design system
   Built from visual-references/mockup-4-utility-olive.html
   Deviation: button fill is #C2410C (not #E8590C) so white button text passes WCAG AA (5.2:1).
   The brighter --hivis is kept for decoration (underlines, chips, large numerals). */

@font-face{font-family:'Bricolage Grotesque';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/work-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/work-sans-latin-500-normal.woff2') format('woff2')}

:root{
  --paper:#F4F2EC;
  --olive:#3B4230;
  --olive-d:#2C3324;
  --hivis:#E8590C;
  --btn:#C2410C;
  --line:#DDD9CE;
  --dim:#6E6A5E;
  --body-text:#4a4f41;
  --disp:'Bricolage Grotesque','Trebuchet MS',Arial,sans-serif;
  --body:'Work Sans',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--olive-d);font-family:var(--body);font-size:1.05rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,iframe{max-width:100%}
a{color:inherit}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* Skip link + focus */
.skip{position:absolute;left:-999px;top:8px;background:var(--olive-d);color:#fff;padding:10px 16px;font-family:var(--disp);font-weight:700;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--olive-d);outline-offset:3px}
.band :focus-visible,.idcard :focus-visible{outline-color:#fff}

/* Header */
header.site{border-bottom:2px solid var(--olive)}
nav.main{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;flex-wrap:wrap}
.logo{font-family:var(--disp);font-weight:800;font-size:1.2rem;text-decoration:none;color:var(--olive-d)}
.logo em{font-style:normal;background:var(--hivis);color:var(--olive-d);padding:0 6px;margin-left:2px}
.links{display:flex;gap:28px;font-weight:500;font-size:.95rem}
.links a{color:var(--olive-d);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.links a:hover,.links a[aria-current="page"]{border-bottom-color:var(--hivis)}

/* Buttons: hard offset shadow, press = translate */
.btn{font-family:var(--disp);font-weight:700;font-size:.95rem;background:var(--btn);color:#fff;padding:13px 22px;text-decoration:none;box-shadow:4px 4px 0 var(--olive-d);display:inline-block;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--olive-d)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--olive-d)}
.band .btn{box-shadow:4px 4px 0 #1b2015}
.quiet{font-weight:500;color:var(--olive-d);text-decoration:underline;text-decoration-color:var(--hivis);text-decoration-thickness:2px;text-underline-offset:4px}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;padding-top:76px;padding-bottom:64px;align-items:center}
.eyebrow{display:inline-block;font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:var(--olive);color:var(--paper);padding:6px 12px;margin-bottom:26px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.3rem,4.8vw,3.5rem);line-height:1.06;letter-spacing:-.02em}
h1 mark{background:linear-gradient(transparent 62%,rgba(232,89,12,.35) 62%);color:inherit}
.sub{margin-top:26px;max-width:52ch;color:var(--body-text);font-size:1.1rem}
.hi{margin-top:18px;max-width:52ch;font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--olive)}
.cta-row{margin-top:30px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* Hero identity card (stands in for the photo until a real one exists) */
.idcard{background:var(--olive);color:var(--paper);border:2px solid var(--olive-d);box-shadow:8px 8px 0 var(--line);padding:34px 32px}
.idcard .label{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#C9CDBB}
.idcard .name{font-family:var(--disp);font-weight:800;font-size:1.9rem;line-height:1.1;margin-top:6px}
.idcard .role{margin-top:8px;color:#E3E5D8;font-size:1rem;max-width:30ch}
.idcard dl{margin-top:24px;border-top:1px solid rgba(244,242,236,.28)}
.idcard dl div{padding:12px 0;border-bottom:1px solid rgba(244,242,236,.28)}
.idcard dt{font-family:var(--disp);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#C9CDBB}
.idcard dd{font-size:.98rem;margin-top:2px}
.idcard a{color:var(--paper);text-decoration-color:var(--hivis);text-decoration-thickness:2px;text-underline-offset:3px}

/* Photo frame - ready for when a real photo exists (swap .idcard for .photo) */
.photo{border:2px solid var(--olive-d);box-shadow:8px 8px 0 var(--olive);aspect-ratio:4/5;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Trust strip */
.trust{border-top:2px solid var(--olive);border-bottom:2px solid var(--olive);padding:18px 24px;display:flex;flex-wrap:wrap;gap:10px 0;justify-content:space-between;font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.trust span+span::before{content:"/";margin:0 16px;color:var(--hivis)}

/* Sections */
section{scroll-margin-top:16px}
.prob{padding-top:76px;padding-bottom:76px}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;max-width:26ch}
h3{font-family:var(--disp);font-weight:700}
.lead{margin-top:14px;max-width:60ch;color:var(--body-text)}
.prose{max-width:62ch}
.prose p{margin-top:18px;color:var(--body-text)}
.prose p:first-child{margin-top:0}

.list{margin-top:40px}
.list div{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);max-width:780px}
.list b{flex:none;width:34px;height:34px;border:2px solid var(--olive-d);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:.8rem}

.pillars{padding-bottom:76px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.card{background:#fff;border:2px solid var(--olive-d);padding:30px;box-shadow:6px 6px 0 var(--line)}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card h3 span{color:var(--hivis)}
.card p{font-size:.98rem;color:var(--body-text)}
.card ul{margin-top:14px;padding-left:0;list-style:none}
.card li{font-size:.98rem;color:var(--body-text);padding:8px 0 8px 20px;border-top:1px solid var(--line);position:relative}
.card li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:8px;background:var(--hivis)}

.steps{background:#fff;border-top:2px solid var(--olive);border-bottom:2px solid var(--olive);padding:76px 0}
.stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.step b{display:block;font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--hivis);margin-bottom:8px}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.95rem;color:var(--body-text)}

.offer{padding-top:76px;padding-bottom:76px}
.offer-box{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.price{background:#fff;border:2px solid var(--olive-d);box-shadow:6px 6px 0 var(--line);padding:28px}
.price .amt{font-family:var(--disp);font-weight:800;font-size:3rem;line-height:1}
.price .amt small{font-size:1rem;font-weight:700;color:var(--dim);margin-left:6px}
.price .fixed{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin-top:8px}
.price p{margin-top:14px;font-size:.95rem;color:var(--body-text)}
.price .btn{margin-top:22px}

.testi{padding-top:76px;padding-bottom:76px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tcard{background:#fff;border:2px solid var(--olive-d);padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.tcard blockquote{font-size:.98rem;color:#3a3f32}
.tcard .who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.who b{font-family:var(--disp);font-weight:700;font-size:.95rem;display:block}
.who span{font-size:.85rem;color:var(--dim)}

.about-teaser{padding-bottom:76px}

.band{background:var(--olive);color:var(--paper);padding:76px 0}
.band h2{color:var(--paper)}
.band .sub{color:#C9CDBB}
.band .fine{margin-top:18px;font-size:.9rem;color:#C9CDBB}

/* Inner pages */
.page-hero{padding:76px 0 56px;border-bottom:2px solid var(--olive)}
.page-hero .sub{max-width:60ch}
.block{padding:64px 0;border-bottom:1px solid var(--line)}
.block:last-of-type{border-bottom:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.checks{margin-top:24px;list-style:none;padding:0;max-width:62ch}
.checks li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative;color:var(--body-text)}
.checks li::before{content:"";position:absolute;left:0;top:1.3em;width:12px;height:12px;border:2px solid var(--olive-d)}
.rules{margin-top:28px;list-style:none;padding:0;max-width:66ch}
.rules li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--body-text)}
.rules strong{font-family:var(--disp);font-weight:700;color:var(--olive-d)}
.booking{margin-top:32px;background:#fff;border:2px solid var(--olive-d);box-shadow:6px 6px 0 var(--line);padding:12px}
.booking iframe{width:100%;height:680px;border:0;display:block}
.contact-lines{margin-top:28px;list-style:none;padding:0}
.contact-lines li{padding:12px 0;border-bottom:1px solid var(--line)}
.contact-lines b{font-family:var(--disp);font-weight:700;margin-right:8px}

/* Footer */
footer.site{border-top:2px solid var(--olive);margin-top:0}
footer.site .wrap{padding-top:32px;padding-bottom:46px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;font-family:var(--disp);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer.site a{text-decoration:none;color:var(--olive-d)}
footer.site a:hover{text-decoration:underline;text-decoration-color:var(--hivis);text-decoration-thickness:2px;text-underline-offset:4px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:48px}
  .grid,.tgrid,.three{grid-template-columns:1fr}
  .stepgrid{grid-template-columns:1fr 1fr}
  .offer-box{grid-template-columns:1fr}
  .links{order:3;width:100%;gap:22px;flex-wrap:wrap}
  nav.main{padding:16px 0}
  .trust{flex-direction:column;gap:6px}
  .trust span+span::before{display:none}
  .prob,.testi,.offer{padding-top:56px;padding-bottom:56px}
  .pillars,.about-teaser{padding-bottom:56px}
  .steps,.band{padding-top:56px;padding-bottom:56px}
  .booking iframe{height:760px}
}
@media (max-width:480px){
  .stepgrid{grid-template-columns:1fr}
  .card,.tcard,.price{padding:22px}
  .idcard{padding:26px 22px}
  body{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}

h2.wide{max-width:36ch}
h1,h2{text-wrap:balance}