/*
PROPRIETARY AND CONFIDENTIAL - Motherboard, Inc.
Protected under the Defend Trade Secrets Act (18 U.S.C. § 1836)
Contact: legal@bymotherboard.com
*/

:root{--navy:#00234B;--blue:#2B7BB9;--green:#81d742;--orange:#FB8E28;--surface:#F8FAFC;--bg:#fff;--text:#1B2A3D;--text-muted:#5A6B7F;--border:#E1E7EF;--max:1140px;--shadow:0 18px 50px rgba(0,35,75,.16)}
.cif-main{overflow:hidden}.cif-container{max-width:var(--max);margin:0 auto;padding:0 2rem}.cif-section{padding:5.5rem 0}.cif-section-surface{background:var(--surface)}.cif-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:500 .75rem/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:1rem}.cif-eyebrow:before{content:"";width:18px;height:2px;background:var(--green);display:inline-block}.cif-hero{position:relative;padding:6.25rem 0 5.5rem;background:radial-gradient(circle at 80% 12%,rgba(129,215,66,.18),transparent 32%),linear-gradient(180deg,#fff 0%,#F8FAFC 100%)}.cif-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3.5rem;align-items:center}.cif-hero h1,.cif-page-hero h1{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(3rem,5vw,5.4rem);line-height:.92;margin:0 0 1.25rem;color:var(--navy);letter-spacing:-.02em}.cif-hero h1 em,.cif-page-hero h1 em,.cif-section-title em{font-style:italic;color:var(--blue)}.cif-lead{font-size:1.18rem;line-height:1.75;color:var(--text-muted);max-width:650px}.cif-hero-actions,.cif-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.75rem}.cif-page-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:999px;padding:.92rem 1.18rem;text-decoration:none;font-weight:900;border:1px solid transparent}.cif-page-btn-primary{background:var(--green);color:var(--navy)}.cif-page-btn-secondary{background:var(--navy);color:#fff}.cif-page-btn-outline{background:#fff;color:var(--navy);border-color:var(--border)}.cif-hero-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:1rem;box-shadow:var(--shadow);transform:rotate(1deg)}.cif-hero-card img,.cif-image-card img{display:block;width:100%;height:auto;border-radius:18px}.cif-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:4rem}.cif-stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:0 12px 28px rgba(0,35,75,.07)}.cif-stat strong{display:block;font-family:"DM Serif Display",Georgia,serif;font-size:2rem;color:var(--navy);line-height:1}.cif-stat span{display:block;color:var(--text-muted);font-size:.92rem;margin-top:.4rem}.cif-section-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:end;margin-bottom:2.5rem}.cif-section-title{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(2.1rem,4vw,3.2rem);line-height:.98;margin:0;color:var(--navy);letter-spacing:-.01em}.cif-section-copy{color:var(--text-muted);line-height:1.8;margin:0}.cif-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.cif-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.cif-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:0 12px 28px rgba(0,35,75,.06);overflow:hidden}.cif-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}.cif-card:hover:before{transform:scaleX(1)}.cif-card h3{color:var(--navy);font-size:1.15rem;margin:.2rem 0 .7rem}.cif-card p{color:var(--text-muted);line-height:1.65;margin:0}.cif-number{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:rgba(129,215,66,.18);color:var(--navy);font-weight:900;font-size:.75rem;margin-bottom:.8rem}.cif-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.cif-checklist{display:grid;gap:.85rem;margin-top:1.5rem}.cif-check{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-muted);line-height:1.55}.cif-check:before{content:"✓";flex:0 0 24px;height:24px;border-radius:999px;background:var(--green);color:var(--navy);display:grid;place-items:center;font-weight:900}.cif-steps{display:grid;gap:1rem}.cif-step{display:grid;grid-template-columns:46px 1fr;gap:1rem;background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.15rem}.cif-step strong{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--navy);color:#fff}.cif-step h3{margin:0 0 .35rem;color:var(--navy)}.cif-step p{margin:0;color:var(--text-muted);line-height:1.6}.cif-cta{background:var(--navy);color:#fff;border-radius:20px;padding:3rem;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:2rem;align-items:center}.cif-cta h2{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(2rem,4vw,3rem);line-height:1;margin:0 0 .7rem}.cif-cta p{color:rgba(255,255,255,.72);margin:0;line-height:1.7}.cif-page-hero{padding:5.75rem 0 4.75rem;background:linear-gradient(180deg,#fff,#F8FAFC)}.cif-page-hero h1{max-width:860px}.cif-page-hero .cif-lead{max-width:780px}.cif-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 12px 28px rgba(0,35,75,.06)}.cif-table th,.cif-table td{text-align:left;padding:1rem;border-bottom:1px solid var(--border);vertical-align:top}.cif-table th{background:var(--surface);color:var(--navy)}.cif-note{font-size:.92rem;color:var(--text-muted);line-height:1.7;margin-top:1rem}.cif-faq{display:grid;gap:1rem}.cif-faq details{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.2rem}.cif-faq summary{font-weight:900;color:var(--navy);cursor:pointer}.cif-faq p{color:var(--text-muted);line-height:1.7}.cif-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}.cif-form{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.5rem;box-shadow:0 12px 28px rgba(0,35,75,.06)}.cif-form label{display:block;font-weight:800;color:var(--navy);margin:.9rem 0 .35rem}.cif-form input,.cif-form textarea,.cif-form select{width:100%;padding:.9rem 1rem;border:1px solid var(--border);border-radius:12px;font:inherit}.cif-form textarea{min-height:130px}.cif-form button{margin-top:1rem;border:0;cursor:pointer}.fade-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.fade-up.is-visible{opacity:1;transform:none}
@media(max-width:900px){.cif-hero-grid,.cif-section-head,.cif-split,.cif-contact-grid{grid-template-columns:1fr}.cif-stats,.cif-grid-3,.cif-grid-2{grid-template-columns:1fr 1fr}.cif-cta{display:block}.cif-cta .cif-actions{margin-top:1.5rem}.cif-hero{padding-top:4.5rem}}
@media(max-width:620px){.cif-container{padding:0 1.25rem}.cif-section{padding:4rem 0}.cif-stats,.cif-grid-3,.cif-grid-2{grid-template-columns:1fr}.cif-hero h1,.cif-page-hero h1{font-size:3rem}.cif-cta{padding:2rem}.cif-table{font-size:.92rem}.cif-table th,.cif-table td{padding:.8rem}}

/* =========================================================
   DESKTOP WIDTH POLISH — 1920 CANVAS
   Site: Click IT Franchise
   ========================================================= */
:root {
  --page-max: 1440px;
  --wide-max: 1520px;
}

.cif-container,
.cif-page-hero-inner {
  max-width: var(--page-max);
  padding-left: clamp(2rem, 4vw, 4rem);
  padding-right: clamp(2rem, 4vw, 4rem);
}

.cif-page-hero {
  padding-top: clamp(6rem, 8vw, 8.5rem);
  padding-bottom: clamp(5.5rem, 8vw, 8rem);
}

.cif-hero-grid {
  grid-template-columns: minmax(520px, 0.95fr) minmax(520px, 1.05fr);
  gap: clamp(4rem, 7vw, 8rem);
}

.cif-hero-copy {
  max-width: 620px;
}

.cif-page-hero h1 {
  font-size: clamp(4.4rem, 5.9vw, 7.6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.cif-hero-text {
  max-width: 560px;
  font-size: clamp(1.1rem, 1.15vw, 1.35rem);
}

.cif-hero-media {
  max-width: 640px;
  justify-self: center;
}

.cif-hero-image,
.cif-image-card img,
.cif-split-image img,
.cif-mockup {
  width: 100%;
}

.cif-stats,
.cif-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cif-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cif-grid,
.cif-step-list {
  gap: clamp(1.2rem, 1.5vw, 1.8rem);
}

.cif-card,
.cif-step,
.cif-stat,
.cif-info-card,
.cif-pricing-card {
  padding: clamp(1.5rem, 1.65vw, 2rem);
}

.cif-split,
.cif-split-reverse {
  gap: clamp(4rem, 7vw, 7rem);
}

.cif-section {
  padding-top: clamp(5.5rem, 7vw, 7.5rem);
  padding-bottom: clamp(5.5rem, 7vw, 7.5rem);
}

.cif-section-header,
.cif-split-copy {
  max-width: 760px;
}

.cif-cta-banner {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(2.5rem, 4vw, 4rem);
}

@media (min-width: 1500px) {
  :root {
    --page-max: 1520px;
    --wide-max: 1600px;
  }

  .cif-page-hero h1 {
    font-size: clamp(5rem, 6.1vw, 8rem);
  }

  .cif-hero-media {
    max-width: 700px;
  }
}

@media (min-width: 1800px) {
  :root {
    --page-max: 1600px;
  }

  .cif-hero-grid {
    grid-template-columns: minmax(600px, 0.95fr) minmax(620px, 1.05fr);
  }
}

@media (max-width: 1100px) {
  .cif-hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .cif-page-hero h1 {
    font-size: clamp(3.2rem, 8vw, 5.8rem);
  }

  .cif-hero-media {
    max-width: 620px;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .cif-container,
  .cif-page-hero-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* =========================================================
   REAL MEDIA LIBRARY IMAGE SECTIONS
   Site: Click IT Franchise
   ========================================================= */
.cif-photo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cif-photo-card img,
.cif-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cif-hero-photo-card {
  min-height: clamp(320px, 33vw, 520px);
}

.cif-hero-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0, 35, 75, 0.58), transparent 52%),
    radial-gradient(circle at 85% 15%, rgba(129, 215, 66, 0.26), transparent 28%);
  pointer-events: none;
}

.cif-hero-photo {
  object-position: center;
}

.cif-photo-split {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}

.cif-photo-split-reverse {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
}

.cif-photo-split > .cif-photo-card {
  min-height: 430px;
}

.cif-grid-stacked {
  grid-template-columns: 1fr;
}

.cif-portrait-card {
  min-height: 520px;
}

.cif-portrait-card img {
  object-position: center top;
}

.cif-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.35rem);
}

.cif-media-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 35, 75, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cif-media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.cif-media-card img {
  height: 210px;
  border-bottom: 1px solid var(--border);
}

.cif-media-card div {
  padding: 1.2rem;
}

.cif-media-card h3 {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.12rem;
}

.cif-media-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.cif-photo-banner {
  position: relative;
  min-height: clamp(360px, 34vw, 560px);
  overflow: hidden;
  background: var(--navy);
}

.cif-photo-banner img {
  display: block;
  width: 100%;
  height: clamp(360px, 34vw, 560px);
  object-fit: cover;
  object-position: center;
  opacity: 0.68;
}

.cif-photo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 35, 75, 0.88), rgba(0, 35, 75, 0.35), rgba(0, 35, 75, 0.78));
}

