/* TECH JCORP static pages: home, about, services (packages and Overwatch plans), privacy and terms.
   Loaded after core.css. Breakpoints for these pages are at the end of the file. */

/* Home hero */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-start; min-height: var(--hero-h); overflow: hidden; }
.hero-media {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--side-fade), var(--black) 0%, rgba(9, 11, 10, .88) 38%, rgba(9, 11, 10, .3) 78%, rgba(9, 11, 10, .5) 100%),
    linear-gradient(0deg, var(--black) 0%, transparent 30%);
}
.hero-inner { padding: var(--hero-top) 0 clamp(8rem, 16vh, 10rem); }
.hero-content { max-width: 820px; }
.hero h1 { font-size: clamp(3.2rem, 9.5vw, 7.5rem); letter-spacing: -.025em; }
.hero h1 span { color: var(--accent); }
.hero-tagline { margin-top: var(--sp-md); font-size: clamp(.9375rem, 1.6vw, 1.15rem); font-weight: 500; letter-spacing: .22em; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xl); }

.hero-facts-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(9, 11, 10, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hero-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); padding: 1.25rem 0; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-facts li { display: flex; align-items: center; gap: .65rem; }
.hero-facts li::before { content: ''; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--accent); }

/* About */
.about-hero { background-image: url('../assets/about-bg.jpg'); }
.parallax--about::before { background-image: url('../assets/parallax-bg.jpeg'); }
.image-band--about::before { background-image: url('../assets/jaguar-team-mid.jpg'); background-position: center 38%; }

.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.dev-photo { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.prose p { max-width: 60ch; margin-bottom: var(--sp-md); font-size: var(--size-lg); line-height: var(--lh-long); }
.prose p:last-child { margin-bottom: 0; }

/* Magazine promotion on the about page */
.magazine { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.magazine-body h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.magazine-body p:not(.eyebrow) { max-width: 46ch; margin-top: var(--sp-sm); }
.magazine-body .btn { margin-top: var(--sp-lg); }

/* Services: package tiers */
.services-hero { background-image: url('../assets/services-bg.jpg'); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); align-items: stretch; }
.tier { display: flex; flex-direction: column; }
.tier-media { aspect-ratio: 16 / 10; overflow: hidden; background: #0D1117; border-bottom: 1px solid var(--line); }
.tier-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) brightness(.85); transition: filter .6s var(--ease), transform .8s var(--ease); }
.tier-body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 3vw, 2.25rem); }
.tier-label { margin-bottom: var(--sp-md); }
.tier h3 { margin-bottom: .75rem; font-size: 1.75rem; }
.tier-body > p { font-size: var(--size-base); }

/* Tick list: Uses crisp SVG checkmarks.
   In LTR (English, French), the checkmark starts on the left with short stroke down-right, long stem up-right (✓).
   In RTL (Hebrew, Arabic), the checkmark is positioned on the right and fully inverted/mirrored:
   it starts on the right with short stroke down-left, and long stem sweeping up-left into the reading direction. */
.tier li {
  position: relative;
  padding-block: .7rem;
  padding-inline-start: 2rem;
  padding-inline-end: 0;
  border-top: 1px solid var(--line);
  font-size: var(--size-sm);
  color: var(--text);
}
.tier li::before {
  content: '';
  position: absolute;
  top: .85rem;
  inset-inline-start: 2px;
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2339FF14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8.5 6.5 12 13 4'/%3E%3C/svg%3E");
}

/* Right to left (Hebrew / Arabic): Inverted opposite-facing checkmark */
html[dir="rtl"] .tier li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2339FF14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 8.5 9.5 12 3 4'/%3E%3C/svg%3E");
}

