/*
Theme Name: Calixte LAO
Theme URI: https://lshfinactive.fr
Author: LSH FinActive
Author URI: https://lshfinactive.fr
Description: Thème WordPress sur mesure pour le site portfolio / CV de Calixte LAO, Directeur Comptable — aux couleurs de la charte graphique LSH FinActive.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calixte-lao
*/

  :root{
    --bg:#fffdf9;
    --surface:#faf6ee;
    --surface-2:#f5efe0;
    --border:#e7e1d2;
    --heading:#122747;
    --text:#1c2a3a;
    --muted:#5b6676;
    --accent:#c69a4e;
    --accent-soft:#e7d3a6;
    --accent-ink:#122747;
    --navy:#122747;
    --navy-deep:#0d1e38;
    --ok-bg:#eaf3ec;
    --ok-ink:#2f6b47;
    --shadow: 0 20px 50px -25px rgba(18,39,71,0.28);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0d1e38;
      --surface:#122747;
      --surface-2:#173059;
      --border:#25406b;
      --heading:#f5efe0;
      --text:#e7e1d2;
      --muted:#a9b7cc;
      --accent:#e0b872;
      --accent-soft:#3a3320;
      --accent-ink:#0d1e38;
      --ok-bg:#173625;
      --ok-ink:#8fd1a6;
      --shadow: 0 20px 50px -25px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0d1e38;
    --surface:#122747;
    --surface-2:#173059;
    --border:#25406b;
    --heading:#f5efe0;
    --text:#e7e1d2;
    --muted:#a9b7cc;
    --accent:#e0b872;
    --accent-soft:#3a3320;
    --accent-ink:#0d1e38;
    --ok-bg:#173625;
    --ok-ink:#8fd1a6;
    --shadow: 0 20px 50px -25px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .container{max-width:1120px;margin:0 auto;padding:0 28px;}
  h1,h2,h3,h4{font-family:'Fraunces',serif;color:var(--heading);margin:0;text-wrap:balance;font-weight:600;}
  h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;}
  h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.14;}
  h3{font-size:1.25rem;}
  h4{font-size:1.05rem;}
  p{margin:0;color:var(--text);}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:.76rem;
    letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
    margin-bottom:12px;
  }
  .eyebrow::before{content:"";width:20px;height:2px;background:var(--accent);border-radius:2px;}
  .lede{font-size:1.08rem;color:var(--muted);max-width:56ch;}

  section{padding:88px 0;}
  .section-tight{padding:72px 0;}
  .section-alt{background:var(--surface);}

  /* ---------- nav ---------- */
  header.site-nav{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    max-width:1120px;margin:0 auto;padding:16px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    position:relative;
  }
  .nav-toggle-input{display:none;}
  .nav-toggle-btn{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;padding:0;margin:0;cursor:pointer;
    background:transparent;border:1px solid var(--border);border-radius:8px;
  }
  .nav-toggle-btn span{
    display:block;width:18px;height:2px;margin:0 auto;background:var(--heading);
    border-radius:2px;transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2){opacity:0;}
  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;color:var(--heading);letter-spacing:.01em;white-space:nowrap;}
  .brand b{color:var(--accent);font-style:italic;font-weight:500;}
  nav.links{display:flex;align-items:center;gap:30px;}
  nav.links a{
    font-size:.92rem;font-weight:600;color:var(--text);text-decoration:none;
    padding:6px 0;border-bottom:2px solid transparent;transition:border-color .15s, color .15s;
  }
  nav.links a:hover{color:var(--accent-ink);border-color:var(--accent);}

  /* ---------- Polylang language switcher ---------- */
  /* Polylang's pll_the_languages() markup varies by version/config (it may
     or may not wrap items in a <ul>, and its own class names aren't relied
     on here). To guarantee a horizontal row regardless of the exact markup,
     every plausible wrapper tag is forced to flex with !important, and the
     row items are blockified into flex items the same way. */
  .lang-switcher{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:center;gap:8px;flex-shrink:0;
  }
  .lang-switcher ul,
  .lang-switcher ol,
  .lang-switcher div,
  .lang-switcher nav,
  .lang-switcher span{
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    list-style:none !important;align-items:center;gap:8px;margin:0 !important;padding:0 !important;
  }
  .lang-switcher li,
  .lang-switcher a{
    display:flex !important;align-items:center;justify-content:center;
    flex-shrink:0;list-style:none !important;float:none !important;
  }
  /* Box styling on <li> (typical ul>li>a>img markup) and, separately, on any
     <a> that sits directly in the switcher with no <li> wrapper — covers
     both shapes without depending on Polylang's own class names. */
  .lang-switcher li,
  .lang-switcher > a,
  .lang-switcher > ul > a,
  .lang-switcher > div > a{
    width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
    transition:border-color .15s, transform .15s;
  }
  .lang-switcher li:hover,
  .lang-switcher a:hover{border-color:var(--accent);transform:translateY(-1px);}
  .lang-switcher li.current-lang,
  .lang-switcher a.current-lang{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .lang-switcher img{width:18px;height:auto;border-radius:2px;display:block;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:.92rem;
    padding:11px 20px;border-radius:9px;text-decoration:none;white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--navy);color:#f5efe0;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{background:var(--accent);color:var(--accent-ink);}}
  :root[data-theme="dark"] .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  .btn-outline{border-color:var(--border);color:var(--heading);background:transparent;}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent-ink);}
  .btn svg{width:16px;height:16px;}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 60px;position:relative;overflow:hidden;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.8fr;gap:56px;align-items:center;}
  .hero-rule{width:56px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:20px;}
  .hero h1{margin-bottom:10px;}
  .hero h1 .hero-greet{display:block;font-style:italic;font-weight:600;color:var(--accent);font-size:.4em;letter-spacing:.02em;margin-bottom:6px;}
  .hero h1 .name{color:var(--heading);}
  .hero h1 .role{display:block;font-style:italic;font-weight:500;color:var(--accent);font-size:.62em;margin-top:8px;}
  .hero .lede{margin:20px 0 28px;max-width:52ch;}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;}

  .hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;}
  .deco-ring{position:absolute;border-radius:50%;border:1.5px solid var(--accent-soft);}
  .deco-ring.r1{width:380px;height:380px;}
  .deco-ring.r2{width:268px;height:268px;border-color:var(--accent);opacity:.5;}
  .icon-badge{
    position:relative;z-index:1;width:132px;height:132px;border-radius:32px;
    background:var(--surface-2);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  }
  .icon-badge svg{width:56px;height:56px;stroke:var(--accent-ink);}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .icon-badge svg{stroke:var(--accent);}}
  .hero-photo{
    position:relative;z-index:1;width:244px;height:244px;border-radius:50%;overflow:hidden;
    border:4px solid var(--surface);box-shadow:var(--shadow);background:var(--surface-2);
  }
  .hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  :root[data-theme="dark"] .icon-badge svg{stroke:var(--accent);}

  .trusted{margin-top:64px;}
  .trusted-title{
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);margin-bottom:20px;
  }
  .marquee{
    overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .mono-row{display:flex;gap:12px;width:max-content;animation:marquee-scroll 38s linear infinite;}
  .marquee:hover .mono-row{animation-play-state:paused;}
  @keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.mono-row{animation:none;flex-wrap:wrap;width:auto;}}
  .mono{
    width:84px;height:46px;border-radius:10px;background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;padding:8px 10px;flex-shrink:0;
    filter:grayscale(1) opacity(.55);transition:filter .2s ease, transform .15s ease;
  }
  .mono:hover{filter:grayscale(0) opacity(1);transform:translateY(-2px);}
  .mono img{max-width:100%;max-height:100%;object-fit:contain;}

  /* ---------- company banner ---------- */
  .company-banner{
    display:flex;align-items:center;gap:32px;flex-wrap:wrap;
    background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:44px 48px;
  }
  .company-banner-badge{
    width:74px;height:74px;border-radius:18px;flex-shrink:0;
    background:var(--navy);display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:700;font-style:italic;color:var(--accent);font-size:1.05rem;
  }
  .company-banner-text{flex:1;min-width:260px;}
  @media (max-width:600px){
    .company-banner{flex-direction:column;align-items:flex-start;padding:32px 26px;}
    .company-banner-text{min-width:0;}
  }
  .company-banner-text h3{margin-bottom:8px;}
  .company-banner-text p{color:var(--muted);margin-top:8px;max-width:64ch;}

  /* ---------- pills ---------- */
  .pill-row{display:flex;flex-wrap:wrap;gap:10px;}
  .pill{
    background:var(--navy);color:#f5efe0;border-radius:999px;padding:9px 18px;
    font-size:.86rem;font-weight:600;
  }
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill{background:var(--surface-2);color:var(--accent);border:1px solid var(--border);}}
  :root[data-theme="dark"] .pill{background:var(--surface-2);color:var(--accent);border:1px solid var(--border);}

  /* ---------- about / presentation ---------- */
  .about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
  .about-photo{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);}
  .about-photo img{width:100%;height:auto;}
  .about-copy h3{margin-bottom:18px;}
  .about-copy .pill-row{margin-bottom:24px;}
  .about-copy p + p{margin-top:16px;}
  .about-copy p{color:var(--text);}

  .contact-panel{
    margin-top:64px;display:grid;grid-template-columns:180px 1fr;gap:36px;align-items:start;
    background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:36px;
  }
  .contact-portrait{width:150px;height:150px;border-radius:50%;overflow:hidden;border:3px solid var(--bg);box-shadow:var(--shadow);}
  .contact-portrait img{width:100%;height:100%;object-fit:cover;}
  .contact-panel h3{margin-bottom:12px;}
  .contact-panel p{color:var(--muted);margin-bottom:20px;}

  /* ---------- experiences timeline ---------- */
  .timeline{position:relative;margin-top:56px;}
  .timeline::before{
    content:"";position:absolute;left:27px;top:6px;bottom:6px;width:1px;background:var(--border);
  }
  .tl-item{position:relative;padding-left:76px;margin-bottom:44px;}
  .tl-item:last-child{margin-bottom:0;}
  .tl-dot{
    position:absolute;left:0;top:0;width:56px;height:56px;border-radius:14px;
    background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;padding:8px;
    z-index:1;
  }
  .tl-dot img{max-width:100%;max-height:100%;object-fit:contain;}
  .tl-item.current .tl-dot{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,154,78,0.2);}
  .tl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:4px;}
  .tl-head h3{font-size:1.18rem;}
  .tl-current-tag{
    background:var(--ok-bg);color:var(--ok-ink);font-size:.72rem;font-weight:700;
    padding:3px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;
  }
  .tl-meta{
    display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem;color:var(--muted);margin-bottom:14px;
  }
  .tl-meta span{display:inline-flex;align-items:center;gap:5px;}
  .tl-meta svg{width:14px;height:14px;flex-shrink:0;}
  .tl-body p{color:var(--text);margin-bottom:12px;}
  .tl-body ul{margin:10px 0 12px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
  .tl-body ul li{position:relative;padding-left:20px;font-size:.92rem;color:var(--muted);}
  .tl-body ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
  .tl-link{
    display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.86rem;font-weight:700;
    color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent);
  }
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tl-link{color:var(--accent);}}
  :root[data-theme="dark"] .tl-link{color:var(--accent);}

  /* ---------- citation ---------- */
  .citation-banner{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius:24px;padding:64px 56px;position:relative;overflow:hidden;
  }
  .citation-banner::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 700px 400px at 85% 0%, rgba(224,184,114,0.14), transparent 60%);
  }
  .citation-banner .eyebrow{color:var(--accent);}
  .citation-banner .eyebrow::before{background:var(--accent);}
  .citation-mark{font-family:'Fraunces',serif;font-style:italic;font-size:3.2rem;color:var(--accent);line-height:1;margin-bottom:6px;}
  .citation-banner blockquote{
    margin:0;font-family:'Fraunces',serif;font-weight:500;font-style:italic;color:#f5efe0;
    font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.5;max-width:80ch;position:relative;z-index:1;
  }
  .citation-attr{margin-top:24px;color:#a9b7cc;font-size:.92rem;font-weight:600;position:relative;z-index:1;}

  /* ---------- services ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
  .svc-card{
    background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:26px 24px;
    transition:border-color .15s, transform .15s;
  }
  .svc-card:hover{border-color:var(--accent);transform:translateY(-3px);}
  .svc-num{
    font-family:'Fraunces',serif;font-style:italic;color:var(--accent);font-size:1rem;font-weight:600;margin-bottom:14px;
  }
  .svc-card h4{margin-bottom:10px;}
  .svc-card p{color:var(--muted);font-size:.92rem;margin-bottom:16px;}
  .svc-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
  .svc-card ul li{position:relative;padding-left:18px;font-size:.86rem;color:var(--text);}
  .svc-card ul li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--accent);}

  /* ---------- skills accordion ---------- */
  .skills-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:48px;}
  details.skill-card{
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:0;overflow:hidden;
  }
  details.skill-card summary{
    list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:16px;
    font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:var(--heading);
  }
  details.skill-card summary::-webkit-details-marker{display:none;}
  .skill-mono{
    width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:7px;
  }
  .skill-mono img{max-width:100%;max-height:100%;object-fit:contain;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .skill-mono{color:var(--accent);}}
  :root[data-theme="dark"] .skill-mono{color:var(--accent);}
  .chev{margin-left:auto;width:18px;height:18px;stroke:var(--muted);flex-shrink:0;transition:transform .2s;}
  details[open] .chev{transform:rotate(90deg);}
  .skill-body{padding:0 24px 26px 24px;}
  .skill-body p{color:var(--text);font-size:.94rem;margin-bottom:10px;}
  .skill-body p.sub{font-weight:700;color:var(--heading);margin-top:16px;margin-bottom:8px;font-size:.9rem;}
  .skill-body ul{margin:0 0 10px;padding:0;list-style:none;}
  .skill-body ul li{position:relative;padding-left:18px;font-size:.88rem;color:var(--muted);margin-bottom:6px;}
  .skill-body ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent);}

  /* ---------- formation / compétences / centres d'intérêt ---------- */
  .cred-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}
  .cert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;}
  .cert-item{
    display:flex;align-items:flex-start;gap:16px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;
  }
  .cert-badge{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    background:var(--bg);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
  }
  .cert-badge svg{width:19px;height:19px;stroke:var(--accent-ink);}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cert-badge svg{stroke:var(--accent);}}
  :root[data-theme="dark"] .cert-badge svg{stroke:var(--accent);}
  .cert-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
  .cert-text strong{font-family:'Fraunces',serif;font-weight:600;color:var(--heading);font-size:.98rem;line-height:1.3;}
  .cert-place{font-size:.82rem;color:var(--muted);}
  .cert-date{
    font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;padding-top:3px;
    font-variant-numeric:tabular-nums;
  }
  .skillset-block{margin-bottom:24px;}
  .skillset-block:last-child{margin-bottom:0;}
  .skillset-label{
    font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;
  }
  .tag-row{display:flex;flex-wrap:wrap;gap:9px;}
  .tag{
    background:var(--bg);border:1px solid var(--border);color:var(--text);
    border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600;
  }
  .tag-accent{border-color:var(--accent-soft);color:var(--accent-ink);}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag-accent{color:var(--accent);}}
  :root[data-theme="dark"] .tag-accent{color:var(--accent);}
  .hobbies-row{margin-top:56px;padding-top:40px;border-top:1px solid var(--border);}

  /* ---------- footer / contact ---------- */
  .cta-banner{
    background:var(--navy);border-radius:24px;padding:56px;
    display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  }
  .cta-banner h2{color:#f5efe0;margin-bottom:8px;}
  .cta-banner p{color:#a9b7cc;max-width:48ch;}
  .btn-outline-white{border:1px solid rgba(245,239,224,0.4);color:#f5efe0;}
  .btn-outline-white:hover{border-color:var(--accent);color:var(--accent);}

  footer{padding:48px 0 40px;border-top:1px solid var(--border);margin-top:20px;}
  .footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .footer-brand{font-family:'Fraunces',serif;font-weight:600;color:var(--heading);}
  .footer-links{display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap;}
  .footer-links a{color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:600;}
  .footer-links a:hover{color:var(--accent-ink);}
  .footer-fine{margin-top:18px;font-size:.8rem;color:var(--muted);}

  @media (max-width:860px){
    .nav-toggle-btn{display:flex;}
    nav.links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--bg);border-bottom:1px solid var(--border);
      box-shadow:var(--shadow);
      max-height:0;overflow:hidden;opacity:0;
      transition:max-height .28s ease, opacity .2s ease;
    }
    nav.links a{padding:14px 28px;border-bottom:1px solid var(--border);}
    .nav-toggle-input:checked ~ nav.links{max-height:420px;opacity:1;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{order:-1;min-height:180px;}
    .about-grid{grid-template-columns:1fr;}
    .contact-panel{grid-template-columns:1fr;}
    .svc-grid{grid-template-columns:1fr 1fr;}
    .skills-grid{grid-template-columns:minmax(0,1fr);}
    .tl-body ul{grid-template-columns:1fr;}
    .cta-banner{flex-direction:column;align-items:flex-start;}
    .cred-grid{grid-template-columns:minmax(0,1fr);gap:44px;}
  }
  @media (max-width:560px){
    .svc-grid{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .citation-banner, .cta-banner{padding:36px 24px;}
    .deco-ring.r1{width:300px;height:300px;}
    .deco-ring.r2{width:212px;height:212px;}
    .hero-photo{width:192px;height:192px;}
  }