/* ============================================================
     THEME VARIABLES
     Change a color/font here and it updates EVERYWHERE on the
     page automatically — you never need to hunt through the CSS.
     ============================================================ */
  :root{
    --bg:#ffffff;              /* main page background (white) */
    --bg-alt:#f8f6f3;          /* slightly warm off-white, used for alternating section backgrounds */
    --border:rgba(20,18,16,0.09);        /* faint line color, e.g. card borders */
    --border-strong:rgba(20,18,16,0.16); /* darker line color, e.g. button outlines */
    --text:#201c18;            /* main body text color (near-black) */
    --text-dim:#5c5652;        /* secondary/lighter text, e.g. paragraphs under headings */
    --text-faint:#918b86;      /* faintest text, e.g. small labels */
    --orange:#ff6403;          /* BRAND COLOR — pulled from the logo. Buttons, links, accents. */
    --orange-deep:#e05602;     /* darker orange, used for hover states */
    --orange-tint:#fff2e8;     /* very light orange background, used behind icons */
    --dark:#1c1714;            /* dark charcoal used for header/footer/appointment box backgrounds */
    --body: 'Inter', sans-serif;          /* main font for all body text */
    --mono: 'IBM Plex Mono', monospace;   /* "typewriter" font used for prices, labels, ticket-style text */
    --radius:12px;             /* default rounded-corner size for cards/buttons */
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.55;}
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ---- BLOG: added for the blog index / article pages ---- */
.blog-hero{padding:56px 0 24px; text-align:center;}
.blog-hero h1{font-size:clamp(28px,4vw,42px); margin-bottom:10px;}
.blog-hero p{color:var(--text-dim); font-size:15.5px; max-width:560px; margin:0 auto;}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;}
.blog-card:hover{box-shadow:0 12px 28px rgba(20,18,16,0.08); transform:translateY(-2px);}
.blog-card .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.blog-card .date{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}
.blog-card h3{font-size:18px; line-height:1.35;}
.blog-card p{font-size:13.5px; color:var(--text-dim); flex:1;}
.blog-card .read-more{font-size:13px; font-weight:700; color:var(--orange-deep);}
.blog-pagination{display:flex; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap;}
.blog-pagination a, .blog-pagination span{padding:9px 15px; border-radius:8px; border:1px solid var(--border-strong); font-size:13.5px; font-family:var(--mono);}
.blog-pagination a:hover{border-color:var(--orange);}
.blog-pagination .active{background:var(--orange); color:#fff; border-color:var(--orange);}
.blog-article{max-width:760px; margin:0 auto; padding:56px 0 80px;}
.blog-article .kicker{font-family:var(--mono); font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.blog-article h1{font-size:clamp(26px,4vw,40px); margin-bottom:16px; line-height:1.2;}
.blog-article .meta{color:var(--text-dim); font-size:13.5px; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border);}
.blog-content{font-size:16.5px; line-height:1.75; color:var(--text);}
.blog-content h2{font-size:24px; margin:36px 0 14px; font-weight:800;}
.blog-content h3{font-size:19px; margin:28px 0 12px; font-weight:700;}
.blog-content p{margin-bottom:18px;}
.blog-content ul{margin:0 0 18px 22px;}
.blog-content li{margin-bottom:8px;}
.blog-content strong{font-weight:700;}
.blog-cta{margin-top:48px; padding:28px; border-radius:var(--radius); background:var(--orange-tint); text-align:center;}
.blog-cta p{margin-bottom:14px; font-size:15px;}
.blog-related{margin-top:60px; padding-top:40px; border-top:1px solid var(--border);}
.blog-related h3{font-size:18px; margin-bottom:20px;}
.blog-empty{text-align:center; padding:60px 0; color:var(--text-dim);}
  h1,h2,h3,h4{font-weight:800; letter-spacing:-0.01em;}
  section{padding:80px 0;}
  section.alt{background:var(--bg-alt);}
  @media(max-width:720px){section{padding:52px 0;}}
  .sec-head{text-align:center; max-width:560px; margin:0 auto 48px;}

  /* ---- FAQ ACCORDION: native <details>/<summary> so it works without JS
     and reads correctly to search engines and screen readers. ---- */
  .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq-item{border:1px solid var(--border); border-radius:12px; padding:6px 22px; background:#fff;}
  .faq-item summary{padding:16px 0; font-weight:700; font-size:15.5px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-size:22px; font-weight:400; color:var(--orange); flex-shrink:0; transition:transform .15s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{padding:0 0 18px; color:var(--text-dim); font-size:14.5px; line-height:1.65;}
  @media(max-width:600px){.faq-item{padding:4px 16px;} .faq-item summary{font-size:14.5px;}}
  .sec-head h2{font-size:clamp(24px,3.2vw,34px); margin-bottom:10px;}
  .sec-head p{color:var(--text-dim); font-size:15.5px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:8px; font-weight:700; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:.2s ease;}
  .btn-primary{background:var(--orange); color:#fff;}
  .btn-primary:hover{background:var(--orange-deep);}
  .btn-ghost{border-color:var(--border-strong); color:var(--text);}
  .btn-ghost:hover{border-color:var(--orange); color:var(--orange-deep);}

  /* ---- TOP BAR: thin dark strip above the header with address/email/social icons ---- */
  .topbar{background:var(--dark); color:#cfc7c0; font-size:12.5px;}
  .topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 24px;}
  .topbar a{color:#cfc7c0; display:flex; align-items:center; gap:6px;}
  .topbar a:hover{color:var(--orange);}
  .topbar .links{display:flex; gap:18px;}
  .topbar .social{display:flex; gap:12px;}
  .topbar .social svg{width:14px; height:14px; stroke:#cfc7c0;}
  .topbar .social a:hover svg{stroke:var(--orange);}
  @media(max-width:700px){.topbar .links span:not(:first-child){display:none;}}

  /* ---- HEADER: sticky navigation bar with logo, menu links, phone number, and the orange "Make Appointment" button ---- */
  header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:12px;}
  .logo{display:flex; align-items:center; gap:10px; min-width:0;}
  .logo img{height:40px; width:auto; flex-shrink:0;}
  .logo span{font-weight:800; font-size:18px;}
  .nav-links{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:600; color:var(--text-dim);}
  .nav-links a:hover{color:var(--orange-deep);}
  .nav-cta{display:flex; align-items:center; gap:16px; flex-shrink:0;}
  .nav-phone{font-family:var(--mono); font-size:14px; color:var(--text-dim);}
  .burger{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer; width:40px; height:40px; flex-shrink:0; border-radius:8px;
  }
  .burger:active{background:var(--bg-alt, rgba(0,0,0,0.05));}
  .burger span{width:22px; height:2px; background:var(--text); border-radius:2px;}
  .mobile-panel{display:none; flex-direction:column; gap:16px; padding:18px 24px 24px; border-top:1px solid var(--border);}
  .mobile-panel a{font-size:15px; font-weight:600; color:var(--text-dim);}
  /* On mobile the desktop nav-links, phone number, AND the header's "Make Appointment"
     button all step aside — that button was still showing before, crowding right up
     against the burger. Mobile visitors get the burger only, which opens the panel
     below (which has its own Make Appointment button, so nothing is lost). */
  @media(max-width:860px){
    .nav-links, .nav-phone, .nav-cta .btn{display:none;}
    .burger{display:flex;}
    header.open .mobile-panel{display:flex;}
  }
  @media(max-width:480px){
    .nav{padding:10px 16px;}
    .logo img{height:32px;}
    .logo span{font-size:15px;}
  }

  /* ---- HERO: the big headline section at the very top of the page ---- */
  .hero{padding:64px 0 60px; text-align:center; background:
    radial-gradient(circle at 50% 0%, var(--orange-tint), transparent 60%);}
  .hero h1{font-size:clamp(30px,5vw,46px); line-height:1.1; margin-bottom:16px;}
  .hero h1 span{color:var(--orange);}
  .hero p{color:var(--text-dim); font-size:16.5px; max-width:520px; margin:0 auto 30px;}
  .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  /* ---- TRUST STRIP: the row of 6 small icons under the hero (Fast Service, Secure Payments, etc.) ---- */
  .trust-strip{display:flex; justify-content:center; gap:0; flex-wrap:wrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .trust-strip .item{flex:1 1 160px; text-align:center; padding:22px 14px; border-right:1px solid var(--border);}
  .trust-strip .item:last-child{border-right:none;}
  .trust-strip .item svg{width:22px; height:22px; stroke:var(--orange-deep); margin:0 auto 10px;}
  .trust-strip .item p{font-size:12.5px; font-weight:600; color:var(--text-dim);}

  /* ---- WHY CHOOSE US: the 4-card icon grid (Data Recovery / Computer Repair / Phone Repair / PC Repair) ---- */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media(max-width:820px){.why-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.why-grid{grid-template-columns:1fr;}}
  .why-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px 22px; text-align:center;}
  .why-card .icon{width:52px; height:52px; border-radius:50%; background:var(--orange-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
  .why-card .icon svg{width:24px; height:24px; stroke:var(--orange-deep);}
  .why-card h4{font-size:16px; margin-bottom:8px; font-weight:700;}
  .why-card p{font-size:13.5px; color:var(--text-dim);}

  /* ---- SERVICE PROCESS: the 4-step "repair ticket" flow (Dropped Off -> Diagnosing -> Repairing -> Ready) ---- */
  .flow{background:#fff; border:1px solid var(--border); border-radius:16px; padding:44px 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
  @media(max-width:820px){.flow{grid-template-columns:1fr; gap:28px;}}
  .flow-step{position:relative; padding:0 20px;}
  .flow-step:not(:last-child)::after{content:''; position:absolute; top:19px; right:-2px; width:calc(100% - 38px); height:1px; background:repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);}
  @media(max-width:820px){.flow-step:not(:last-child)::after{display:none;}}
  .flow-step .stamp{font-family:var(--mono); font-size:14px; color:#fff; background:var(--orange); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-weight:700;}
  .flow-step h4{font-size:14.5px; margin-bottom:8px; letter-spacing:0.03em; text-transform:uppercase; font-family:var(--mono); font-weight:600;}
  .flow-step p{color:var(--text-dim); font-size:13.5px;}
  .ticket-tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; background:var(--orange-tint); color:var(--orange-deep); padding:6px 14px; border-radius:20px; margin-bottom:18px;}
  .ticket-tag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--orange);}

  /* ---- OUR FEEDBACK: the big number stats (Phones Repaired, PC Repaired, etc.) ---- */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;}
  @media(max-width:700px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
  .stat h3{font-size:clamp(28px,4vw,40px); color:var(--orange-deep); font-family:var(--mono); font-weight:600;}
  .stat p{color:var(--text-dim); font-size:13.5px; margin-top:6px;}

  /* ---- WATCH OUR WORK: embeds your real YouTube channel uploads automatically ---- */
  .video-frame{position:relative; width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#000; aspect-ratio:16/9;}
  .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .video-cta{display:flex; justify-content:center; margin-top:24px;}

  /* ---- REVIEWS: the customer review cards + "Read on Google" button. Placeholder text — see the REVIEWS section in the HTML below to swap in real reviews. ---- */
  .review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
  @media(max-width:860px){.review-grid{grid-template-columns:1fr;}}
  .review-card{background:#fff; border:1px dashed var(--border-strong); border-radius:var(--radius); padding:24px;}
  .review-card .stars{color:var(--orange); font-size:14px; margin-bottom:12px; letter-spacing:2px;}
  .review-card p{font-size:14px; color:var(--text-dim); margin-bottom:14px;}
  .review-card .review-who{font-family:var(--mono); font-size:12px; color:var(--text-faint);}
  .review-header{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:8px;}
  .google-badge{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border-strong); border-radius:12px; padding:12px 18px;}
  .google-badge svg{width:22px; height:22px;}
  .google-badge .rating{font-weight:800; font-size:16px;}
  .google-badge .stars-static{color:#fbbc04; font-size:13px;}

  /* ---- APPOINTMENT FORM: the dark "Make an Appointment" box with the booking form fields ---- */
  .appt{background:var(--dark); border-radius:20px; padding:52px 40px; color:#fff;}
  @media(max-width:700px){.appt{padding:36px 22px;}}
  .appt-head{text-align:center; max-width:520px; margin:0 auto 36px;}
  .appt-head h2{color:#fff; font-size:clamp(22px,3vw,30px); margin-bottom:10px;}
  .appt-head p{color:#c9c1ba; font-size:15px;}
  .appt-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; margin:0 auto;}
  @media(max-width:600px){.appt-grid{grid-template-columns:1fr;}}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:12px; font-family:var(--mono); color:#a89f97; text-transform:uppercase; letter-spacing:0.06em;}
  .field input,.field select,.field textarea{
    background:#26201b; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:12px 14px; color:#fff; font-family:var(--body); font-size:14.5px;
  }
  .field textarea{resize:vertical; min-height:70px;}
  /* Chrome (and most browsers) force their own light-blue/yellow highlight on
     autofilled fields — name, phone, email are the ones people's browsers
     usually remember — which overrides the dark background above no matter
     what "background" is set to. This is the standard trick to override it:
     a huge inset shadow "paints over" the browser's autofill color, and a
     very long background-color transition stops it flashing in before the
     override applies. */
  .field input:-webkit-autofill,
  .field input:-webkit-autofill:hover,
  .field input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #26201b inset !important;
    -webkit-text-fill-color:#fff !important;
    caret-color:#fff;
    transition:background-color 5000s ease-in-out 0s;
  }
  .appt-submit{grid-column:1/-1; text-align:center; margin-top:8px;}

  /* ---- BADGES: small pill-shaped "Best in Edmonton" / "Clever Canadian" award badges ---- */
  .badges-row{display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top:40px;}
  .badge-chip{font-family:var(--mono); font-size:12px; color:var(--text-dim); border:1px solid var(--border-strong); padding:9px 16px; border-radius:20px; background:#fff;}

  /* ---- MAP + CONTACT: the Google Map embed and address/phone/email info card near the bottom ---- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:16px; overflow:hidden;}
  @media(max-width:800px){.contact-grid{grid-template-columns:1fr;}}
  .contact-grid iframe{width:100%; height:100%; min-height:320px; border:0; display:block;}
  .contact-info{padding:38px 34px; background:#fff;}
  .contact-info h3{font-size:20px; margin-bottom:18px;}
  .contact-info .row{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14.5px;}
  .contact-info .row:last-child{border-bottom:none;}
  .contact-info .row svg{width:17px; height:17px; stroke:var(--orange-deep); flex-shrink:0; margin-top:2px;}
  .contact-info .label{display:block; color:var(--text-faint); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px;}

  /* ---- FOOTER: the dark bottom section with site links and copyright ---- */
  footer{background:var(--dark); color:#cfc7c0; padding:52px 0 26px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr; row-gap:32px;}}
  .foot-grid h5{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:#8f8680; margin-bottom:14px;}
  .foot-grid li{margin-bottom:9px; font-size:14px;}
  .foot-grid li a:hover{color:var(--orange);}
  .foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .foot-logo img{height:32px;}
  .foot-logo span{font-weight:800; font-size:16px; color:#fff;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08); font-size:12.5px; color:#8f8680; flex-wrap:wrap; gap:12px;}

  [data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  [data-reveal].in{opacity:1; transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;}}