.tier .btn { margin-top: auto; }
.tier-section-heading {
  margin: var(--sp-md) 0 var(--sp-xs);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tier ul { margin: 0 0 var(--sp-sm); }

.custom-tier-card {
  margin-top: var(--sp-md);
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.custom-tier-copy { max-width: 44rem; }
.custom-tier-copy h3 { font-size: 1.5rem; margin-bottom: .35rem; }
.custom-tier-copy p { font-size: var(--size-base); }

/* The package photographs are grey until they are hovered or touched. Then they fade to their true
   colours, and fade back to grey when the pointer or finger leaves. scripts/touch.js adds the touched state
   while a finger is on the photograph. */
@media (hover: hover) {
  .tier-media:hover img { filter: none; transform: scale(1.03); }
}
.tier-media.is-touched img, .tier:focus-within .tier-media img { filter: none; transform: scale(1.03); }

/* Neon outline on hover and keyboard focus, shared by every card on the services page.
   --glow is the colour as an r, g, b triple. Package tiers and their custom card glow white.
   Overwatch plans and their custom card glow green (see the Overwatch section below).
   The outline is the card's own border plus layered box shadows, so no extra element is needed. */
.tier, .custom-tier-card {
  --glow: 255, 255, 255;
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.tier:focus-within, .custom-tier-card:focus-within {
  border-color: rgb(var(--glow));
  box-shadow:
    0 0 0 1px rgba(var(--glow), .9),
    0 0 10px rgba(var(--glow), .75),
    0 0 28px rgba(var(--glow), .3);
}
@media (hover: hover) {
  .tier:hover, .custom-tier-card:hover {
    border-color: rgb(var(--glow));
    box-shadow:
      0 0 0 1px rgba(var(--glow), .9),
      0 0 10px rgba(var(--glow), .75),
      0 0 28px rgba(var(--glow), .3);
  }
  .tiers .tier:hover, #tier-custom:hover { background-color: #141917; }
}

/* Overwatch plans. Four cards over a faded photograph. The photograph is set in the modifier below, like the other
   parallax bands. Its own wash fades the picture into the page on all four sides, so no hard edge shows. */
.parallax--overwatch::before { background-image: url('../assets/services/lawithanx.png'); background-position: center; opacity: .75; }
.parallax--overwatch::after {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 12, 11, .55) 22%, rgba(10, 12, 11, .55) 78%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
    linear-gradient(rgba(var(--accent-rgb), .035), rgba(var(--accent-rgb), .035));
}
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-sm); align-items: stretch; }
.plan .tier-body { padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.plan h3 { margin-bottom: .5rem; font-size: 1.5rem; }
.plan-price { margin-bottom: var(--sp-sm); font: 500 1.125rem/1.3 var(--font-heading); color: var(--accent); }
.plan-price span { font: 400 var(--size-sm)/1 var(--font-body); color: var(--muted); }
.plan-note { font-size: var(--size-sm); }

/* Overwatch cards glow green (the same glow rules as above, with a different colour) */
.plan, #plan-custom { --glow: var(--accent-rgb); }

/* Overwatch cards: on hover the jaguar print covers the whole card. It fades in gently from black, and fades
   out again to the normal card colour. A dark scrim keeps the text readable. The photograph is
   assets/services/jaguar-military-print.jpeg. The cards stay still, only the colours change. */
.plans .plan, #plan-custom { isolation: isolate; }
.plans .plan > *, #plan-custom > * { position: relative; z-index: 2; }
.plans .plan::before, #plan-custom::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: #000 url('../assets/services/jaguar-military-print.jpeg') center / cover no-repeat;
  opacity: 0; filter: brightness(0);
  transition: opacity 1s ease, filter 1.3s ease;
}
.plans .plan::after, #plan-custom::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 11, 10, .5) 0%, rgba(9, 11, 10, .8) 100%);
  opacity: 0; transition: opacity 1s ease;
}
.plans .plan:focus-within::before, #plan-custom:focus-within::before { opacity: 1; filter: brightness(.9); }
.plans .plan:focus-within::after, #plan-custom:focus-within::after { opacity: 1; }
@media (hover: hover) {
  .plans .plan:hover::before, #plan-custom:hover::before { opacity: 1; filter: brightness(.9); }
  .plans .plan:hover::after, #plan-custom:hover::after { opacity: 1; }
}

