@charset "UTF-8";
/* Combined custom CSS for Creative Jim site
   Source order inside this file:
   1) cjm2026-food-landing-page-2.css
   2) cjm2026-index-5.css

   Notes:
   - This preserves the precedence between the two custom files, with index-5.css winning where selectors overlap.
   - Because this single file is intended to load after main.css, some rules from the former landing-page file will now also override main.css.
*/

/* ==========================================================================
   START: cjm2026-food-landing-page-2.css
   ========================================================================== */

@charset "UTF-8";
/* CSS Document */:root {
      --cjm-accent: #ff0000; /* Highlight Text & Backgrounds */
      --cjm-dark: #ffffff; /* ??? */
      --cjm-panel: rgba(0,0,0,0.5); /* Side boxes */
      --cjm-text: rgba(255,255,255,0.85);
    }

    body {
      background: #ffffff;
    }

    .page-hero {
      position: relative;
      min-height: 72vh;
      display: flex;
      align-items: end;
      overflow: hidden;
      background: #ffffff url('../images/zuya-hamburger-and-hand.jpg') center center / cover no-repeat;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
		background: rgba(0,0,0,0.5);
 /*     background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.68) 60%, rgba(0,0,0,0.88) 100%); */
    }

    .page-hero .container {
      position: relative;
      z-index: 2;
      padding-top: 0px; /* Space at top of page */
      padding-bottom: 70px;
    }

    .hero-breadcrumb {
      display: inline-block;
      margin-bottom: 18px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.78);
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .page-hero h1 {
      color: #fff;
      font-size: clamp(2.4rem, 5vw, 4.4rem);
      line-height: 1.03;
      margin-bottom: 16px;
      max-width: 760px;
    }

    .page-hero .lead {
      color: rgba(255,255,255,0.8);
      font-size: 1.08rem;
      line-height: 1.75;
      max-width: 720px;
      margin-bottom: 28px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }

    .hero-meta span {
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: #fff;
      font-size: 0.92rem;
    }

    .btn-cjm-primary {
      background: var(--cjm-accent);
      border-color: var(--cjm-accent);
      color: #111;
      font-weight: 700;
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-cjm-primary:hover {
      background: #d7a865;
      border-color: #d7a865;
      color: #111;
    }

    .btn-cjm-outline {
      border: 1px solid rgba(255,255,255,0.28);
      color: #fff;
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-cjm-outline:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
      border-color: rgba(255,255,255,0.44);
    }

    .section-dark {
      background: #131313;
    }

    .section-heading {
      margin-bottom: 18px;
    }

    .section-heading .eyebrow {
      display: inline-block;
      color: var(--cjm-accent);
      text-transform: uppercase;
      font-size: 0.82rem;
      letter-spacing: 0.09em;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .section-heading h2 {
      color: #fff;
      margin-bottom: 12px;
    }

    .section-heading p,
    .content-copy p,
    .content-copy li,
    .quote-panel p,
    .mini-panel p {
      color: rgba(0,0,0,0.75); /* var(--cjm-text); */
      line-height: 1.8;
    }

.content-copy2 p,
    .content-copy li,
    .quote-panel p,
    .mini-panel p {
      color: rgba(255,255,255,1.0); /* var(--cjm-text); */
      line-height: 1.8;
    }

    .content-copy p {
      margin-bottom: 1rem;
    }

    .services-list,
    .process-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .services-list li,
    .process-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 16px;
      color: var(--cjm-text);
    }

    .services-list i,
    .process-list i {
      color: var(--cjm-accent);
      font-size: 1.05rem;
      margin-top: 4px;
    }

    .content-panel,
    .quote-panel,
    .mini-panel,
    .testimonial-card {
      background: var(--cjm-panel);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
    }

    .content-panel,
    .quote-panel,
    .mini-panel,
    .testimonial-card {
      padding: 28px;
    }

    .gallery-caption {
      font-size: 0.92rem;
      color: rgba(255,255,255,0.7);
      margin-top: 10px;
    }

    .benefit-card {
      height: 100%;
      padding: 24px;
      border-radius: 18px;
      background: var(--cjm-panel);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .benefit-card .icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: rgba(199,155,89,0.14);
      color: var(--cjm-accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      font-size: 1.2rem;
    }

    .benefit-card h3 {
      color: #fff;
      font-size: 1.12rem;
      margin-bottom: 10px;
    }

    .benefit-card p {
      color: var(--cjm-text);
      margin-bottom: 0;
      line-height: 1.75;
    }

    .testimonial-card p {
      color: rgba(255,255,255,0.84);
      line-height: 1.8;
      margin-bottom: 16px;
      font-style: italic;
    }

    .testimonial-card .author {
      color: #fff;
      font-weight: 700;
    }

    .testimonial-card .role {
      color: rgba(255,255,255,0.65);
      font-size: 0.94rem;
    }

    .quote-panel .form-control,
    .quote-panel .form-select {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      border-radius: 12px;
      padding: 14px 16px;
    }

    .quote-panel .form-control::placeholder {
      color: rgba(255,255,255,0.42);
    }

    .quote-panel .form-control:focus,
    .quote-panel .form-select:focus {
      border-color: rgba(199,155,89,0.6);
      box-shadow: 0 0 0 0.2rem rgba(199,155,89,0.15);
      background: rgba(255,255,255,0.06);
      color: #fff;
    }

    .mini-panel h3,
    .content-panel h3 {
      color: #fff;
      font-size: 1.1rem;
      margin-bottom: 12px;
    }

    .related-links a {
      display: inline-block;
      color: var(--cjm-accent);
      font-weight: 700;
      margin-right: 18px;
      margin-bottom: 10px;
    }

    .related-links a:hover {
      color: #fff;
    }

/* ==========================================================================
   END: cjm2026-food-landing-page-2.css
   START: cjm2026-index-5.css
   ========================================================================== */

@charset "UTF-8";
/* CSS Document */

    :root {
      --cjm-accent: #c79b59;
      --cjm-dark: #111111;
      --cjm-text: #e8e8e8;
      --cjm-muted: rgba(255,255,255,0.75);
      --cjm-panel: #1a1a1a; 
		
	  --photography-color: rgba(0,105,170,1.0);
  	  --graphic-design-color: rgba(234,127,29,1.0);
  	  --web-design-color: rgba(110,180,63,1.0);
  	  --av-color: rgba(151,112,177,1.0);
    }

    body {
      background: #ffffff;
    }
	
p2 {
	font-size: 13px;
	color: rgba(0,0,0,0.75);
	margin-bottom: 10px;
}

p3 {
	font-size: 11px;
	color: rgba(255,255,255,0.75);
}

.page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
		background: rgba(0,0,0,0.35);
 /*     background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.68) 60%, rgba(0,0,0,0.88) 100%); */
    }

    .hero-cjm {
      min-height: 88vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: #ffffff;
    }

  /*  .hero-cjm::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.35) 100%);
      z-index: 1;
    } */

.hero-cjm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25); /* Background of home page grid */
  z-index: 1;
}

