:root{
    --ink:#1B2A4A;
    --paper:#F5F3EC;
    --paper-raised:#FFFFFF;
    --text:#2A2A28;
    --text-muted:#5B5B54;
    --brass:#A0822F;
    --sage:#63715A;
    --hairline:#D8D3C4;
    --hairline-strong:#B9B29B;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--paper);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    color:var(--ink);
    font-weight:500;
    line-height:1.1;
  }

  .mono{font-family:'IBM Plex Mono', monospace;}

  a{color:inherit;}

  :focus-visible{
    outline:2px solid var(--brass);
    outline-offset:3px;
  }

  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:1000;
    padding:28px 0;
    border-bottom:1px solid var(--hairline);
    background:rgba(245,243,236,0.72);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(20px);
    box-shadow:0 1px 0 rgba(27,42,74,0.04);
  }
  header .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
  }
  .brand{
    display:flex;
    align-items:center;
    text-decoration:none;
  }
  .brand-logo{
    height:38px;
    width:auto;
    display:block;
  }
  @media (max-width: 560px){
    .brand-logo{height:32px;}
  }

  /* ---------- Nav / mobile dropdown ----------
     Uses the "checkbox hack": a hidden checkbox + label toggle a sibling
     nav's visibility purely with CSS, no reliance on <details> semantics
     or JavaScript. Desktop-first: nav is visible by default; the mobile
     media query below is what collapses it into a dropdown. */
  .nav-toggle-checkbox{
    position:absolute;
    opacity:0;
    width:1px; height:1px;
    pointer-events:none;
  }
  .hamburger-label{
    display:none;
    cursor:pointer;
  }

  nav{display:block;}

  nav ul{
    display:flex;
    gap:32px;
    list-style:none;
  }
  nav a{
    text-decoration:none;
    font-size:0.92rem;
    color:var(--text);
    position:relative;
    padding-bottom:4px;
  }
  nav a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:var(--brass);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  @media (hover:hover){
    nav a:hover::after{transform:scaleX(1);}
  }

  /* Hamburger icon, mobile only */
  .hamburger-icon{
    width:22px;
    height:16px;
    position:relative;
    display:block;
  }
  .hamburger-icon span{
    position:absolute;
    left:0; right:0;
    height:2px;
    background:var(--ink);
    border-radius:1px;
    transition:transform .22s ease, opacity .18s ease;
  }
  .hamburger-icon span:nth-child(1){top:0;}
  .hamburger-icon span:nth-child(2){top:7px;}
  .hamburger-icon span:nth-child(3){top:14px;}
  .nav-toggle-checkbox:checked ~ .hamburger-label .hamburger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle-checkbox:checked ~ .hamburger-label .hamburger-icon span:nth-child(2){opacity:0;}
  .nav-toggle-checkbox:checked ~ .hamburger-label .hamburger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- Hero ---------- */
  .hero{
    padding:88px 0 96px;
    border-bottom:1px solid var(--hairline);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
    align-items:start;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--brass);
  }
  .hero h1{
    font-size:2.9rem;
    max-width:11ch;
    margin-bottom:22px;
  }
  .hero p.lede{
    font-size:1.08rem;
    color:var(--text-muted);
    max-width:46ch;
    margin-bottom:32px;
  }
  .hero-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-block;
    padding:13px 26px;
    font-size:0.92rem;
    text-decoration:none;
    border-radius:2px;
    font-weight:500;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
  }
  @media (hover:hover){
    .btn-primary:hover{background:#0f1a30;}
    .btn-ghost:hover{border-color:var(--ink);}
  }
  .btn-primary:active{background:#0f1a30;}
  .btn-ghost{
    border:1px solid var(--hairline-strong);
    color:var(--ink);
  }

  /* ---------- Credentials card (signature element) ---------- */
  .cred-card{
    background:var(--paper-raised);
    border:1px solid var(--hairline);
    position:relative;
    padding:30px 28px 26px;
  }
  .cred-card::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid var(--hairline);
    pointer-events:none;
  }
  .cred-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px dashed var(--hairline-strong);
  }
  .cred-head-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .seal{
    width:52px; height:52px;
    border:1.5px solid var(--brass);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
  }
  .seal::before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid var(--brass);
    border-radius:50%;
    opacity:0.6;
  }
  .seal span{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.55rem;
    font-weight:500;
    color:var(--brass);
    letter-spacing:0.02em;
  }
  .cred-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:10px 0;
    border-bottom:1px solid var(--hairline);
    gap:16px;
  }
  .cred-row:last-child{border-bottom:none;}
  .cred-label{
    font-size:0.8rem;
    color:var(--text-muted);
  }
  .cred-value{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.85rem;
    text-align:right;
    color:var(--ink);
    font-weight:500;
  }

  section, #credentials{scroll-margin-top:88px;}

  /* ---------- Section shared ---------- */
  section{padding:88px 0;}
  section.divider{border-bottom:1px solid var(--hairline);}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:44px;
    gap:24px;
    flex-wrap:wrap;
  }
  .section-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    color:var(--sage);
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .section-head h2{font-size:1.9rem;}

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  .about-grid p{
    color:var(--text-muted);
    margin-bottom:16px;
    max-width:52ch;
  }
  .stat-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .stat-row{
    display:flex;
    justify-content:space-between;
    padding:18px 0;
    border-bottom:1px solid var(--hairline);
  }
  .stat-row:first-child{border-top:1px solid var(--hairline);}
  .stat-label{color:var(--text-muted); font-size:0.92rem;}
  .stat-value{font-family:'IBM Plex Mono', monospace; color:var(--ink); font-weight:500;}

  /* ---------- Services — ledger table callback ---------- */
  .ledger{
    width:100%;
    border-collapse:collapse;
  }
  .ledger thead th{
    text-align:left;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--paper);
    background:var(--ink);
    padding:14px 18px;
    font-weight:500;
  }
  .ledger tbody td{
    padding:20px 18px;
    border-bottom:1px solid var(--hairline);
    vertical-align:top;
  }
  @media (hover:hover){
    .ledger tbody tr:hover{background:rgba(160,130,47,0.05);}
  }
  .ledger .item-name{
    font-weight:600;
    color:var(--ink);
    margin-bottom:4px;
  }
  .ledger .item-desc{
    color:var(--text-muted);
    font-size:0.92rem;
    max-width:48ch;
  }
  .placeholder-tag{
    display:inline-block;
    margin-top:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    color:var(--brass);
    border:1px dashed var(--brass);
    padding:2px 8px;
    letter-spacing:0.05em;
  }

  /* ---------- Contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
  }
  .contact-list{list-style:none;}
  .contact-list li{
    padding:16px 0;
    border-bottom:1px solid var(--hairline);
    display:flex;
    justify-content:space-between;
    gap:20px;
  }
  .contact-list li:first-child{border-top:1px solid var(--hairline);}
  .contact-list .label{color:var(--text-muted); font-size:0.85rem;}
  .contact-list .value{font-family:'IBM Plex Mono', monospace; font-size:0.92rem; text-align:right;}

  form{display:flex; flex-direction:column; gap:16px;}
  label{font-size:0.8rem; color:var(--text-muted); margin-bottom:6px; display:block;}
  input, textarea{
    width:100%;
    background:var(--paper-raised);
    border:1px solid var(--hairline-strong);
    padding:12px 14px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    color:var(--text);
    border-radius:2px;
    -webkit-appearance:none;
    appearance:none;
  }
  textarea{resize:vertical; min-height:100px;}
  input:focus, textarea:focus{border-color:var(--brass);}

  /* ---------- Footer ---------- */
  footer{
    padding:40px 0;
    background:var(--ink);
    color:var(--paper);
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  footer .foot-brand{
    font-family:'Fraunces', serif;
    font-size:1.05rem;
  }
  footer .foot-meta{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    color:#B9B29B;
    display:flex;
    gap:24px;
    flex-wrap:wrap;
  }
  .built-by-badge {
    position: fixed !important;
    bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    right: 20px !important;
    z-index: 1002;
    pointer-events: none; /* purely a watermark — never blocks taps on content beneath it */
  }
  .built-by-badge img{
    display:block;
    height:64px;
    width:auto;
    max-width:64px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
    .hero h1{font-size:2.2rem; max-width:none;}
    section{padding:64px 0;}
    .wrap{padding:0 20px;}
    .section-head{align-items:flex-start;}
  }

  @media (max-width: 480px){
    .hero{padding:56px 0 64px;}
    .hero h1{font-size:1.75rem;}
    .hero p.lede{font-size:1rem;}
    .hero-actions{flex-direction:column;}
    .hero-actions .btn{width:100%; text-align:center;}

    .cred-card{padding:22px 18px 18px;}

    section{padding:48px 0;}
    .section-head h2{font-size:1.5rem;}

    /* Contact rows: stack label above value instead of squeezing side by side */
    .contact-list li{flex-direction:column; align-items:flex-start; gap:4px;}
    .contact-list .value{text-align:left;}

    .ledger .item-desc{max-width:none;}
    form button.btn{width:100%; text-align:center;}
  }

  @media (max-width: 560px){
    /* Desktop nav becomes a dropdown, opened via the hamburger label */
    .hamburger-label{
      display:flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      position:relative;
      z-index:1002;
    }
    /* On mobile, nav is hidden until the checkbox is checked */
    nav{
      display:none;
    }
    .nav-toggle-checkbox:checked ~ nav{
      display:block;
      position:absolute;
      top:100%;
      right:0;
      margin-top:12px;
      min-width:220px;
      background:var(--paper-raised);
      border:1px solid var(--hairline);
      box-shadow:0 12px 28px rgba(27,42,74,0.14);
      padding:8px;
      z-index:1001;
    }
    .nav-toggle-checkbox:checked ~ nav ul{
      flex-direction:column;
      gap:0;
    }
    .nav-toggle-checkbox:checked ~ nav ul li{
      border-bottom:1px solid var(--hairline);
    }
    .nav-toggle-checkbox:checked ~ nav ul li:last-child{border-bottom:none;}
    .nav-toggle-checkbox:checked ~ nav a{
      display:block;
      padding:14px 12px;
    }
    .nav-toggle-checkbox:checked ~ nav a::after{display:none;}
  }

  @media (min-width: 561px){
    /* On larger screens the hamburger toggle is switched off entirely
       and the nav links display inline next to the logo, as normal. */
    .hamburger-label{display:none;}
    nav{
      display:block;
      position:static;
    }
  }

  /* ---------- Quotation tracker page ---------- */
  .page-head{
    padding:64px 0 40px;
    border-bottom:1px solid var(--hairline);
  }
  .page-head h1{font-size:2.1rem; margin-bottom:14px;}
  .page-head p{color:var(--text-muted); max-width:56ch;}

  .storage-note{
    margin-top:22px;
    padding:12px 16px;
    background:var(--paper-raised);
    border:1px dashed var(--hairline-strong);
    font-size:0.82rem;
    color:var(--text-muted);
    max-width:64ch;
  }
  .storage-note strong{color:var(--ink);}

  .stat-strip{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--hairline);
    border:1px solid var(--hairline);
    margin:36px 0 0;
  }
  .stat-tile{
    background:var(--paper-raised);
    padding:20px 22px;
  }
  .stat-tile .n{
    font-family:'IBM Plex Mono', monospace;
    font-size:1.5rem;
    color:var(--ink);
    font-weight:500;
    display:block;
  }
  .stat-tile .l{
    font-size:0.78rem;
    color:var(--text-muted);
    margin-top:4px;
    display:block;
  }

  .tracker-body{padding:56px 0 96px;}
  .tracker-panel{
    background:var(--paper-raised);
    border:1px solid var(--hairline);
    padding:28px;
    margin-bottom:44px;
  }
  .tracker-panel h2{font-size:1.15rem; margin-bottom:20px;}
  .form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .form-grid .span-2{grid-column:1 / -1;}
  select{
    width:100%;
    background:var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B5B54' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    border:1px solid var(--hairline-strong);
    padding:12px 36px 12px 14px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    color:var(--text);
    border-radius:2px;
    -webkit-appearance:none;
    appearance:none;
  }
  select:focus{border-color:var(--brass);}

  /* Overrides inline styles set by the tracker's JS status dropdown,
     needed since inline style attributes beat plain stylesheet rules */
  .status-select{
    font-size:16px !important;
    padding:10px 30px 10px 10px !important;
    min-height:40px !important;
    background-position:right 8px center !important;
  }

  .tracker-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    position:relative;
  }
  .tracker-table-wrap::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:28px;
    background:linear-gradient(to right, transparent, var(--paper-raised));
    pointer-events:none;
  }
  .tracker-table{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
  }
  .tracker-table thead th{
    text-align:left;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--paper);
    background:var(--ink);
    padding:12px 14px;
    font-weight:500;
    white-space:nowrap;
  }
  .tracker-table tbody td{
    padding:14px;
    border-bottom:1px solid var(--hairline);
    font-size:0.9rem;
    vertical-align:middle;
  }
  @media (hover:hover){
    .tracker-table tbody tr:hover{background:rgba(160,130,47,0.05);}
  }
  .tracker-table .amount{font-family:'IBM Plex Mono', monospace; color:var(--ink);}
  .tracker-table .quote-no{font-family:'IBM Plex Mono', monospace; color:var(--ink); font-weight:500;}

  .row-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
  }
  .icon-btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.04em;
    background:none;
    border:1px solid var(--hairline-strong);
    color:var(--text-muted);
    padding:8px 12px;
    border-radius:2px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .icon-btn.danger{
    color:#9C3B3B;
    border-color:#D8B9B9;
  }
  @media (hover:hover){
    .icon-btn.danger:hover{background:#9C3B3B; color:#fff; border-color:#9C3B3B;}
  }
  .icon-btn.danger:active{background:#9C3B3B; color:#fff; border-color:#9C3B3B;}

  .empty-state{
    display:none;
    padding:40px 20px;
    text-align:center;
    color:var(--text-muted);
    font-size:0.92rem;
    border:1px dashed var(--hairline-strong);
    background:var(--paper-raised);
  }

  .footer-wrap{
    padding-bottom:64px; /* keeps footer text clear of the fixed built-by badge on small screens */
  }

  /* ================================================
     Mobile refinements — phones (Android: Samsung/
     Huawei etc. typically 360–412px wide)
     ================================================ */

  /* Prevent accidental horizontal overflow without breaking the sticky
     header (overflow-x:hidden on html/body disables position:sticky) */
  img, svg{ max-width:100%; height:auto; }

  /* Comfortable, consistent tap targets everywhere on touch devices */
  a, button, .btn, select, input, textarea, summary{
    -webkit-tap-highlight-color:transparent;
  }

  @media (max-width: 780px){
    /* ---- Quotation tracker: stat strip ---- */
    .stat-strip{
      grid-template-columns:repeat(2, 1fr);
    }
    .stat-tile{padding:16px 16px;}
    .stat-tile .n{font-size:1.25rem;}

    .page-head{padding:44px 0 32px;}
    .page-head h1{font-size:1.65rem;}

    .tracker-body{padding:36px 0 72px;}
    .tracker-panel{padding:20px;}

    /* ---- Quotation tracker: form ---- */
    .form-grid{grid-template-columns:1fr;}
  }

  @media (max-width: 640px){
    /* ---- Quotation tracker: table becomes stacked cards ---- */
    .tracker-table-wrap{overflow-x:visible;}
    .tracker-table-wrap::after{display:none;}
    .tracker-table{min-width:0; width:100%;}

    .tracker-table thead{
      position:absolute;
      width:1px; height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap; /* keep headers for screen readers, hide visually */
    }
    .tracker-table, .tracker-table tbody, .tracker-table tr, .tracker-table td{
      display:block;
      width:100%;
    }
    .tracker-table tr{
      background:var(--paper-raised);
      border:1px solid var(--hairline);
      margin-bottom:14px;
      padding:6px 14px;
      border-radius:2px;
    }
    .tracker-table td{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      padding:12px 0;
      border-bottom:1px solid var(--hairline);
      text-align:right;
    }
    .tracker-table td:last-child{border-bottom:none;}
    .tracker-table td::before{
      content:attr(data-label);
      font-family:'IBM Plex Mono', monospace;
      font-size:0.68rem;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:var(--text-muted);
      text-align:left;
      flex-shrink:0;
    }
    .tracker-table td[data-label="Client"]{
      flex-direction:column;
      align-items:flex-start;
      gap:4px;
      text-align:left;
    }
    .tracker-table td[data-label="Client"]::before{text-align:left;}
    .tracker-table .row-actions{justify-content:flex-end; width:100%;}
    .tracker-table select.status-select{width:auto; max-width:60%;}
  }

  /* ---- Touch target sizing (Android accessibility guidance: 44–48px) ---- */
  @media (max-width: 640px){
    .btn{padding:14px 24px; width:100%; text-align:center; font-size:0.96rem;}
    .hero-actions .btn{width:auto; flex:1 1 auto;}
    input, textarea, select{padding:13px 14px; font-size:16px;}
    .icon-btn{padding:10px 14px; min-height:40px;}
    .status-select{min-height:44px !important;}
  }

  /* ---- Fixed footer badge: slightly smaller on phones ---- */
  @media (max-width: 640px){
    .built-by-badge img{height:48px; width:auto; max-width:48px;}
  }