/* Create, innovate, secure. Three disciplines, each with an icon on the left of its title. */
.principles li { display: grid; grid-template-columns: minmax(280px, .9fr) 1.6fr; gap: var(--sp-lg); padding: var(--sp-lg) 0; border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principle-title { display: flex; align-items: center; gap: var(--sp-sm); }
.principle-title h3 { font-size: 1.4rem; }
.principles p { max-width: 56ch; }
.icon-green { flex: none; width: 40px; height: 40px; object-fit: contain; }

/* Privacy notice. It uses the standard container, so it lines up with the heading, and the same body text size as the terms page. */
.legal-date { margin-bottom: var(--sp-xl); font-size: var(--size-sm); }
.legal h2 { margin: var(--sp-xl) 0 var(--sp-xs); font-size: 1.5rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { max-width: 62ch; font-size: var(--size-base); line-height: var(--lh-long); }
.legal ul { margin: var(--sp-xs) 0 0; padding-inline-start: 1.1rem; list-style: disc; color: var(--muted); }
.legal a { color: var(--accent); border-bottom: .0625rem solid rgba(var(--accent-rgb), .4); }

/* Terms of service and privacy notice. Both use the standard page hero (same height and heading position as every page).
   Each has its own photograph, set below. */
.terms-hero { background-image: url('../assets/jaguar-face.jpg'); background-position: center 49%; }   /* 49% keeps the eyes in view */
.privacy-hero { background-image: url('../assets/privacy-bg.jpeg'); background-position: center right; }

/* Terms rows. Each row has a big number, a thin green rule, an icon and the text. The numbers come from a CSS counter.
   To resize every icon, change --term-icon. All icons sit in a square box of that size, so they line up. */
.terms-wrap .legal-date { margin-bottom: var(--sp-lg); }

.terms { --term-number: clamp(2.25rem, 8vw, 4rem); --term-icon: clamp(3rem, 9vw, 5rem); counter-reset: term; }
.term {
  counter-increment: term;
  display: grid; grid-template-columns: 5.5rem auto var(--term-icon) 1fr; grid-template-areas: "number rule icon body";
  align-items: start; column-gap: var(--sp-lg); row-gap: var(--sp-sm);
  padding: var(--sp-lg) 0;
}
.term + .term { border-top: .0625rem solid rgba(255, 255, 255, .22); }
.term::before { grid-area: number; content: counter(term, decimal-leading-zero); font: 700 var(--term-number)/1 var(--font-heading); letter-spacing: .04em; color: var(--text); }   /* the number */
.term::after { grid-area: rule; content: ''; align-self: start; width: .125rem; min-height: 4rem; margin-top: .5rem; background: var(--accent); }   /* the thin green rule */
.term-icon { grid-area: icon; justify-self: start; width: var(--term-icon); height: var(--term-icon); margin-top: .25rem; object-fit: contain; }
.term-body { grid-area: body; }
.term-body h2 { margin-bottom: var(--sp-xs); font: 600 1.05rem/1.3 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.term-body p { max-width: 62ch; font-size: var(--size-base); line-height: var(--lh-long); color: var(--text); }

/* Breakpoints, from large to small */
@media (max-width: 1024px) {
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split, .magazine { grid-template-columns: 1fr; }
  .term { grid-template-columns: 5rem auto var(--term-icon) 1fr; column-gap: var(--sp-md); padding: var(--sp-md) 0; }
}

@media (max-width: 768px) {
  /* The home photograph fills the first screen below the top bar, like the cover on every other page.
     The list of standards starts below the fold, so nothing sits on the photograph on first load. */
  .hero { display: block; min-height: 0; }
  .hero-media, .hero::before, .hero::after { bottom: auto; height: var(--hero-h); }
  .hero-inner { display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--hero-top); padding-bottom: var(--sp-xl); min-height: var(--hero-h); }
  .hero-media { object-position: 68% center; }
  .hero::before { background: linear-gradient(180deg, rgba(9, 11, 10, .88) 0%, rgba(9, 11, 10, .7) 60%, var(--black) 100%); }
  .hero-facts-wrap { position: static; background: var(--bg); border-top: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-facts { grid-template-columns: 1fr 1fr; gap: .75rem var(--sp-sm); padding: 1.25rem 0; font-size: .6875rem; letter-spacing: .06em; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .principles li { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 640px) {
  .tiers { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .custom-tier-card .btn { width: 100%; }
  /* Terms: the text drops under the number, rule and icon */
  .term { grid-template-columns: auto auto 1fr; grid-template-areas: "number rule icon" "body body body"; align-items: center; column-gap: var(--sp-sm); }
  .term::after { align-self: stretch; min-height: 3rem; margin-top: 0; }
  .term-icon { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-media img,
  .tier, .custom-tier-card,
  .plans .plan::before, #plan-custom::before,
  .plans .plan::after, #plan-custom::after { transition: none; }
}