/* --START OF STAMP-- */
.pl-stamp{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2147483647;

  opacity: 0.22;
  color: #9f3611;           /* brick */
  mix-blend-mode: multiply;

  overflow: visible;        /* important */
}

.pl-stamp svg{
  width: min(86vw, 860px);
  height: auto;
  overflow: visible;        /* important */
  filter: blur(0.2px);
}

  /* --END OF STAMP-- */


html{ overflow-y: scroll; }
:root{
      --brick:#9f3611;
      --orange:#fa7d17;
      --grey:#767171;
      --teal:#1a646b;
      --brightteal:#2b7f88;
      --mutedteal:#A3BCC5;
      --lightteal:#d2e8e4;
      --softteal:#e7f1f3;
      --cream:#fffdf8;
      --wht:#ffffff;
      --snpgrey:#f7f7f7;
      --textmain:#2c2c2c;

      --contentMax: 1120px;
      --pagePad: clamp(16px, 4vw, 24px);
      --grdntgrey: linear-gradient(to bottom, #f7f5ed, #f7f7f7);
    }

    *{ box-sizing:border-box; }

    html, body{
      margin:0;
      padding:0;
      background: var(--wht);
      color: var(--textmain);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    /* =========================
       GLOBAL PAGE LAYOUT
       Ensures footer stays at bottom on every page.
       ========================= */
    html{ height: 100%; }
    body{
      min-height: 100svh;
      display: flex;
      flex-direction: column;
    }

    main{ flex: 1 0 auto; }
    footer{ flex-shrink: 0; }

    /* Gradient pages: remove header divider so the gradient reads as one continuous field */
    body.page-gradient header{
      border-bottom: none;
    }

a{
  color: var(--brick);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover{
  color: var(--orange);
}

.pagetitle{
  font-weight: 700;
  color: #555;
  font-size: clamp(24px, 4vw, 48px);
  text-align: center;
  margin: 0.6em 0 .4em;
}

    img{ max-width:100%; height:auto; display:block; }
  

    .container{
      max-width: var(--contentMax);
      margin: 0 auto;
      padding-inline: var(--pagePad);
    }

    .top-strip{
      height: 20px;
      background: var(--brick);
    }

    /* =========================
       HEADER
       ========================= */
    header{
      background: var(--snpgrey);
      border-bottom: 1px solid #f0e5d8;
    }

    .header-wrap{
      max-width: var(--contentMax);
      margin: 0 auto;
      padding-inline: var(--pagePad);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      padding-bottom: 14px;
      gap: 20px;
    }

    .brand{
      display:flex;
      align-items:center;
      min-width: 0;
    }

.brand-link { display: block; }

    .brand-logo{
      width: min(400px, 92vw);
      max-width: 400px;
    }
.pl-pattern{
  color: #9f3611;
}

.pl-logic{
  color: #514338; 
}

.pl-o{
  color: #fa7d17; 
}


    nav{
      display:flex;
      justify-content:flex-end;
      min-width: 0;
    }

    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap: 22px;
      row-gap: 10px;
      font-size: 0.95rem;
      color: var(--grey);
    }

    nav a:hover{
      color: var(--brick);
      text-decoration: underline;
    }

    nav a{ 
      white-space:nowrap;
      text-decoration:none
     }

.content-block{
    text-align: left;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.content-block p{
  max-width: 65ch;
  margin: 14px auto;
  text-align: left;
  line-height: 1.65;
}




    @media (max-width: 640px){
      .header-wrap{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .brand{
        width: 100%;
      }

      nav{
        width: 100%;
        justify-content: flex-start;
      }

      nav ul{
        justify-content: flex-start;
        gap: 14px;
      }
    }

    /* =========================
       HERO
       ========================= */
    .hero{
      background: var(--wht);
      border-bottom: 1px solid var(--lightteal);
      padding: 56px 0 64px;
    }

    .hero-inner{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 40px;
      align-items: center;
    }

    .hero-title{
      margin:0 0 18px;
      font-size: clamp(2.2rem, 3.2vw + 1.1rem, 3.4rem);
      line-height: 1.1;
      color: var(--brick);
    }

    .hero-subtitle{
      margin:0 0 26px;
      max-width: 34rem;
      font-size: 1.05rem;
      color: #514338;
    }
.hero-tags {
  color: var(--brightteal);
  font-size: 0.85rem;    
  letter-spacing: 0.04em;
}


    .btn-primary{
      display:inline-block;
      padding: 12px 28px;
      border-radius: 999px;
      border: none;
      background: var(--orange);
      color: #fff;
      font-weight: 600;
      font-size: 0.98rem;
      cursor:pointer;
      box-shadow: 0 3px 10px rgba(0,0,0,0.12);
      transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
    }

    .btn-primary:hover{
      background:#e27113;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    }

    .hero-geo{
      justify-self: end;
      display:grid;
      gap: clamp(8px, 2vw, 16px);
      grid-template-columns: repeat(3, clamp(28px, 7vw, 80px));
      grid-template-rows: repeat(4, clamp(28px, 7vw, 80px));
      width: max-content;
    }

 

    .geo-shape{ background: var(--mutedteal); }
    .geo-circle{ border-radius: 50%; }
    .geo-half{ border-radius: 80px 80px 0 0; }
    .geo-quarter{ border-radius: 80px 0 0 0; }

    @media (max-width: 768px){
      .hero-geo{ 
        grid-template-columns: repeat(3, clamp(22px, 5vw, 45px));
        grid-template-rows: repeat(4, clamp(22px, 5vw, 45px));
        gap: clamp(6px, 1.5vw, 10px);
      }
    }

    /* =========================
       process
       ========================= */
    .process{
      background: var(--softteal);
      padding: 50px 0 56px;
    }

    .section-title{
      margin:0 0 12px;
      font-size: 1.6rem;
      color: var(--teal);
    }

    .process-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .process-card{
      background:#fff;
      border-radius: 14px;
      padding: 22px 20px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .process-icon{
      width:32px;
      height:32px;
      border-radius:50%;
      border: 2px solid var(--teal);
      position:relative;
    }

    .process-icon::after{
      content:"";
      position:absolute;
      width:10px;
      height:10px;
      background: var(--orange);
      border-radius:50%;
      right:-4px;
      bottom:-4px;
    }
.process-icon{
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px; /* keeps it visually similar inside the 32px circle */
}

.process-icon.pm{ background-image: url("../img/ic_patternmapping.png"); }
.process-icon.sd{ background-image: url("../img/ic_systemdesign.png"); }
.process-icon.ux{ background-image: url("../img/ic_uxclarity.png"); }


    .process-title{ margin:0; font-weight:600; font-size:1.05rem; color: var(--teal); }
    .process-body{ margin:0; font-size:0.92rem; color:#4a4a4a; }

.process-role{
  margin-top: auto;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  opacity: 0.85;
  text-align: center;
}
.subhead{
  margin: 0 0 20px; 
  font-weight: 450;     
  color: #514338;
  font-size: 1.3em; 
}




    @media (max-width: 720px){
      .process-grid{ grid-template-columns: minmax(0, 1fr); }
    }

    /* =========================
       HOW + PORTFOLIO
       ========================= */
    .how-portfolio{
      background: var(--cream);
      padding: 56px 0;
    }

    .hp-grid{
      display:grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
      gap: 40px;
      align-items:flex-start;
    }

    .hp-block-title{
      margin:0 0 14px;
      font-size:1.3rem;
      color: var(--brick);
    }

    .hp-list{ list-style:none; padding:0; margin:0 0 26px; }
    .hp-list li{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:8px;
      font-size:0.96rem;
    }

    .hp-dot{ width:8px; height:8px; border-radius:50%; background: var(--brightteal); }
    .hp-dot.orange{ background: var(--orange); }

    .hp-flow{ display:flex; flex-direction:column; gap: 15px; max-width: 220px; }
    .hp-step{
      background: var(--softteal);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.85rem;
      color:#000;
      position:relative;
    }

    .hp-step::after{
      content:"↓";
      position:absolute;
      left:50%;
      bottom:-16px;
      transform: translateX(-50%);
      font-size:1.5rem;
      color: var(--mutedteal);
      line-height:1;
    }
    .hp-step:last-child::after{ content:""; }

    .portfolio-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 24px;
    }

    .portfolio-card{
      background:#f4f1ec;
      border-radius:10px;
      padding: 14px 14px 18px;
      border-top: 4px solid var(--teal);
      font-size: 0.9rem;
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .portfolio-card-title{ font-weight:600; color: var(--teal); }
    .portfolio-card-line{ height:2px; background:#d0c7bb; border-radius:999px; width:70%; }
    .portfolio-card-line.short{ width:40%; }

.portfolio-note{
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: #6f6f6f;
}


    .btn-secondary{
      display:inline-block;
      padding: 10px 22px;
      border-radius: 999px;
      background: var(--orange);
      color:#fff;
      border:none;
      cursor:pointer;
      font-weight:600;
      font-size:0.95rem;
    }
    .btn-secondary:hover{ background:#e27113; }


    @media (max-width: 900px){
      .hp-grid{ grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 720px){
      .portfolio-grid{ grid-template-columns: minmax(0, 1fr); }
    }

    /* =========================
       CONTACT
       ========================= */
    .contact{
      background: var(--grdntgrey);
      padding: 52px 0 60px;
    }

   .contact-inner{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 40px;
  align-items:flex-start;
}


    .contact-title{
      margin:0 0 16px;
      font-size:1.4rem;
      color: var(--brick);
    }

    .contact-text{
      margin:0;
      font-size:0.95rem;
      color:#4a4a4a;
      max-width: 20rem;
    }

    .contact-form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 18px;
    }

    .contact-form label{
      display:block;
      margin-bottom:4px;
      font-size:0.78rem;
      text-transform:uppercase;
      letter-spacing:0.04em;
      color:#717171;
    }

    .contact-form input,
    .contact-form textarea{
      width:100%;
      padding: 9px 10px;
      border-radius:6px;
      border: 1px solid #c8d5d8;
      font-size:0.9rem;
      font-family:inherit;
    }

    .contact-form input:focus,
    .contact-form textarea:focus{
      outline: 2px solid var(--lightteal);
      border-color: var(--lightteal);
    }

    .contact-form textarea{
      grid-column: 1 / -1;
      min-height:110px;
      resize:vertical;
    }

    .contact-actions{
      grid-column: 1 / -1;
      margin-top:4px;
    }

    @media (max-width: 900px){
      .contact-inner{ grid-template-columns: minmax(0, 1fr); }
    }

    /* =========================
       FOOTER
       ========================= */
    footer{
      background: var(--teal);
      color:#fff;
      padding: 30px 0 26px;
      margin-top: 0px;
    }

    .footer-inner{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      font-size:0.85rem;
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .footer-logo{
      width:250px;
      filter: brightness(0) invert(1);
    }

    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      align-items:center;
    }

    .footer-links a{ 
      color:#d9ecf0;
    text-decoration: none; }
    .footer-links a:hover{ 
      color: var(--orange); 
      text-decoration: underline;
    }

    /* =========================
       TOAST NOTIFICATION
       ========================= */
    .toast{
      position: fixed;
      bottom: 120px;
      left: 50%;
      transform: translateX(-50%) translateY(150px);
      background: var(--teal);
      color: white;
      padding: 18px 24px;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      z-index: 1000;
      max-width: 90vw;
    }

    .toast.show{
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .toast-icon{
      width: 24px;
      height: 24px;
      background: var(--orange);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
      color: white;
    }

    .toast-message{
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .toast-close{
      background: none;
      border: none;
      color: white;
      font-size: 1.3rem;
      cursor: pointer;
      padding: 0;
      margin-left: 8px;
      opacity: 0.7;
      transition: opacity 0.2s;
      line-height: 1;
    }

    .toast-close:hover{
      opacity: 1;
    }

    .toast-overlay{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .toast-overlay.show{
      opacity: 1;
      visibility: visible;
    }


/* Page background utility (use on any page that should have the portfolio gradient) */
body.page-gradient{
  background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 40%);
}

/* When the page uses the gradient, the header must sit on it (no grey band) */
body.page-gradient header{
  background: transparent;
  border-bottom: none;
}

/* Ensure main doesn't paint a white slab over the body gradient */
body.page-gradient main{
  background: transparent;
}