/* Titan layout standard (t118u)
   Locked homepage and future-page layout.
   Do not change these rules unless Levi asks.
   Colours and type: existing Titan orange #F26B1F, charcoal #1C1C1E,
   bone #F4F2EF, Bebas Neue and Barlow.
   Include this file after titan.css on every page that uses the standard.
*/

:root{
  --tg-orange:#F26B1F;
  --tg-charcoal:#1C1C1E;
  --tg-bone:#F4F2EF;
  --tg-panel:#1C1C1E;
  --tg-border:#3b3b40;
  --tg-media-sticker-bg:#E6E6E6;
  --tg-text:#F4F2EF;
  --tg-max:1280px;
  --tg-card-gap:12px;
  --tg-card-radius:12px;
  --tg-card-pad:16px;
  --tg-section-y:56px;
  --tg-h2-size:36px;
  --tg-h2-space:24px;
  --tg-title-size:26px;
  --tg-title-lh:1.1;
  --tg-body:16px;
}

@media(max-width:767px){
  :root{ --tg-section-y:40px; }
}

body.tg-standard .wrap{
  max-width:var(--tg-max);
  margin-left:auto;
  margin-right:auto;
}

/* ----- Sections ----- */
body.tg-standard main .tg-section,
body.tg-standard main #home-machines.tg-section,
body.tg-standard main #home-stickers.tg-section,
body.tg-standard main #home-bespoke.tg-section,
body.tg-standard main #reviews.tg-section,
body.tg-standard main #home-sample.tg-section,
body.tg-standard main #home-how.tg-section,
body.tg-standard main #home-grades.tg-section,
body.tg-standard main #seo-text.tg-section{
  padding-top:var(--tg-section-y);
  padding-bottom:var(--tg-section-y);
}
body.tg-standard main #home-hero.tg-section{
  padding-top:0;
  padding-bottom:0;
}
.tg-section--dark{
  background:var(--tg-charcoal);
  color:#fff;
}
.tg-section--light{
  background:var(--tg-bone);
  color:var(--tg-charcoal);
}
body.tg-standard main .tg-section-head{
  margin:0;
  text-align:left;
}
body.tg-standard main h2,
body.tg-standard main .tg-section h2,
body.tg-standard main .tg-section-head h2{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:var(--tg-h2-size);
  line-height:1.1;
  letter-spacing:normal;
  text-align:left;
  margin:0 0 var(--tg-h2-space);
}
body.tg-standard main .tg-section-head p{
  margin:0 0 var(--tg-h2-space);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif;
  font-size:var(--tg-body);
  line-height:1.5;
}
body.tg-standard main .tg-section--dark h2,
body.tg-standard main .tg-section--dark .tg-section-head h2{color:#fff;}
body.tg-standard main .tg-section--light h2,
body.tg-standard main .tg-section--light .tg-section-head h2{color:var(--tg-charcoal);}
.tg-section--dark p,
.tg-section--dark li,
.tg-section--dark .tg-section-head p{
  font-size:var(--tg-body);
  color:var(--tg-text);
}
.tg-section--light p,
.tg-section--light li,
.tg-section--light .tg-section-head p{
  font-size:var(--tg-body);
  color:var(--tg-charcoal);
}
.tg-section a{
  font-size:var(--tg-body);
}
.tg-section--dark .cat-copy a{
  color:var(--tg-orange);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ----- Grid ----- */
.tg-grid{
  display:grid;
  gap:var(--tg-card-gap);
  align-items:stretch;
}
.tg-grid--3{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tg-grid--4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tg-grid--thirds{
  grid-template-columns:1fr;
}
@media(min-width:768px){
  .tg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tg-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .tg-grid--thirds{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ----- One card ----- */
.tg-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  background:var(--tg-panel);
  color:#fff;
  border:1px solid var(--tg-border);
  border-radius:var(--tg-card-radius);
  overflow:hidden;
  text-decoration:none;
  box-sizing:border-box;
}
a.tg-card{
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
a.tg-card:hover{
  transform:translateY(-4px);
  border-color:var(--tg-orange);
  box-shadow:0 18px 40px #0006;
  color:#fff;
}

.tg-card-media{
  aspect-ratio:4/3;
  width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--tg-charcoal);
}
.tg-card-media img{
  display:block;
  width:100%;
  height:100%;
}
.tg-card-media--photo img{
  object-fit:cover;
  object-position:center;
}
.tg-card-media--sticker{
  background:var(--tg-media-sticker-bg);
  padding:16px;
  box-sizing:border-box;
}
.tg-card-media--sticker img{
  object-fit:contain;
  object-position:center;
}

.tg-card-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:8px;
  padding:var(--tg-card-pad);
  background:var(--tg-panel);
  color:#fff;
}
.tg-card-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  min-height:calc(var(--tg-title-size) * var(--tg-title-lh) * 2);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-weight:400;
  font-size:var(--tg-title-size);
  line-height:var(--tg-title-lh);
  letter-spacing:normal;
  color:#fff;
}
.tg-card-price{
  display:block;
  min-height:24px;
  margin:0;
  font:600 16px/24px Barlow,sans-serif;
  color:var(--tg-text);
}
.tg-card-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font:700 16px/1.3 Barlow,sans-serif;
  color:var(--tg-orange);
}

/* Plain cards (reviews, steps, materials): same corners, border and padding, no image */
.tg-card--plain{
  padding:var(--tg-card-pad);
}
.tg-card--plain .tg-card-title{
  margin-bottom:0;
}
.tg-card--plain p,
.tg-card--plain blockquote,
.tg-card--plain blockquote p{
  margin:0;
  font-family:Barlow,"Segoe UI",system-ui,sans-serif;
  font-size:var(--tg-body);
  line-height:1.5;
  color:var(--tg-text);
  font-weight:500;
}
.tg-card--plain blockquote{flex:1 1 auto;}
.tg-card--plain blockquote p{margin:0;}
.tg-card-note{
  margin-top:auto;
  padding-top:12px;
  font:600 16px/1.4 Barlow,sans-serif;
  color:var(--tg-text);
}
.tg-card-step{
  display:block;
  margin:0 0 8px;
  font:400 26px/1 "Bebas Neue",Impact,sans-serif;
  color:var(--tg-orange);
}

.tg-standard .mt-2{margin-top:24px;}

.tg-standard .grade-life{
  margin:16px 0 0;
  font:400 16px/1.5 Barlow,sans-serif;
  color:var(--tg-charcoal);
}