.cif-photo-banner-overlay {
  position: absolute;
  z-index: 1;
  left: max(2rem, calc((100vw - var(--page-max, 1440px)) / 2 + 4rem));
  bottom: clamp(2rem, 6vw, 5rem);
  max-width: 620px;
  color: #fff;
}

.cif-photo-banner-overlay h2 {
  margin: 0;
  color: #fff;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(2.3rem, 4vw, 4.8rem);
  font-weight: 400;
  line-height: 1.02;
}

.cif-photo-banner-overlay .cif-eyebrow {
  color: var(--green);
}

@media (max-width: 1100px) {
  .cif-photo-split,
  .cif-photo-split-reverse {
    grid-template-columns: 1fr;
  }

  .cif-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cif-photo-split > .cif-photo-card,
  .cif-portrait-card {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .cif-media-grid {
    grid-template-columns: 1fr;
  }

  .cif-media-card img {
    height: 240px;
  }

  .cif-photo-banner-overlay {
    left: 1.25rem;
    right: 1.25rem;
  }
}

/* =========================================================
   REAL IMAGE SIZING FIX
   Site: Click IT Franchise
   Purpose: prevent media-library photos from oversized/tall display.
   ========================================================= */
.cif-hero {
  overflow: hidden;
}

.cif-hero-grid {
  align-items: center;
}

.cif-hero-card,
.cif-hero-photo-card {
  width: 100%;
  max-width: 640px;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  justify-self: center;
}

.cif-hero-card img,
.cif-hero-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cif-photo-card {
  width: 100%;
  overflow: hidden;
}

.cif-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cif-photo-split > .cif-photo-card {
  min-height: 0 !important;
  height: auto;
  aspect-ratio: 16 / 10;
}

.cif-photo-split .cif-photo-card img {
  aspect-ratio: 16 / 10;
}

.cif-image-card.cif-photo-card {
  max-width: 620px;
  justify-self: center;
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
}

.cif-image-card.cif-photo-card img {
  aspect-ratio: 16 / 10;
}

.cif-portrait-card {
  min-height: 0 !important;
  max-height: 620px;
  aspect-ratio: 4 / 3;
}

.cif-portrait-card img {
  object-fit: cover;
  object-position: center top;
}

.cif-media-grid {
  align-items: stretch;
}

.cif-media-card img {
  width: 100%;
  height: 210px !important;
  object-fit: cover;
  object-position: center top;
}

.cif-media-card:nth-child(3) img {
  object-position: center center;
}

.cif-photo-banner,
.cif-photo-banner img {
  max-height: 460px;
}

.cif-photo-banner img {
  object-fit: cover;
  object-position: center;
}

@media (min-width: 1500px) {
  .cif-hero-card,
  .cif-hero-photo-card {
    max-width: 720px;
  }

  .cif-photo-split > .cif-photo-card {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 1100px) {
  .cif-hero-card,
  .cif-hero-photo-card {
    max-width: 640px;
  }

  .cif-photo-split > .cif-photo-card,
  .cif-image-card.cif-photo-card,
  .cif-portrait-card {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .cif-hero-card,
  .cif-hero-photo-card,
  .cif-photo-split > .cif-photo-card,
  .cif-image-card.cif-photo-card,
  .cif-portrait-card {
    aspect-ratio: 4 / 3;
  }

  .cif-media-card img {
    height: 220px !important;
  }
}


/* Add this block to the bottom of pages.css */

/* =========================================================
   FINAL PAGE WIDTH + IMAGE CROP OVERRIDE
   Site: Click IT Franchise
   ========================================================= */
:root {
  --page-max: 1520px;
  --wide-max: 1600px;
}

.cif-container,
.cif-page-hero-inner {
  max-width: var(--page-max);
}

.cif-hero-card,
.cif-hero-photo-card {
  max-width: 720px;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
}

.cif-hero-card img,
.cif-hero-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cif-photo-split > .cif-photo-card,
.cif-image-card.cif-photo-card {
  aspect-ratio: 16 / 10;
  min-height: 0 !important;
  max-height: 560px;
}

.cif-photo-split > .cif-photo-card img,
.cif-image-card.cif-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cif-portrait-card {
  aspect-ratio: 4 / 3;
  min-height: 0 !important;
  max-height: 620px;
}

.cif-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cif-media-card img {
  width: 100%;
  height: 210px !important;
  object-fit: cover;
}

.cif-photo-banner,
.cif-photo-banner img {
  max-height: 460px;
}