/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */


html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

:root{
  --bg: #ffffff;
  --ink: #0f1115;
  --ink-2:#3a3f4a;
  --muted:#6a7180;
  --line:#e7e8ec;
  --accent:#0f1115; /* keep it monochrome; add a brand color if desired */
  --radius: 14px;
  --maxw: 1120px;
  --ddc-color: white;   /* change color here or inherit from CSS */
  --ddc-stroke: 2;             /* default stroke width */
  --ddc-linecap: round;        /* linecap default */
  --ddc-linejoin: round;       /* linejoin default */
}

/* Fill-only shapes (monogram fills, etc.) */
.ddc-fill {
  fill: var(--ddc-color);
}

/* Stroke-only shapes (rings/outlines) */
.ddc-stroke {
  stroke: var(--ddc-color);
  stroke-width: var(--ddc-stroke);
  stroke-linecap: var(--ddc-linecap);
  stroke-linejoin: var(--ddc-linejoin);
  fill: none;
}

/* Shapes that originally had both fill and stroke */
.ddc-both {
  fill: var(--ddc-color);
  stroke: var(--ddc-color);
  stroke-width: var(--ddc-stroke);
  stroke-linecap: var(--ddc-linecap);
  stroke-linejoin: var(--ddc-linejoin);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f;
    --ink:#f6f7f9;
    --ink-2:#e6e8ee;
    --muted:#aab1bf;
    --line:#242731;
    --accent:#f6f7f9;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.serif{font-family: ui-serif, "Georgia", "Times New Roman", serif;}
.sans{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}

.btn{
  display:inline-block; padding:12px 18px; border:1px solid var(--ink);
  border-radius:999px; font-weight:600; letter-spacing:.2px;
  transition: transform .06s ease, background .2s ease;
}

.nav-actions .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}


.btn:hover{transform:translateY(-1px); background:var(--ink); color:var(--bg)}
.btn.secondary{border-color:var(--line); color:var(--ink-2)}
.btn.secondary:hover{background:var(--line)}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--bg) 85%, transparent);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; height:68px;
}
.nav-actions{display:flex; gap:10px; align-items:center}

/* ===== Hero ===== */
.hero{
  display:grid; place-items:center; text-align:center; padding:86px 0 48px;
}
.hero h1{
  font-size: clamp(34px, 5vw, 56px); line-height:1.1; margin:18px 0 10px;
  letter-spacing:.2px;
}
.hero p{color:var(--muted); max-width:780px; margin:0 auto 26px}
.stack{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ===== Sections ===== */
section{padding:48px 0}
.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.section-head h2{margin:0; font-size: clamp(22px, 3.2vw, 28px)}
.kicker{color:var(--muted); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem}

/* ===== Services ===== */
.cards{
  display:grid; grid-template-columns: repeat(12,1fr); gap:16px;
}
.card{
  grid-column: span 12;
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, transparent), var(--bg));
}
.card h3{margin:6px 0 4px; font-size:18px}
.card p{margin:0; color:var(--muted)}

@media (max-width: 600px) {
  .nav-actions .btn {
    display: none;
  }
}

@media(min-width:720px){
  .card{grid-column: span 6}
}
@media(min-width:980px){
  .card{grid-column: span 4}
}

/* ===== Clients ===== */
.client-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:16px;
}
@media(min-width:720px){
  .client-grid{grid-template-columns: repeat(3,1fr)}
}
.client{
  border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg);
  display:grid; place-items:center; height:88px;
  transition:transform .06s ease;
}
.client:hover{transform: translateY(-2px)}

/* ===== Footer ===== */
footer{
  border-top:1px solid var(--line); margin-top:40px; padding:28px 0 48px; color:var(--muted);
  text-align:center; font-size:.95rem;
}

/* ===== Wordmark Type Lockups ===== */
.lockup{
  display:flex; align-items:center; gap:16px; justify-content:center;
}
.wordmark{
  display:grid; line-height:1;
}
.wordmark .name{font-weight:700; letter-spacing:.5px}
.wordmark .tag{letter-spacing:.28em; text-transform:uppercase; font-size:.76rem; color:var(--muted)}
.wordmark .name.serif{font-size: clamp(22px, 3.4vw, 36px)}

.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-1{margin-top:8px}
.mb-1{margin-bottom:8px}
.mt-2{margin-top:16px}
.mb-2{margin-bottom:16px}
.mt-3{margin-top:24px}
.mb-3{margin-bottom:24px}
.mt-4{margin-top:32px}
.mb-4{margin-bottom:32px}
.mt-5{margin-top:40px}
.mb-5{margin-bottom:40px}
.mt-6{margin-top:48px}
.mb-6{margin-bottom:48px}
.ml-0{margin-left:0}
.mr-0{margin-right:0}
.ml-1{margin-left:8px}
.mr-1{margin-right:8px}
.ml-2{margin-left:16px}
.mr-2{margin-right:16px}
.ml-3{margin-left:24px}
.mr-3{margin-right:24px}
.ml-4{margin-left:32px}
.mr-4{margin-right:32px}
.ml-5{margin-left:40px}
.mr-5{margin-right:40px}
.ml-6{margin-left:48px}
.mr-6{margin-right:48px}
.p-0{padding:0}
.p-1{padding:8px}
.p-2{padding:16px}
.p-3{padding:24px}
.p-4{padding:32px}
.p-5{padding:40px}
.p-6{padding:48px}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.pt-1{padding-top:8px}
.pb-1{padding-bottom:8px}
.pt-2{padding-top:16px}
.pb-2{padding-bottom:16px}
.pt-3{padding-top:24px}
.pb-3{padding-bottom:24px}
.pt-4{padding-top:32px}
.pb-4{padding-bottom:32px}
.pt-5{padding-top:40px}
.pb-5{padding-bottom:40px}
.pt-6{padding-top:48px}
.pb-6{padding-bottom:48px}
.pl-0{padding-left:0}
.pr-0{padding-right:0}
.pl-1{padding-left:8px}
.pr-1{padding-right:8px}
.pl-2{padding-left:16px}
.pr-2{padding-right:16px}
.pl-3{padding-left:24px}
.pr-3{padding-right:24px}
.pl-4{padding-left:32px}
.pr-4{padding-right:32px}
.pl-5{padding-left:40px}
.pr-5{padding-right:40px}
.pl-6{padding-left:48px}
.pr-6{padding-right:48px}
.m-0{margin:0}
.m-1{margin:8px}
.m-2{margin:16px}
.m-3{margin:24px}
.m-4{margin:32px}
.m-5{margin:40px}
.m-6{margin:48px}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-muted{color:var(--muted)}
.text-ink{color:var(--ink)}
.text-ink-2{color:var(--ink-2)}
.bg-ink{background:var(--ink); color:var(--bg)}
.bg-ink-2{background:var(--ink-2); color:var(--bg)}
.bg-muted{background:var(--muted); color:var(--bg)}
.bg-line{background:var(--line); color:var(--ink)}
.rounded{border-radius:var(--radius)}
.border{border:1px solid var(--line)}
.border-top{border-top:1px solid var(--line)}
.border-bottom{border-bottom:1px solid var(--line)}
.border-left{border-left:1px solid var(--line)}
.border-right{border-right:1px solid var(--line)}
.flex{display:flex}
.grid{display:grid}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.hider{display:none}