/* Global paragraph balancing */
    p {
      text-wrap: balance;
    }

    /* About section paragraph width */
    .about-flex-row p.muted {
      width: clamp(28ch, 30vw, 60ch);
      max-width: 100%;
    }
    /* About section flex row and circular image */
    .about-flex-row {
      display: flex;
      align-items: flex-start;
      gap: 2.5em;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
    @media (max-width: 1000px) {
      .about-flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5em;
      }
      .about-flex-row p.muted {
        width: clamp(28ch, 36vw, 60ch);
        text-align: left;
        margin: 0;
      }
    }
    @media (max-width: 700px) {
      .about-flex-row {
        align-items: center;
      }
      .about-flex-row p.muted {
        width: min(90vw, 60ch);
      }
    }
    #about-title, #contact-title {
      font-family: 'Cambo', serif;
      font-weight: 400;
      /* Responsive like the hero, but a touch smaller */
      font-size: clamp(24px, 4vw, 48px);
      line-height: 1.08;
      letter-spacing: 0.01em;
      margin: 0 0 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    /* Services section layout */
    #services {
      background: #1f2718;
      color: #e9efe3;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: clamp(24px, 5vw, 48px) 0;
    }
    .services__inner {
      width: min(var(--maxw), 100%);
      margin: 0 auto;
      padding-left: var(--gutter-inline);
      padding-right: var(--gutter-inline);
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: clamp(32px, 6vw, 96px);
      align-items: start;
    }
    .services__content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(18px, 3vw, 28px);
    }
    .services__text {
      display: inline-flex;
      flex-direction: column;
      gap: 14px;
    }
    .services__headline {
      margin: 0;
      font-family: 'Cambo', serif;
      font-size:clamp(38px,6vw,72px);
      line-height:1.05;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .services__intro {
      margin: 0;
      max-width: 46ch;
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      color: rgba(233, 239, 227, 0.78);
    }
    .services__list {
      display: grid;
      gap: clamp(12px, 2.4vw, 24px);
    }
    .services__item {
      padding-bottom: clamp(10px, 2vw, 18px);
      border-bottom: 1px solid rgba(233, 239, 227, 0.2);
    }
    .services__item:last-of-type {
      border-bottom: none;
    }
    .services__item-title {
      margin: 0 0 0.08em;
      font-family: 'Cambo', serif;
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .services__item-copy {
      margin: 0;
      font-size: clamp(0.95rem, 1.8vw, 1.1rem);
      color: rgba(233, 239, 227, 0.7);
      max-width: 46ch;
    }
    @media (max-width: 1024px) {
      .services__inner {
        grid-template-columns: 1fr;
        gap: clamp(36px, 8vw, 56px);
      }
    }
    @media (max-width: 720px) {
      #services {
        padding: clamp(32px, 10vw, 52px) 2%;
      }
      .services__item {
        padding-bottom: clamp(16px, 4vw, 24px);
      }
      .services__item-title {
        letter-spacing: 0.1em;
      }
    }

    /* Work section tiles */
    #work .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 0;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      min-height: 60vw;
    }
    #work .card {
      position: relative;
      overflow: hidden;
      background-size: 130% auto;
      background-position: center;
      background-repeat: no-repeat;
      transition: background-position 0.35s ease, transform 0.4s cubic-bezier(.4,0,.2,1);
    }
    #work .card:nth-child(1) { background-image: url("../work1_thumb.gif"); }
    #work .card:nth-child(2) { background-image: url("../work4_thumb.png"); }
    #work .card:nth-child(3) { background-image: url("../work3_thumb.png"); }
    #work .card:nth-child(4) { background-image: url("../work2_thumb.gif"); }
    #work .card:nth-child(1):hover,
    #work .card:nth-child(1):focus-visible {
      background-image: url("../work1_thumb.png");
    }
    #work .card:nth-child(3):hover,
    #work .card:nth-child(3):focus-visible {
      background-image: url("../work3_thumb_hover.png");
    }
    #work .card:nth-child(4):hover,
    #work .card:nth-child(4):focus-visible {
      background-image: url("../work2_thumb.png");
    }
    @media (max-width: 700px) {
      #work .grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        min-height: 0;
      }
    }
    #work .grid > .card {
      flex: 1 1 0%;
      aspect-ratio: 1/1;
      background-color: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      min-width: 0;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #work .grid > a.card {
      cursor: pointer;
    }
    #work .grid > a.card:hover,
    #work .grid > a.card:focus-visible {
      background-position: center 54%;
    }
    #services,
    #work,
    #about,
    #contact,
    .footer {
      content-visibility: auto;
      contain-intrinsic-size: 600px;
    }
    /* Hero CTA button area */
    .hero__actions {
      padding-left: 0;
      padding-right: 0;
    }
    /* === HERO SECTION === */
    .hero__content {
      padding-left: 0;
      padding-right: 0;
      position: relative;
      top: -5%;
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 16px;
      width: 100%;
    }
    .hero__text {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      gap: 12px;
      z-index: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .hero__text::before {
      content: "";
      position: absolute;
      top: -24px;
      right: -24px;
      bottom: -24px;
      left: calc(-24px - 10%);
      background: rgba(38, 48, 31, 0.85);
      border-radius: 24px;
      backdrop-filter: blur(4px);
      opacity: 0;
      z-index: -1;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    /* Sidebar type scale: 200% of base */
    .sidepanel{
      font-size:200%;
      line-height:1.25;
      font-family: 'Cambo', serif !important;
    }
    .sidepanel *{
      font-size:inherit;
      font-family: inherit !important;
    }
    :root{
      --bg:#26301f;
      --ink:#e9efe3;      /* tuned off‑white for contrast */
      --muted:#c0c6b5;    /* sage grey */
      --accent:#88d1b3;   /* mint */
      --accent-2:#e7b46a; /* warm */
      --maxw:1280px;
      --gutter-inline: clamp(18px, 4vw, 24px);
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --glass:rgba(255,255,255,.06);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body {
      margin: 0;
      font-family: 'Lexend', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      font-weight: 300;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.5;
    }
    @media (prefers-reduced-motion: no-preference) {
      body.page-transition {
        transition: opacity 200ms ease;
      }
      body.page-transition.page-transition--active {
        opacity: 0;
      }
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Cambo', serif;
      font-weight: 400;
    }
    a{color:inherit}
    .wrap{
      max-width:var(--maxw);
      margin:auto;
      padding-block:24px;
      padding-inline:var(--gutter-inline);
    }

    header{
      position:fixed; top:0; left:0; right:0; z-index:200;
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .blurred-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: clamp(72px, 16.2vw, 162px);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
      background: transparent;
      backdrop-filter: saturate(140%) blur(8px);
      -webkit-backdrop-filter: saturate(140%) blur(8px);
      z-index: 199;
    }
    .blurred-bar.visible {
      opacity: 1;
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      position:relative;
      padding:10px 0;
      min-height:clamp(80px, 18vw, 180px);
    }
    .logo{position:static; transform:none; display:flex; align-items:center; gap:10px; text-decoration:none;}        
    .logo img {
      height: clamp(60px, 12vw, 150px);
      display: block;
      margin: auto;
      transition: transform 1s ease;
    }
    .logo:hover img,
    .logo:focus-visible img,
    .logo:active img {
      filter: brightness(0) saturate(100%) invert(66%) sepia(92%) saturate(638%) hue-rotate(8deg) brightness(102%) contrast(101%);
    }
  .logo-type{display:none !important; font-weight:700; letter-spacing:.4px}

    .hamburger {
      position: static;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      background: transparent;
      cursor: pointer;
      border: none;
    }
    .hamburger span {
      position: relative;
      width: 32px;
      height: 4px;
      background: var(--ink);
      display: block;
    }
    .hamburger span::before,
    .hamburger span::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--ink);
    }
    .hamburger span::before {
      top: -10px;
    }
    .hamburger span::after {
      top: 10px;
    }

    /* Hamburger looping animation on hover */
    @keyframes hamburger-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .hamburger:hover span {
      animation: hamburger-spin 1s linear infinite;
    }

    .close-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; cursor:pointer; border:none; position:relative;}
    .close-btn:before,.close-btn:after{
      content:"";
      position:absolute;
      width:20px;
      height:2px;
      background:var(--ink);
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    }
    .close-btn:before{transform:rotate(45deg)}
    .close-btn:after{transform:rotate(-45deg)}
    .close-btn:hover:before,
    .close-btn:hover:after {
      transform: rotate(225deg);
    }

    .overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:190}
    .overlay.show{opacity:1; pointer-events:auto}

    .sidepanel{position:fixed; top:0; right:0; height:100%; width:300px; max-width:85vw; background:rgba(20,24,15,.96); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .3s ease; z-index:220; display:flex; flex-direction:column}
    .sidepanel.open{transform:none}
    .sidepanel header{position:sticky; top:0; background:transparent; border:none; padding:18px 20px; display:flex; justify-content:flex-end}
    .sidepanel nav{display:flex; flex-direction:column; gap:10px; padding:10px 20px 24px; text-align:right}
    .sidepanel a{
      display:block;
      padding:12px 14px;
      border-radius:12px;
      text-decoration:none;
      border:none;
      font-weight:700;
      letter-spacing:0.04em;
      text-transform:uppercase;
      font-family:inherit;
      position:relative;
      z-index:2;
      transition:color .18s;
    }
    /* Remove static hover background */
    .sidepanel a:hover, .sidepanel a:focus { background: none; }

    /* Highlight box for nav */
    .sidepanel-nav-highlight {
      position: absolute;
      left: 0; right: 0;
      height: 44px;
      background: rgba(103, 122, 39, 0.32);
      border-radius: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s cubic-bezier(.4,0,.2,1), top 0.25s cubic-bezier(.4,0,.2,1);
      z-index: 1;
    }
    .sidepanel-nav-highlight.visible {
      opacity: 1;
    }

    .btn{
      --btn-bg: transparent;
      --btn-fg: var(--ink);
      --btn-b: rgba(233,239,227,.28);
      --btn-bg-hover: rgba(233,239,227,.06);
      --btn-b-hover: rgba(233,239,227,.45);
      display:inline-flex; align-items:center; gap:.5em;
      padding:12px 18px; border-radius:999px;
      border:1px solid var(--btn-b); background:var(--btn-bg); color:var(--btn-fg);
      text-decoration:none; font-weight:700; letter-spacing:.02em;
      transition:background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
    }
    .btn:hover{ background:var(--btn-bg-hover); border-color:var(--btn-b-hover); }
    .btn:active{ transform:translateY(1px); }
    .btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(136,209,179,.45); }

    /* Variants */
    .btn--solid{
      --btn-bg: var(--accent);
      --btn-fg: #0f1611; /* dark label on mint */
      --btn-b: var(--accent);
      --btn-bg-hover: #9fdbc1; /* slightly lighter mint */
      --btn-b-hover: #9fdbc1;
      color: var(--btn-fg);
      border-color: var(--btn-b);
    }
    .btn--muted{ /* optional low-emphasis */
      --btn-bg: rgba(255,255,255,.06);
      --btn-b: rgba(255,255,255,.12);
      --btn-bg-hover: rgba(255,255,255,.10);
      --btn-b-hover: rgba(255,255,255,.22);
    }
    /* Back-compat: map old class to solid */
    .btn-primary{ @supports not (selector(:root)){ } }
    .btn-primary{ background: var(--accent); color:#0f1611; border:1px solid var(--accent); font-weight:700 }
    .btn-primary:hover{ background:#9fdbc1; border-color:#9fdbc1 }

    @property --bg-wave {
      syntax: '<length>';
      inherits: false;
      initial-value: 0px;
    }

    @keyframes heroFloat {
      0%   { --bg-wave: -18px; }
      50%  { --bg-wave: 18px; }
      100% { --bg-wave: -18px; }
    }

    .bg-band{
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      background-color:var(--bg);
      position:relative;
      z-index:1;
      --bg-base-offset:-5vh;
      --bg-offset:0px;
      --bg-wave:0px;
    }
    .bg-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:url('../background1.png') center calc(var(--bg-base-offset) + var(--bg-offset) + var(--bg-wave)) / cover no-repeat;
      opacity:0;
      transition:opacity 1.2s cubic-bezier(.4,0,.2,1);
      z-index:-1;
      will-change:opacity, background-position;
      animation:heroFloat 9s ease-in-out infinite;
    }
    .bg-band::after{
      content:"";
      position:absolute;
      inset:0;
      background:url('../background.gif') center / cover no-repeat;
      opacity:0.3;
      z-index:-2;
      pointer-events:none;
    }
    .bg-band.is-ready::before{opacity:1;}

    .hero {
      padding-top: 80px;
      padding-bottom: 40px;
      min-height: 100vh;
      height: 800px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .hero h1{
      font-family: 'Cambo', serif;
      font-size:clamp(38px,6vw,72px);
      line-height:1.05;
      margin:18px 0;
      text-shadow:
        0 2px 12px rgba(38, 48, 31, 1),   /* tight halo */
        0 0 32px rgba(56, 72, 46, 1);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .hero p{
      max-width:880px;
      color:var(--muted);
      font-size:clamp(16px,2.2vw,20px);
      text-shadow:
         0 1px 8px rgba(38, 48, 31, 1),
         0 0 20px rgba(56, 72, 46, 1);
    }
    main#top{
      position:relative;
      z-index:1;
    }
    #selected-work,
    #about{
      margin-top:40px;
    }
    .chip{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 12px; color:var(--muted); font-size:14px}

    .grid{display:grid; gap:18px}
    @media(min-width:900px){ .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
    .card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow)}
    .contact-card-row{
      justify-content:start;
    }
    .contact-card{
      width:clamp(320px, 60vw, 760px);
      max-width:100%;
      background:transparent;
      border:none;
      border-radius:0;
      padding:0;
      box-shadow:none;
      margin:0;
    }
    .card h3{margin:8px 0 6px}
    .muted{color:var(--muted)}

    .hero__actions{
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 18px;
      justify-content: flex-end;
    }

    .footer{margin:60px 0 30px; color:var(--muted); font-size:14px}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

    .reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
    .reveal.show{opacity:1; transform:none}
    body.no-js .reveal{opacity:1; transform:none}

    @media (max-width: 640px){
  .logo img{display:none}
  .logo-type{display:block !important; font-size:clamp(18px,6vw,22px)}
      .nav{min-height:64px}
      .wrap{padding:18px}
      /* Type tuning for small screens */
      .hero__text::before{opacity:1}
      .hero__text.hero__text--hidden{opacity:0; transform:translateY(20px)}
      body.no-js .hero__text.hero__text--hidden{opacity:1; transform:none}
      .hero h1{font-size:clamp(28px, 9.5vw, 44px); line-height:1.08; letter-spacing:-0.02em}
      .hero p{font-size:clamp(14px,4.2vw,18px); max-width:40ch}
      .btn{padding:10px 14px; font-size:0.95rem}
    }
    @media (max-width: 380px){
  .hero h1{font-size:clamp(26px, 10.5vw, 40px)}
    }
  /* Remove this rule so .logo-type only appears in small screens */
    .nav{min-height:72px}
    html{scroll-behavior:smooth; scroll-padding-top:clamp(72px, 16.2vw, 162px)}
    /* Toast */
    #toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.6); color:white; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:320}
    #toast.show{opacity:1}
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }
    @media (max-width: 600px) {
      .sidepanel {
        font-size: 1.1em;
        padding-left: 18px;
        padding-right: 18px;
      }
      .sidepanel nav {
        padding-left: 0;
        padding-right: 0;
      }
      .sidepanel a {
        font-size: 1em;
        padding-left: 8px;
        padding-right: 8px;
      }
    }