.hero-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;                /* thin divider lines */
  background: rgba(0,0,0,1.0);        /* shows through as grid lines */
  z-index: 0;
}

.hero-panel {
  background-size: cover;
  background-position: center;
}

.panel1 { background-image: url('../images/home-food-photography.jpg'); }
.panel2 { background-image: url('../images/home-corporate-headshot-photography.jpg'); }
.panel3 { background-image: url('../images/home-school-photography-2.jpg'); }
.panel4 { background-image: url('../images/home-real-estate-photography.jpg'); }

 /*   .hero-panel-left {
      background-image: url('../gallery/interiors/beaconsfieldpde-6.jpg');
    }

    .hero-panel-right {
      background-image: url('../gallery/interiors/beaconsfieldpde-6.jpg');
    } */

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 100%;
      padding: 80px 0 90px;
	  backdrop-filter: blur(0px);
    }

    .hero-kicker {
      display: inline-block;
      margin-bottom: 18px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,0.75);
      border-radius: 999px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 1.0rem;
      color: rgba(255,255,255,0.75) /* var(--cjm-muted); */;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(4px);
    }

	.hero-kicker2 {
      display: inline-block;
      margin-bottom: 25px;
      padding: 8px 14px;
      border: 0px solid rgba(255,255,255,0.75);
      border-radius: 999px;
      letter-spacing: 0.08em;
      text-transform: ;
      font-size: 1.2rem;
      color: rgba(255,255,255,0.75) /* var(--cjm-muted); */;
      background: rgba(255,255,255,0.0);
      backdrop-filter: blur(40px);
    }

    .hero-content h1 {
      font-size: clamp(2.5rem, 5vw, 4.6rem);
      line-height: 1.02;
      margin-bottom: 36px;
      color: #ffffff;
	  text-align: center;
    }

    .hero-content p {
      font-size: 1.1rem;
      line-height: 1.7;
      color: var(--cjm-muted);
      max-width: 100%;
      margin-bottom: 28px;
	  text-align: center;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 50px;
    }

    .hero-tags span { /* Food Corporate Schools Sport Real Estate Fashion */
      padding: 8px 14px;
      border-radius: 5px;
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      font-size: 0.8rem;
	  align-content: center;
	  border: 1px solid rgba(255,255,255,0.5);

    }

    .btn-cjm-primary {
      background: var(--web-design-color);
      border-color: rgba(255,255,255,0.5);
      color: rgba(255,255,255,0.5);
      font-weight: 700;
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-cjm-primary:hover {
      background: var(--graphic-design-color);
      border-color: rgba(255,255,255,1.0);
      color: rgba(255,255,255,1.0);
    }

.btn-cjm-quote {
      background: var(--web-design-color);
      border-color: rgba(255,255,255,1.0);
      color: rgba(255,255,255,1.0);
      font-weight: 700;
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-cjm-quote:hover {
      background: var(--photography-color);
      border-color: rgba(255,255,255,1.0);
      color: rgba(255,255,255,1.0);
    }

    .btn-cjm-outline {
      border: 1px solid rgba(255,255,255,1.0);
      color: #fff;
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-cjm-outline:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.5);;
      border-color: rgba(255,255,255,0.45);
    }

	.btn-quote-outline {
	  background: var(--graphic-design-color);
      border: 1px solid rgba(255,255,255,1.0);
      color: rgba(255,255,255,1.0);
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-quote-outline:hover {
	  background: var(--photography-color);
      color: rgba(255,255,255,1.0);
      border-color: rgba(255,255,255,1.0);
    }

.btn-faq-outline {
	  background: var(--av-color);
      border: 1px solid rgba(255,255,255,1.0);
      color: rgba(255,255,255,1.0);
      padding: 12px 24px;
      border-radius: 999px;
    }

    .btn-faq-outline:hover {
	  background: var(--photography-color);
      color: rgba(255,255,255,1.0);
      border-color: rgba(255,255,255,1.0);
    }

.btn-need-outline {
	  background: rgba(0,0,0,0.25);
      color: rgba(255,255,255,1.0);
      border-color: rgba(255,255,255,1.0);
	padding: 12px 24px;
	border-radius: 999px;
    }

    .btn-need-outline:hover {
	  background: var(--photography-color);
      color: rgba(255,255,255,1.0);
      border-color: rgba(255,255,255,1.0);
    }

.text-photography {
	colour: yellow;
}

    .section-dark {
      background: rgba(0,0,0,1.0);
    }

    .section-heading {
      margin-bottom: 18px;
    }

    .section-heading .eyebrow {
      display: inline-block;
      color: var(--graphic-design-color);
      text-transform: uppercase;
      font-size: 1.2rem;
      letter-spacing: 0.09em;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .section-heading h2 {
      color: #fff;
      margin-bottom: 12px;
    }

    .section-heading p {
      color: rgba(0,0,0,0.75);
      max-width: 760px;
    }

    .service-card {
      height: 100%;
      background: var(--cjm-panel);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 28px 24px;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .service-card:hover {
      transform: translateY(-5px);
      border-color: rgba(199,155,89,0.55);
      box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    }

    .service-card .icon-wrap {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(199,155,89,0.15);
      color: rgba(0,105,170,1.0); /* var(--cjm-accent); */
      font-size: 1.25rem;
      margin-bottom: 18px;
    }

.service-card .icon-wrap2 {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(199,155,89,0.15);
      color: rgba(234,127,29,1.0); /* var(--cjm-accent); */
      font-size: 1.25rem;
      margin-bottom: 18px;
    }

.service-card .icon-wrap3 {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(199,155,89,0.15);
      color: rgba(110,180,63,1.0); /* var(--cjm-accent); */
      font-size: 1.25rem;
      margin-bottom: 18px;
    }

    .service-card h3 {
      font-size: 1.25rem;
      margin-bottom: 10px;
      color: #fff;
    }

    .service-card p {
      color: rgba(255,255,255,0.72);
      margin-bottom: 16px;
      line-height: 1.7;
    }

    .service-card a {
      color: rgba(0,105,170,1.0); /* var(--cjm-accent); */
      font-weight: 700;
    }

 .service-card2 a {
      color: rgba(234,127,29,1.0); /* var(--cjm-accent); */
      font-weight: 700;
    }

    .intro-strip {
      background: rgba(255,255,255,1.0);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .intro-strip p {
      color: rgba(0,0,0,0.75);
      margin: 0;
      font-size: 1.04rem;
      line-height: 1.8;
    }

    .why-card,
    .testimonial-card,
    .quote-panel {
      background: rgba(255,255,255,1.0);/* var(--cjm-panel); */
      border: 1px solid rgba(0,0,0,1.0);
      border-radius: 18px;
	  color: rgba(0,0,0,1.0);
    }

    .why-card {
      padding: 24px;
      height: 100%;
    }

    .why-card h3 {
      color: #fff;
      font-size: 1.1rem;
      margin-bottom: 12px;
    }

    .why-card p {
      color: rgba(255,255,255,0.72);
      margin-bottom: 0;
      line-height: 1.7;
    }

    .stats-row {
      gap: 20px 0;
    }

    .stat-box {
      text-align: center;
      padding: 18px;
      background: rgba(255,255,255,0.15);
      border-radius: 16px;
      height: 100%;
    }

    .stat-box .number {
      display: block;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-box .label {
      color: rgba(255,255,255,0.75);
      font-size: 0.95rem;
    }

    .gallery-caption {
      font-size: 0.8rem;
      color: rgba(0,0,0,0.7);
      margin-top: 10px;
		text-align: center;
    }

    .testimonial-card {
      padding: 26px;
      height: 100%;
    }

    .testimonial-card p {
      color: rgba(0,0,0,0.75);
      line-height: 1.8;
      margin-bottom: 18px;
      font-style: italic;
    }

    .testimonial-card .author {
      color: rgba(0,0,0,0.75);
      font-weight: 700;font-size: 14px;
    }

    .testimonial-card .role {
      color: rgba(0,0,0,0.75);
      font-size: 12px;
    }

.testimonial-card .website {
      color: rgba(0,0,0,0.75);
      font-size: 14px;
    }

    .quote-panel {
      padding: 32px;
    }

    .quote-panel .form-control,
    .quote-panel .form-select {
      background: rgba(0,0,0,0.15);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(0,0,0,0.5);
      border-radius: 12px;
      padding: 14px 16px;
    }

    .quote-panel .form-control::placeholder { /* Placeholder text in box */
      color: rgba(0,0,0,0.5);
    }

    .quote-panel .form-control:focus,
    .quote-panel .form-select:focus {
      border-color: rgba(199,155,89,0.6);
      box-shadow: 0 0 0 0.2rem rgba(199,155,89,0.15);
      background: rgba(0,0,0,0.15);
      color: rgba(0,0,0,0.5);
    }

    .contact-mini {
      background: rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 24px;
      height: 100%;
    }

    .contact-mini h3 {
		display: inline-block;
      color: var(--cjm-accent);
		text-transform: uppercase;
      font-size: 1.2rem;
		letter-spacing: 0.09em;
		font-weight: 700;
      margin-bottom: 12px;
    }

    .contact-mini p,
    .contact-mini a {
      color: rgba(0,0,0,0.75);
      line-height: 1.75;
      margin-bottom: 0;
    }

    .contact-mini a:hover,
    .service-card a:hover {
      color: #fff;
    }

	/* Extras */

	/* Call Button in Nav Menu */

.navmenu a.nav-call-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  box-sizing: border-box;

  background: var(--web-design-color);
  color: #fff !important;

  padding: 0 12px !important;
  margin: 0 0 0 10px !important;

  line-height: 1 !important;
  height: 30px !important;
  min-height: 30px !important;

  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.navmenu a.nav-call-btn i {
  line-height: 1 !important;
  font-size: 0.95rem;
}

.navmenu a.nav-call-btn:hover {
  background: var(--photography-color);
  color: #fff !important;
}

.navmenu a.nav-enquiry-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;

  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(110, 180, 63, 1);

  padding: 0 12px !important;
  margin: 0 !important;

  line-height: 1 !important;
  height: 30px !important;
  min-height: 30px !important;

  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.navmenu a.nav-enquiry-btn:hover {
  background: rgba(110, 180, 63, 1);
  color: #fff !important;
}

/* Get Quote in Nav Menu */

.navmenu a.getquote-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;

  background: ;
  border: 2px solid var(--web-design-color);
  color: #fff !important;

  padding: 6px 12px !important;
  margin: 0 0 0 10px !important;

  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;

  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.navmenu a.getquote-btn i {
  line-height: 1 !important;
  font-size: 0.95rem;
}

.navmenu a.getquote-btn:hover {
  background-color: rgba(110,180,63,1.0);
  color: #fff !important;
}

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

      .hero-panel-right {
        display: none;
      }

      .hero-content {
        padding-top: 120px;
        padding-bottom: 70px;
      }
    }

.map-container {
  border-radius: 20px; /* Adjust radius as needed */
  overflow: hidden;    /* Clips the map corners */
  width: 100%;         /* Adjust width as needed */
  height: 450px;       /* Adjust height as needed */
}
.map-container iframe {
  width: 100%;
  height: 100%;
}

/* Accordion Colours */

.accordion-button {
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  color: #ffffff;
  background-color: rgba(110,180,63,1.0);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: rgba(110,180,63,1.0);
  box-shadow: 0 0 0 0.2rem rgba(110,180,63,0.25);
}

.accordion-button::after {
  filter: brightness(0) saturate(100%);
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   END: cjm2026-index-5.css
   ========================================================================== */